آموزش افکت Fading در CSS 3

آموزش افکت Fading در CSS 3

CSS3در زمانهای قدیم فقط یک راه برای ایجاد افکت Fading روی تصاویر وجود داشت و آن استفاده از جاوا اسکریپت و جی کوئری (Javascript/Jquery) بوده است.اما با روی کار آمدن CSS3 دیگر می توانید به راحتی Fading را روی هر آبجکتی که می خواهید اعمال کنید بدون اینکه از Jquery استفاده نمایید. ضمنا این افکت روی مرورگرهای نسل جدید که از CSS3 پشتیبانی می کنند قابل اجرا است.

یک تگ از نوع تصویر باز کرده و یک تصویر انتخاب کنید سپس کلاس آن را fade قرار دهید.

حالا کد زیر را به عنوان استایل CSS قرار دهید:

حال برای دیدن نتیجه نهایی موس را روی متن زیر ببرید.
این یک دمو است.

همچنین می توانیم افکت Fading را علاوه بر عکس و متن بر روی Background Color در CSS اعمال کنیم . پس بیایید برای بهتر درک کردن این موضوع یک منوی ساده بسازیم.

CSS3 کار را برای طراحان وب آسان کرده است ولی به یاد داشته باشید این افکت روی مرورگرهایی با ورژن های جدید کار می کند. همچنین طراح وب بایستی بداند از یک افکت در چه زمانی استفاده نماید و در مواقع عادی از افکت های گوناگون استفاده نکرده و بازدید کننده سایت را فراری ندهد چون زیبایی یک وب سایت به دقت نظر و حرفه ای کار کردن بر روی آن بستگی دارد.

پایان آموزش CSS3

دیدگاه کاربران

این وب سایت متعلق است به آذین وب (طراحی سایت در اصفهان) و تمامی حقوق آن محفوظ است.

طـبق ماده 12 فصل سوم قانون جرائم رایانه ای هرگونه کپی برداری از قالب پیگرد قانونی دارد.