آموزش افکت Fading در CSS 3
یک تگ از نوع تصویر باز کرده و یک تصویر انتخاب کنید سپس کلاس آن را 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