آموزش فیلترها در CSS

خصوصیت filter ابزاری قدرتمند است که طراحان می توانند برای دستیابی به جلوه های ویژه تصویری در صفحات وب از آن استفاده کنند . مانند فیلتر بلور (blur) فیلتر سیاه و سفید (grayscale), فیلتر شفافیت (opacity) و ... که تقریبا شبیه فیلترهای فتوشاپ عمل می کنند.

دستور کلی فیلترها به صورت زیر است :

.selector {
      filter :  <filter-function>  | none
}

که روی تگ یا تگ هایی که انتخاب کرده ایم اعمال می شوند .

- توابع یا انواع فیلترها :

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()

هر کدام از این فیلترها (توابع) مقداری را دریافت می کنند . که معمولا به صورت درصد می باشد. برای فیلترهایی که درصد قبول می کنند می توان آن مقدار را به اعشاری نیز وارد کرد به طور مثال 45% را می توان به صورت 0.45 نیز وارد کرد .در ادامه به معرفی این فیلترها می پردازیم .

• فیلتر ( ) grayscale

یک تصویر را سیاه و سفید می کند . مقداری بین 0% تا 100% را دریافت می کند که 100% یعنی تصویر کاملا سیاه و سفید شود . می توانیم به جای % عددی بین 0 تا 1 را نیز وارد کنیم . در صورتی که مقدار معتبری وارد نکنیم به طور پیش فرض مقدار 100% یا 1 در نظر گرفته و تصویر کاملا سیاه و سفید می شود. این فیلتر مقادیر منفی را قبول نمی کند .

#img-1{
      filter:grayscale(1);
}

• فیلتر ( ) sepia

این فیلتر یک سایه رنگ روی تصویر اعمال می کند . و مقداری بین 0% تا 100% و یا 0 تا 1 قبول می کند . اگر مقدار معتبری وارد نشود به طور پیش فرض مقدار 100% را اعمال می کند و مقادیر منفی را هم نمی پذیرد .

#img-2{
      filter:sepia(1);
}

• فیلتر ( ) saturate

این فیلتر رنگ های تصویر را اشباع می کند و مقداری بین 0% تا 100% یا 0 تا 1 را قبول می کند . در مقدار 0 تصویر رنگ خود را از دست می دهد و در مقدار 100% رنگ ها حالت عادی دارند و هر چه مقدار بیشتر شود به صورت خطی ، رنگ ها اشباع تر می شوند .این فیلتر هم مقادیر منفی را نمی پذیرد .

#img-3{
      filter: saturate(10);
}

• فیلتر ( ) hue – rotate

در رنگ ها مفهومی داریم به نام دایره رنگ که رنگ ها روی این دایره از صفر تا 360 درجه قرار گرفته اند . این فیلتر باعث چرخش رنگ تصویر به اندازه مقدار داده شده می شود .

ورودی باید اندازه یک زاویه باشد که با واحد deg آن را بیان می کنیم . مانند 30deg به معنی 30 درجه . بدیهی است مقدار 0 یا 360 یا مضاربی از آن به معنی عدم تغییر رنگ است . و البته می توان به طور برعکس با عدد منفی روی دایره رنگ حرکت کرد و مانند 60deg-

#img-4{
      filter: hue-rotate(-780deg);
}

• فیلتر ( ) invert

این فیلتر رنگ را برعکس می کند به طور مثال رنگ سفید ، مشکی و رنگ مشکی ، سفید و مثلا رنگ نارنجی آبی می شود . مقداری بین 0% تا 100% یا 0 تا 1 را قبول می کند که 100% به معنی کاملا برعکس و 0 به معنی بدون تغییر می باشد . اگر مقدار معتبری وارد نشود به طور پیش فرض مقدار 100% را اعمال می کند .این فیلتر هم مقدار منفی را نمی پذیرد .

#img-5{
      filter: invert(80%);
}

• فیلتر ( ) opacity

میزان شفافیت یک تصویر را با این فیلتر می توانیم تنظیم کنیم . مانند قبل مقداری بین 0% تا 100% یا 0 تا 1 را قبول می کند که 0 به معنی کاملا شفاف و 100% به معنی بدون تغییر می باشد . اگر مقدار معتبری وارد نشود به طور پیش فرض مقدار 100% را اعمال می کند . این فیلتر هم مقدار منفی را نمی پذیرد . عنصری که دارای opacity است اگر تصویر یا عنصر دیگری زیر آن قرار داشته باشد قابل مشاهده خواهد بود و مانند یک پوشش روی آن عمل می کند .

#img-6{
      filter: opacity(.5);
}

• فیلتر ( ) brightness

میزان روشنایی یک تصویر یا یک عنصر را با این فیلتر می توانیم تنظیم کنیم . مقدار 0 یعنی تصویر تیره است . مقدار 100 یعنی روشنایی تصویر عادی است و تصویر تغییر نمی کند و مقادیر بالاتر از آن باعث روشن تر شدن تصویر می شود . اگر مقدار نامعتبری وارد شود به طور پیش فرض مقدار 100% اعمال می شود.

#img-7{
      filter: brightness(400%);
}

• فیلتر ( ) contrast

میزان وضوح تصویر یا تضاد رنگ را می توان با این فیلتر تنظیم کرد . مقدار 0 یعنی تصویر تیره است مقدار 100 یعنی تضاد رنگ عادی است و تصویر تغییری نمی کند و بالاتر از آن باعث می شود تصویر وضوح کمتری داشته باشد . اگر مقدار نامعتبری وارد شود به طور پیش فرض مقدار 100% اعمال می شود .

#img-8{
      filter: contrast(5);
}

• فیلتر ( ) blur

به کمک این فیلتر می توان تاری یا محو شدگی یک تصویر را با الگوریتم Gaussian blur تنظیم کرد . ورودی این فیلتر مقدار عددی به پیکسل است که مشخص می کند روی تصویر چند پیکسل مجاور باید با هم مخلوط شوند. بنابراین مقادیر بالاتر باعث تاری یا محو شدگی بیشتر تصویر می شود . این فیلتر مقادیر درصدی قبول نمی کند و اگر مقدار نا معتبری وارد شود به طور پیش فرض 0 در نظر می گیرد .

#img-9{
      filter: blur(5px);
}

• فیلتر ( ) drop –shadow

فیلتر جذابی که باعث سایه دار شدن عنصر یا تصویر مورد نظر می شود .این فیلتر 4 پارامتر را به عنوان ورودی دریافت می کند :

مقدار horizontal offset که مقادیر مثبت یعنی حرکت سایه به سمت راست.

مقدار vertical offset که مقادیر مثبت یعنی حرکت سایه به سمت پایین.

مقدار blur radius که میزان تاری یا محو شدگی سایه را تغییر می کند.

مقدار Color رنگ سایه را تغییر می کند .

#img-10{
      filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.9));
}

- مرورگرها

فیلترها تا تاریخ نگارش این مقاله توسط این مرورگرها پشتیبانی می شوند که در لیست زیر مشاهده می کنید .

دستور filter دستور استاندارد CSS3 است . در صورتی که بخواهیم توسط مرورگرهای chrome 8 , opera 15 , safari 6 به بالا پشتیبانی شوند از پیشوند webkit- قبل از filter استفاده می کنیم :

#img-8{
      filter: contrast(5);-webkit-filter: contrast(5);
}

- ترکیب فیلترها

امکان ترکیب دو یا چند فیلتر همزمان هم روی یک تصویر یا عنصر وجود دارد . فقط کافی است آنها را دنبال هم بنویسیم . در این مثال دو فیلتر blur و grayscale ترکیب شده اند.

#img-11{filter: blur(5px) grayscale(1);}

امیدوارم از این مقاله آموزشی استفاده کرده باشید . ممنون