آموزش ساخت دکمه راهنمایی ظاهر شدنی با CSS3

خوب زمانی که یه قسمت از سایتتون یکم سخته واسه کاربران باید یه راهنمایی واسش قرار بدین حالا اگه بخواین خیلی زیبا و شیک این کارو انجام بدین من پیشنهاد می کنم که با ما همراه باشید تا با هم یه دکمه ی خیلی…

این مطلب توسط محمد امین فاطمی مهر در تاریخ ۰۳ ام آذر ۱۳۹۳ارسال شده است.

جهت مطالعه آموزش ساخت دکمه راهنمایی ظاهر شدنی با CSS3 به سمت پایین اسکرول کنید.

آموزش ساخت دکمه راهنمایی ظاهر شدنی با CSS3

خوب زمانی که یه قسمت از سایتتون یکم سخته واسه کاربران باید یه راهنمایی واسش قرار بدین حالا اگه بخواین خیلی زیبا و شیک این کارو انجام بدین من پیشنهاد می کنم که با ما همراه باشید تا با هم یه دکمه ی خیلی زیبا واسه راهنمایی کاربرانتون درست کنیم به طوری که وقتی رویه این دکمه میره موس یه جعبه ی خیلی شیک با یه افکت زیبا ظاهر میشه خوب پس با ما همراه باشید.

آموزش ساخت دکمه راهنمایی:

اولین گام کد های HTML

خوب اولین کاری که باید انجام بدید باید یه پاراگراف ساده با یه کلاس به نام help-tip در یه div قرار بدید.

خوب این پاراگراف به صورت عادی مخفی هست و هر زمان که موس روی دکمه میاد با کمی انیمیشن زیبا و افکت ظاهر میشه.

دومین گام کد های CSS3

کد های استایل رو می تونید در فایل CSS جداگانه ای قرار بدید و به صفحه ای که دکمه در اون قرار داره لینک کنید یا هم تو همون صفحه با تگ STYLE کد ها رو بزارید.

این هم از کد های CSS3

در ضمن واسه اینکه مرورگر کروم پشتیبانی کنه از کد ها باید کلمه webkit در اول کد های CSS3 گذاشته بشه که ما واستون گذاشتیم اگه دیدید واسه مرورگر های دیگه مثل موزیلا کار نمی کنه کلمه moz ، و برای اوپرا o و برای اینترنت ایکسپلورر ms رو داخل دو خط تیره مثل همون webkit که در خط ۲۳ هست قرار بدید اگه هم مشکلی داشتین حتما بگین که مشکلتون رو برطرف کنم درضمین این اجزا رو واسه هر قسمتی دیگه می تونید استفاده کنید.

در آخر هم یه پیشنمایش از این کد ها به صورت عکس:

http://blog.bitfa.net/wp-content/uploads/2014/11/inline_help_tooltip1.jpg

منبع : پرن دیزاین

ساير مطالبي که شايد از خواندن آنها لذت ببريد!

مطالبي که در ذيل مشاهده ميکنيد نزديک ترين مطالب از لحاظ محتوايي به مقاله اي است که آنرا مطالعه کرديد...

آخرین نظرات خوانندگان این مطلب

نظرات شما برای ما ارزشمند است.پس نظرات زیبای خود را با ما در میان بگذارید...

  1. صالح طالبی می‌گه:

    سلام
    لطفا منبع مطلب رو هم ذکر کنید.
    با تشکر

  2. صالح طالبی می‌گه:

    خیلی ممنونم که همکاری کردی.

    شما هم نظر بدهید...

    معادله امنیتی(با عدد جای خالی را پر کنید نه با حروف!) * Time limit is exhausted. Please reload the CAPTCHA.

ممنون از یادآوریت دوست عزیز! ولی چون به جای عکس اصلی عکس تبلیغاتی لود میشه به نظر خیلی خوبه امیدوارم موفق باشی...

محمد امین فاطمی مهر

salam ino az yad nabarid dozdi yek ask v gozashtan to yek site por bazdid baeis masraf ram v cpu host shoma mi...

far

سلام دوست عزیز مراتب مشکل رو با مسئول هاستتون درمیون بگذارید ممکنه محدودیت سراسری روی php.ini اعمال شده باشه ی...

محمد امین فاطمی مهر

در خبرنامه بیتفا عضو شوید!

با عضویت در بیتفا، آخرین نوشته‌های بیتفا، پیشنهادهای ویژه و برخی مطالب آموزشی را در ایمیل خود دریافت کنید.

پربازدید ها

ما را در شبکه های اجتماعی دنبال کنید...

طراحی و کدنویسی این سایت تماما با تیم بیتفا بوده و هرگونه کپی برداری حرام بوده و مورد رضایت ما نمی باشد. جهت خرید قالب تماس بگیرید.

09370245225

b i t f a c o @ g m a i l . c o m

هورا ! اگه ایمیلهای خوشمزه آموزشی دوست داری ، همین الان تو خبرنامه عضو شو!

با عضویت در خبرنامه ما شما به راحتی در ایمیلتون میتونید آخرین مقالات بیتفا را مشاهده کنید علاوه بر این که به اعضای خبرنامه بعد از مدتی هدایای مبتنی بر وب ارزشمندی تعلق میگیره که قطعا شگفت زده خواهید شد!