محو نمودن تصاویر با css3

[elham1388]

یکی از ترفندهایی که می توانید در طراحی سایت خود استفاده نمایید محو و ظاهر نمودن تصاویر با استفاده از خصیصه های CSS3 می باشد. opacityو transition خصیصه هایی است که بدین منظور استفاده می شود و ابزارهای شگفت انگیزی برای جالب نمودن صفحات وب سایت می باشند. اولین فاکتوری که می بایست بدانید تغییر opacity زمانی که بازدیدکننده بر روی عنصری مانند عکس قرار می گیرد.قطعه کد زیر توضیح دهنده ایفکت fade in می باشد.
<img src="/demo/puppy-in-shade.jpg" width="300" height="266" class="greydout">
به منظور غیرفعال نمودن در اینجا کدهای CSS را بدان اضافه می نماییم.
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}


به منظور واضح شدن عنصر زمانی که موس بر روی آن قرار می گیرد کلاس زیر را درج می نماییم.
.greydout:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}


همان طور که مشاهده می نمایید ایفکت بسیار زیبایی به تصاویر اضافه می کند که ابتدا نمایش داده می شود و با قرار گرفتن بر روی عنصر محو شود. حال می خواهیم خصیصه transition را به این کلاس اضافه نماییم. قطعه کد زیر توضیحی بر روش انجام این خصیصه می باشد.
.greydout {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease;






حال برای اضافه نمودن ایفکت fade out کدهای زیر را می توان در طراحی وب سایت درج نماییم.
<img src="http://0.tqn.com/d/webdesign/1/0/C/m/1/puppy-in-shade.jpg" width="300" height="266" class="withfadeout">
و در کدهای css آن قطعه کد زیر را درج می نماییم.
.withfadeout {
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
.withfadeout:hover {
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}


شما می توانید این ایفکت ها را تنها به تصاویر اکتفا ندهید و برای دکمه های موجود در طراحی سایت خود نیز استفاده نمایید. درج این ایفکت ها موجب جذاب تر شدن صفحات سایت از نظر کابران می شود که ادامه این روند افزایش ترافیک را برای سایت ما به دنبال خواهد داشت و به طبع آن سئو وب سایت خود را بهبود بخشیده ایم.در اینجا نمونه ای از به کاربری این ایفکت بر روی منو وب سایت را نمایش داده ایم و گزینه های منو با قرار گرفتن موس بر روی آن محو و ظاهر می شود.
<ul id="sampleNav">
<li><a href="http://webdesign.about.com/">Home</a></li>
<li><a href="http://webdesign.about.com/od/css3tutorials/Css3-Tutorials.htm">CSS3 Tutorials</a></li>
<li><a href="http://webdesign.about.com/od/css/a/aastylelibrary_3.htm">CSS3 Properties</a></li>
</ul>


کد css آن بصورت زیر می باشد.
ul#sampleNav { list-style: none; }
ul#sampleNav li {
display: inline;
float: left;
padding: 5px 15px;
margin: 0 5px;
-webkit-transition: all 2s linear;
-moz-transition: all 2s linear;
-ms-transition: all 2s linear;
-o-transition: all 2s linear;
transition: all 2s linear;
}
ul#sampleNav li a { text-decoration: none; }
ul#sampleNav li:hover {
background-color: #DAF197;
}


در خصوص پشتیبانی مرورگرها در مورد این ایفکت زیبا باید بیان داشت که تمامی مرورگرها این خصیصه را سرویس دارند،بجز IE که خصیصه transition را پشتیبانی نمی کند .البته در ورژن های IE 10 به بعد، که این خصیصه در نظر گرفته شده است.


منبع: محو نمودن تصاویر با CSS3 (http://www.npco.net/demo/articles/270-%D9%85%D8%AD%D9%88-%D9%86%D9%85%D9%88%D8%AF%D9%86-%D8%AA%D8%B5%D8%A7%D9%88%DB%8C%D8%B1-%D8%A8%D8%A7-css3.html)