آموزش ساخت منوی های زیبا با Css3
ساخت منوی های زیبا با Css3 . با عرض سلام و خسته نباشید خدمت بازدیدکنندگان سایت آی وحید . امروز قصد داریم باهم نحوه ساخت منوی های زیبا با Css3 با افکت های جذاب و زیبا رو یاد بگیریم.
اگر شما هم طراح وب هستید و یا مدیریت یک سایت رو به عهده دارید حتما دوست دارین وقتی کاربران وارد سایت شما میشن از ظاهر سایت راضی باشن و همیشه این رو به یاد داشته باشید که هرچه سایت شما زیبا تر باشه افراد بیشتری رو جذب میکنه پس تا آخر این آموزش مارو همراهی کنید تا باهم نحوه ساخت منوی های زیبا با Css3 رو یاد بگیریم.
کالکشن ساخت منوی های زیبا با Css3 شامل افکت های زیر هست :
- 2D Transitions
- Background Transitions
- Icons
- Border Transitions
- Shadow and Glow Transitions
- Speech Bubbles
- Curls
به دو روش میتونین از این افکت ها ساخت منوی های زیبا با Css3 در قالب سایتتون استفاده کنید که در ادامه باهم برسی میکنیم.
روش اول: در روش اول ما به فایل hover-min.css نیاز داریم تا بتونیم از افکت ها استفاده کنیم. به مثال زیر توجه کنید:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ivahid.com - Menu Effect</title>
<link rel="stylesheet" type="text/css" href="hover-min.css">
<style type="text/css">
.btn {
height: 20px;
background-color: #c3df8d;
text-decoration: none;
text-align: center;
font-size: 14px;
padding: 20px;
padding-top: 20px;
margin: 20px;
}
</style>
</head>
<body>
<a href="#" class="btn hvr-sweep-to-top">Sweep To Top</a>
</body>
</html>خب سوال اینجاست که ما الان چه کار کردیم ؟؟ اول از همه شما هم یک سند HTML ایجاد کنید و کد های فوق رو درش قرار بدید ،سپس فقط فایل hover-min.css رو که به همراه دو فایل دیگر دانلود کردید در کنار سند HTML خود قرار دهید.حالا وقتشه که نتیجه کار رو در مشاهده کنید، سند HTML که ایجاد کردید رو باز کنید میبینید که وقتی ماوس رو دکمه سبز رنگ میره تغییر جالبی میکنه.
ما در این فایل HTML یک لینک با کلاس btn ایجاد کردیم و استایل های ساده ای رو براش اعمال کردیم و چون من میخواستم از افکت Sweep To Top استفاده کنم در کنار نام کلاس
یک hvr-sweep-to-top هم قرار دادم تا افکت مورد نظر رو از فایل hover-min.css فراخوانی کنه و به این صورت تونستیم از این افکت استفاده کنیم ولی نکته اینجاست که فایل hover-min.css حجم بالایی داره و نزدیک به 100 کیلوبایت هست به همین خاطر پیشنهاد من به شما روش دوم هست.
روش دوم ساخت منوی های زیبا با Css3 : در این روش فایل خاصی رو به قالب خودمون متصل نمیکنیم فقط کافیه کد های افکت مورد نظر رو به استایل اضافه کنیم، برای مثال میخوام از افکت Fade استفاده کنم:
<a href="#" class="btn hvr-fade">Fade</a>سپس کد های زیر رو به استایل اضافه میکنم :
/* Fade */
.hvr-fade {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: color, background-color;
transition-property: color, background-color;
}
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
background-color: #2098d1;
color: white;
}شما میتونید با ایجاد تغییرات دلخواه نتیجه کار رو زیبا تر کنید، حتما به رنگ ها توجه کنید.
با تشکر از همراهی شما،موفق باشید.
