آموزش افکت Fading در CSS 3
در زمانهای قدیم فقط یک راه برای ایجاد افکت Fading روی تصاویر وجود داشت و آن استفاده از جاوا اسکریپت و جی کوئری (Javascript/Jquery) بوده است.اما با روی کار آمدن CSS3 دیگر می توانید به راحتی Fading را روی هر آبجکتی که می خواهید اعمال کنید بدون اینکه از Jquery استفاده نمایید. ضمنا این افکت روی مرورگرهای نسل جدید که از CSS3 پشتیبانی می کنند قابل اجرا است.
یک تگ از نوع تصویر باز کرده و یک تصویر انتخاب کنید سپس کلاس آن را fade قرار دهید.
حالا کد زیر را به عنوان استایل CSS قرار دهید:
.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {opacity: 0.5;}حال برای دیدن نتیجه نهایی موس را روی متن زیر ببرید.
این یک دمو است.
همچنین می توانیم افکت Fading را علاوه بر عکس و متن بر روی Background Color در CSS اعمال کنیم . پس بیایید برای بهتر درک کردن این موضوع یک منوی ساده بسازیم.
CSS3 کار را برای طراحان وب آسان کرده است ولی به یاد داشته باشید این افکت روی مرورگرهایی با ورژن های جدید کار می کند. همچنین طراح وب بایستی بداند از یک افکت در چه زمانی استفاده نماید و در مواقع عادی از افکت های گوناگون استفاده نکرده و بازدید کننده سایت را فراری ندهد چون زیبایی یک وب سایت به دقت نظر و حرفه ای کار کردن بر روی آن بستگی دارد.
پایان آموزش CSS3
