لطفا صبر کنید ...

ایجاد منوی blur با CSS Transition

الهام غایب

توسط الهام غایب

دیدگاه ها: 0
بازدید ها : 568
رایگان
هدف ما این است که شما، در بالاترین سطح طراحی و توسعه وب باشید.

ثبت نام کنید

در این مقاله از لیداوب، می‌خواهیم نحوه استفاده از سایه متن و transitions برای ایجاد یک افکت blur برای منو  در CSS را آموزش دهیم.


کدهای HTML

ابتدا یک ساختار HTML برای منو خود ایجاد کرده و به آن یک کانتینر با یک عرض مشخص اضافه می‌کنیم. این منو به شکل زیر خواهد بود:

<ul class="bmenu">
	<li><a href="#">About</a></li>
	<li><a href="#">Illustrations</a></li>
	<li><a href="#">Photography</a></li>
	<li><a href="#">Web Design</a></li>
	<li><a href="#">Personal Projects</a></li>
	<li><a href="#">Contact</a></li>
</ul>

حالا به آن کمی استایل اضافه می‌کنیم.

کدهای CSS

تقریبا در تمام نمونه‌هایی که در این مقاله آورده می‌شود از یک استایل برای ul و برای عناصر لیست استفاده می‌کنیم. فقط عنصر لینک تغییر خواهد کرد. بنابراین، استایل مشترک برای فهرست نامنظم به صورت زیر خواهد بود:

.bmenu{
    padding: 0px;
    margin: 0 0 10px 0;
    position: relative;
}
.bmenu li{
    font-size: 50px;
    display: block;
}

حالا با هم چند نمونه را مرور می‌کنیم.

مثال اول

ایجاد منوی blur با CSS Transition

در مثال اول می‌خواهیم آیتم‌های منو را کمی بلور نمایش دهیم. برای این کار، به عناصر لینک، رنگ شفاف و یک سایه متنی سفید می‌دهیم. همچنین، transition‌ها را برای همه خصوصیات اضافه می‌کنیم:

.bmenu li a{
	color: transparent;
	display: block;
	text-transform: uppercase;
	text-shadow: 0px 0px 5px #fff;
	letter-spacing: 1px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

وقتی نشانگر موس روی عنصر لینک قرار می‌گیرد، می‌خواهیم آن عنصر به صورت واضح نمایش یافته و از حالت محو خارج شود و تمام عناصر دیگر در حال محو قرار بگیرند. در CSS نمی‌توانیم بگوییم در زمان قرار گرفتن موس روی یک عنصر خاص با بقیه sibling ها کار x را انجام بده چون سلکتور sibling فقط در HTML می‌تواند sibling بعدی را در اختیار شما قرار دهد. اما می‌توانیم از ترفند دیگری استفاده کنیم. چون تمام آیتم‌های ما به صورت خیلی مرتب به صورت عناصر block چیده شده اند، می‌توانیم بگوییم هر زمان نشانگر موس روی کل منو قرار گرفت، همه چیز در حالت محو قرار بگیرد و وقتی روی یک آیتم خاص قرار گرفت، آن را شفاف کنیم:

.bmenu:hover li a{
	text-shadow: 0px 0px 5px #0d1a3a;
}
.bmenu li a:hover{
	color: #fff;
	text-shadow: 0px 0px 1px #fff;
	padding-left: 10px;
}

با افزودن پدینگ در سمت چپ، آیتمی که موس روی آن قرار گرفته است اندکی به راست حرکت می‌کند.

مثال دوم

ایجاد منوی blur با CSS Transition

در مثال دوم، می‌خواهیم آیتم‌های منو را کمی متمایل به طرفین کنیم. این کار از طریق خصوصیت 2D transform انجام خواهد شد. مقدار متمایل شدگی منفی ۱۲ درجه است که درجه تمایل در محور x می‌باشد. لینک s دارای یک بک گراند نیمه شفاف است که از طریق استفاده از مقدار rgba به دست می‌آید. همچنین، با استفاده از rgba سایه متنی نیمه شفاف اضافه می‌کنیم:

.bmenu li a{
	display: block;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px rgba(89,22,20,0.3);
	color: #581514;
	padding: 5px 20px;
	margin: 2px;
	background: rgba(255,255,255,0.2);
	letter-spacing: 1px;
	-webkit-transform: skew(-12deg);
	-moz-transform: skew(-12deg);
	-o-transform: skew(-12deg);
	-ms-transform: skew(-12deg);
	transform: skew(-12deg);
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

با قرار گرفتن نشانگر موس روی منو، زاویه مایل را به صفر تغییر داده و آن را به صورت محو و با یک بک گراند نیمه شفاف نمایش خواهیم داد. لینکی که موس روی آن قرار می‌گیرد هیچ بک گراندی نخواهد داشت:

.bmenu:hover li a{
	color: transparent;
	text-shadow: 0px 0px 10px #fff;
	background: rgba(88,22,22,0.2);
	-webkit-transform: skew(0deg);
	-moz-transform: skew(0deg);
	-o-transform: skew(0deg);
	-ms-transform: skew(0deg);
	transform: skew(0deg);
}
.bmenu li a:hover{
	background: transparent;
	text-shadow: 1px 1px 10px rgba(89,22,20,0.6);
	color: #581514;
}

مثال سوم

ایجاد منوی blur با CSS Transition

در نمونه سوم کمی با اندازه عناصر بازی می‌کنیم. در ابتدا، اندازه آن‌ها را کوچک و محو کرده و از یک transition تا حدودی خطی استفاده می‌کنیم:

.bmenu li a{
	white-space: nowrap;
	color: transparent;
	display: block;
	text-transform: uppercase;
	text-align: center;
	text-shadow: 0px 0px 6px #fff;
	letter-spacing: 1px;
	-moz-transform: scale(0.5); 
	-ms-transform: scale(0.5); 
	-o-transform: scale(0.5); 
	-webkit-transform: scale(0.5); 
	transform: scale(0.5); 
	-webkit-transition: all 0.6s linear;
	-moz-transition: all 0.6s linear;
	-o-transition: all 0.6s linear;
	-ms-transition: all 0.6s linear;
	transition: all 0.6s linear;
}

با قرار گرفتن موس روی منو، آیتم‌ها بیشتر در حالت blur قرار گرفته و عنصری که نشانگر بر روی آن قرار دارد به اندازه واقعی تغییر سایز خواهد داد:

.bmenu:hover li a{
	text-shadow: 0px 0px 15px #fff;
}
.bmenu li a:hover{
	text-shadow: 0px 0px 1px #fff;
	-moz-transform: scale(1); 
	-ms-transform: scale(1); 
	-o-transform: scale(1); 
	-webkit-transform: scale(1); 
	transform: scale(1); 
}

مثال چهارم

ایجاد منوی blur با CSS Transition

در این مثال، به عناصر لینک یک بک گراند نیمه شفاف سیاه و یک رنگ متنی نارنجی پر رنگ می‌دهیم. در اینجا از تابع خطی timing transition استفاده می‌کنیم:

.bmenu li a{
	display: block;
	text-transform: uppercase;
	text-shadow: 0px 0px 2px #eeb213;
	color: #eeb213;
	padding: 5px 20px;
	margin: 2px;
	background: rgba(0,0,0,0.7);
	letter-spacing: 1px;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

وقتی نشانگر موس را روی یک آیتم قرار می‌دهیم، می‌خواهیم آن آیتم بلور شده و بک گراند آن هم شفاف‌تر شود:

.bmenu:hover li a{
	text-shadow: 0px 0px 10px #eeb213;
	color: transparent;
	background: rgba(0,0,0,0.2);
}
.bmenu li a:hover{
	background: rgba(0,0,0,1.0);
	text-shadow: 0px 0px 1px #eeb213;
}

مثال پنجم

ایجاد منوی blur با CSS Transition

مثال پنجم فقط از رنگ سفید برای سایه متنی و رنگ فونت‌ها استفاده کرده و کمی عناصر را بلور می‌کند:

.bmenu li a{
	color: transparent;
	display: block;
	text-transform: uppercase;
	text-shadow: 0px 0px 4px #fff;
	letter-spacing: 1px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

وقتی نشانگر موس روی آیتم قرار بگیرد اندکی محو‌تر شده و کمی جا به جا می‌شود:

.bmenu:hover li a{
	text-shadow: 0px 0px 6px #fff;
}
.bmenu li a:hover{
	color: #fff;
	text-shadow: 0px 0px 1px #fff;
	padding-left: 10px;
}

مثال ششم

ایجاد منوی blur با CSS Transition

در این مثال ما به عناصر یک بک گراند سفید نیمه شفاف می‌دهیم:

.bmenu li a{
	white-space: nowrap;
	display: block;
	text-transform: uppercase;
	text-shadow: 1px 1px 2px rgba(71,80,23,0.3);
	color: #fff;
	padding: 5px 20px;
	margin: 2px;
	background: rgba(255,255,255,0.2);
	letter-spacing: 1px;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

می‌خواهیم به اولین و آخرین عنصر کمی خطوط گرد بدهیم تا منو کمی یکنواخت‌تر و منظم‌تر به نظر برسد. عناصر مورد نظر خود را با سلکتورهای first-child و last-child انتخاب می‌کنیم:

.bmenu li:first-child a{
	-webkit-border-radius: 15px 15px 0px 0px;
	-moz-border-radius: 15px 15px 0px 0px;
	border-radius: 15px 15px 0px 0px;
}
.bmenu li:last-child a{
	-webkit-border-radius: 0px 0px 15px 15px;
	-moz-border-radius: 0px 0px 15px 15px;
	border-radius: 0px 0px 15px 15px;
}

وقتی نشانگر موس روی عناصر قرار گرفت می‌خواهیم آن‌ها محو‌تر شوند و عنصر که موس روی آن به صورت اختصاصی توقف می‌کند، تغییر رنگ داده و دارای بک گراند شفاف شود:

.bmenu:hover li a{
	text-shadow: 0px 0px 10px #fff;
	color: transparent;
}
.bmenu li a:hover{
	background: transparent;
	text-shadow: 1px 1px 10px rgba(71,80,23,0.6);
	color: #c4d85a;
}

مثال هفتم

ایجاد منوی blur با CSS Transition

در مثال هفتم، می‌خواهیم با افزودن یک شعاع مرزی با مقدار نیمی از ارتفاع و عرض منو، کل آن شبیه یک دایره شود:

.bmenu{
	padding: 50px 0px;
	margin: 0 auto;
	position: relative;
	background: rgba(0,0,0,0.7);
	width: 500px;
	height: 400px;
	-webkit-border-radius: 250px;
	-moz-border-radius: 250px;
	border-radius: 250px;
	-webkit-transition: background-color 0.5s ease-in-out;
	-moz-transition: background-color 0.5s ease-in-out;
	-o-transition: background-color 0.5s ease-in-out;
	-ms-transition: background-color 0.5s ease-in-out;
	transition: background-color 0.5s ease-in-out;
}

در اینجا از transitions استفاده می‌کنیم چون می‌خواهیم وقتی وارد منو شدیم، رنگ بک گراند تغییر کند. با استفاده از مقادیر rgba، به شفافیت آن اضافه می‌کنیم:

.bmenu:hover{
	background: rgba(0,0,0,0.2);
}

اندازه فونت و ارتفاع خطی عنصر لیست را کمی متعادل می‌کنیم:

.bmenu li{
	font-size: 40px;
	display: block;
	line-height: 66px;
}

عناصر کوچکتر شده و محو می‌شوند:

.bmenu li a{
	white-space: nowrap;
	color: transparent;
	display: block;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 0px 0px 3px #fff;
	letter-spacing: 1px;
	-moz-transform: scale(0.8); 
	-ms-transform: scale(0.8); 
	-o-transform: scale(0.8); 
	-webkit-transform: scale(0.8); 
	transform: scale(0.8);
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	-ms-transition: all 0.4s linear;
	transition: all 0.4s linear;
}

با قرار گرفتن نشانگر موس روی منو، عناصر آن محو‌تر شده و عنصری که موس روی آن متوقف می‌شود دارای رنگ بک گراند زیبایی خواهد شد و به اندازه واقعی تغییر خواهد کرد:

.bmenu:hover li a{
	text-shadow: 0px 0px 10px #fff;
}
.bmenu li a:hover{
	text-shadow: none;
	color: #fff;
	background: rgba(129,6,29,0.8);
	-moz-transform: scale(1); 
	-ms-transform: scale(1); 
	-o-transform: scale(1); 
	-webkit-transform: scale(1); 
	transform: scale(1); 
}

مقالات بیشتر در لیداوب:

در این مقاله با هفت مثال پر کاربرد آشنا شدید که بسیار ساده و کاربردی هستند. برای دنبال کردن مقالات کاربردی مشابه در زمینه CSS می‌توانید مقالات لیداوب را دنبال کنید.

منبع :

5 از 1 رای

 مطالب مرتبط  

در قسمت زیر مطالبی وجود دارند که با مقاله فعلی مرتبط هستند



متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین مطالب

آموزش در لیداوب

از مقالات و ویدیو های آموزشی خودتان کسب درآمد کنید!

جدیدترین سرویس ما برای دوستان متخصص و خوش بیان در زمینه طراحی وب ارائه شد. این سرویس به شما این امکان را می دهد که به آسانی مقالات و یا ویدیو های آموزشی خود را در لیداوب منتشر کنید. فرصت مناسبی است که بدون داشتن وب سایت و یا وبلاگ و مهم تر از همه بدون هزینه، مطالب خود را در لیداوب منتشر کنید و مهم تر از همه با فروش آنها کسب درآمد کنید. همین حالا شروع کنید و این فرصت استثنایی را از دست ندهید.