ساخت منوی های زیبا با Css3

  • ۲۸ مرداد ۱۳۹۴
  • 1,144 نفر
  • یک دیدگاه
  • امیر
 
1 Star2 Stars3 Stars4 Stars5 Stars

ساخت منوی های زیبا با Css3

آموزش ساخت منوی های زیبا با Css3

ساخت منوی های زیبا با Css3 . با عرض سلام و خسته نباشید خدمت بازدیدکنندگان سایت آی وحید . امروز قصد داریم باهم نحوه ساخت منوی های زیبا با Css۳ با افکت های جذاب و زیبا رو یاد بگیریم.

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

 

کالکشن ساخت منوی های زیبا با Css3 شامل افکت های زیر هست :

  • ۲D Transitions
  • Background Transitions
  • Icons
  • Border Transitions
  • Shadow and Glow Transitions
  • Speech Bubbles
  • Curls

به دو روش میتونین از این افکت ها ساخت منوی های زیبا با Css3 در قالب سایتتون استفاده کنید که در ادامه باهم برسی میکنیم.

روش اول: در روش اول ما به فایل hover-min.css نیاز داریم تا بتونیم از افکت ها استفاده کنیم. به مثال زیر توجه کنید:

خب سوال اینجاست که ما الان چه کار کردیم ؟؟ اول از همه شما هم یک سند HTML ایجاد کنید و کد های فوق رو درش قرار بدید ،سپس فقط فایل hover-min.css رو که به همراه دو فایل دیگر دانلود کردید در کنار سند HTML خود قرار دهید.حالا وقتشه که نتیجه کار رو در مشاهده کنید، سند HTML که ایجاد کردید رو باز کنید میبینید که وقتی ماوس رو دکمه سبز رنگ میره تغییر جالبی میکنه.

ما در این فایل HTML یک لینک با کلاس btn ایجاد کردیم و استایل های ساده ای رو براش اعمال کردیم و چون من میخواستم از افکت Sweep To Top استفاده کنم در کنار نام کلاس

یک hvr-sweep-to-top هم قرار دادم تا افکت مورد نظر رو از فایل hover-min.css فراخوانی کنه و به این صورت تونستیم از این افکت استفاده کنیم ولی نکته اینجاست که فایل hover-min.css حجم بالایی داره و نزدیک به ۱۰۰ کیلوبایت هست به همین خاطر پیشنهاد من به شما روش دوم هست.

روش دوم ساخت منوی های زیبا با Css3 : در این روش فایل خاصی رو به قالب خودمون متصل نمیکنیم فقط کافیه کد های افکت مورد نظر رو به استایل اضافه کنیم، برای مثال میخوام از افکت Fade استفاده کنم:

 

سپس کد های زیر رو به استایل اضافه میکنم :

شما میتونید با ایجاد تغییرات دلخواه نتیجه کار رو زیبا تر کنید، حتما به رنگ ها توجه کنید.

با تشکر از همراهی شما،موفق باشید.

 

با سلام و احترام
از مطالب مفید و خوبتون ممنونم.
لطفا به این رویه ادامه بدید و بیشتر مطالب بذارید.

تشکر

تارنما سازان وب پارس درگاه پرداخت واسط پی پکس لول رنگ - پالت رنگ های مورد تایید آی وحید تاتسی | tutsi فروشگاه قالب اختصاصی تمی

FB google plus