آموزش کامل استفاده از خاصیت فیلتر در Css

یکی از خاصیت های بسیار حرفه ای و زیبای CSS , خاصیت filter میباشد . این خاصیت با مقادیری که دارد , میتوانید عکس مورد نظر خود را به سیاه سفید , تار , سایه و … تبدیل کنید .

برای این ساعت از سایت اسکریپت دات کام قصد دارم به آموزش این توابع از css بپردازم که امیدوارم مورد پسند کاربران گرامی قرار گیرد .

یکی از معایب filter ها , عدم پشتیبانی تمامی مرورگرها از این خاصیت می باشد . این خاصیت را در حال حاضر مرورگر های Google Chrome و Opera پشتیبانی میکنند و مرورگر های FireFox , Safari و IE از این خاصیت پشتیبانی نمیکنند .

طبیعتا وب سایتی مورد تایید است که در تمامی مرورگرها یکسان باشد . یعنی از خاصیت هایی استفاده شود تا تمامی مرورگرها قابلیت پشتیبانی از آنها را داشته باشند . ولی این مورد , به معنی عدم استفاده از Filter ها نمی باشد . چون در حال حاضر , 60% مردم دنیا از گوگل کروم استفاده میکنند .

و اما آموزش : 

1 – در ابتدا باید توجه داشته باشید که باید در css , هم خاصیت Filter را بنویسید و هم با پیشوند -webkit-

( Function  به معنی تابع می باشد که در ادامه آموزش خواهم داد )

filter:Function();
-webkit-filter:Function();

2 – طبیعتا برای همه ی عکس های یک وب سایت , دادن این توابع خیلی عقلانی نیست و باید به صورت سفارشی سازی , فقط بعضی از عکس ها از این توابع تبعیت کنند .

میتوانید از کلاس های html استفاده کنید .  به عنوان مثال :  

کد نویسی در سی اس اس
img.test{
    filter:Function();
    -webkit-filter:Function();	
}
---------------------------------------
کد نویسی در اچ تی ام ال
<img src="آدرس عکس" class="test">

تابع خاصیت GrayScale ( سیاه و سفید ) :  ( نکته : مقدایر بین %0 تا  %100 را میگیرد )

filter:grayscale(100%);
-webkit-filter:grayscale(100%);

تابع خاصیت sepia ( عکس های قدیمی ) :  ( نکته : مقدایر بین %0 تا %100 را میگیرد )

filter:sepia(100%);
-webkit-filter:sepia(100%);

تابع خاصیت saturate ( غلظت رنگ ها ) :  ( نکته : مقدایر بین %0 تا  %∞ را میگیرد )

filter:saturate(1000%);
-webkit-filter:saturate(1000%);

 تابع خاصیت blur ( تاری و شفافیت عکس ) :  ( نکته : مقدایر بین 0px تا 100px را میگیرد )

filter:blur(5px);
-webkit-filter:blur(5px);

تابع خاصیت hue-rotate ( تغییر رنگ بر اساس دایره رنگی ) :  ( نکته : مقدایر بین 0deg تا 360deg را میگیرد )

filter:hue-rotate(90deg);
-webkit-filter:hue-rotate(90deg);

 تابع خاصیت invert ( تبدیل رنگ ها به مکمل رنگشان ) :  ( نکته : مقدایر بین %0 تا %100 را میگیرد )

filter:invert(100%);
-webkit-filter:invert(100%);

 تابع خاصیت contrast ( کنتراست ) :  ( نکته : مقدایر بین %0 تا  %∞ را میگیرد )

filter:contrast(50%);
-webkit-filter:contrast(50%);

 تابع خاصیت brightness ( تاریکی و روشنایی ) :  ( نکته : مقدایر بین %0 تا  %∞ را میگیرد )

filter:brightness(200%);
-webkit-filter:brightness(200%);

 تابع خاصیت drop-shadow ( سایه ) :

توجه : عدد اول جابجایی سایه در جهت محور x , عدد دوم جابجایی سایه در جهت محور y , عدد سوم مقدار سایه و در آخر رنگ سایه  . ضمنا عدد ای اول و دوم میتوانند منفی هم باشند .

filter:drop-shadow(10px 10px 55px #bbb);
-webkit-filter:drop-shadow(10px 10px 5px #bbb);

دموی تمامی توابع

پخش اختصاصی

گرداوری : وحید مجیدی

فایل آماده آموزش :

[sdm_download id=”1866″ fancy=”0″]