استفاده از Filter ها در CSS

همیشــه ایجــاد افکــت هــای درســت و بجــا در وب موجــب زیبایــی و جذابیــت بیشــتر سایت میشــه. در ایــن مقالــه ی آموزشــی قصــد دارم چنــد افکــت زیبــا بــرای تصاویر در CSS رو بهتــون آمــوزش بــدم . مبحثــی به نام Filter در CSS وجــود داره کــه تــو ایــن زمینــه میتونــه بــه مــا کمــک کنــه .

Filter ها در CSS

امــروزه بــرای کاهــش حجــم جــی کوئــری هــا در سایت ، از css3 بســیار اســتفاده میشــه . در گذشــته بــرای ایجــاد بســیاری از افکــت هــا از کدهــای جــی کوئــری اســتفاده میشــد ، امــا بــا روی کار آمــدن CSS3 کدهــای جــی کوئــری کــم کــم کمرنــگ شــد و تــا جایــی کــه امــکان داره از CSS3 اســتفاده میشــه چــرا کــه لــود CSS بســیار سریعــتر از لــود جــی کوئــری انجام میشــه و در نهایــت سرعــت بارگــزاری سایت رو بــالا میــره و سایت در کمتریــن زمــان ممکــن لــود میشــه .

در CSS3 مــا ۱۰ نــوع فیلتر داریــم کــه هــر کــدوم یــک افکــت رو روی تصاویر پیــاده مــی کنــه . نکتــه ی مهمــی کــه در ایــن فیلتر هــا وجــود داره اینه کــه تمامــی مرورگرها ایــن فیلترهارو پشــتیبانی نمیکننــد و شــا میتونیــد برخــی از ایــن فیلترهــارو بصــورت svg اســتفاده کنید تــا مرورگرهای اصلــی مثل فایرفاکــس از آنها پشــتیبانی کنند .

۱۰ نوع فیلتری که در CSS وجود داره به شرح زیر هست :

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

در ایــن مقالــه ی آموزشــی بــا توجــه بــه پشــتیبانی مرورگرهــا بــه آمــوزش ۴ فیلتر میپردازیــم . اول از همــه ()url رو بهتــون توضیــح میــدم چــون یکــی از فیلترهــای مهــم هســت و بــرای هــک فایرفاکــس بایــد از ایــن فیلتر اســتفاده کنیــم .

فیلتر ()URL

از ایــن فیلتربــرای فراخوانــی یــک لینــک اســتفاده مــی کنیــم . منظــور از لینــک فایــل SVG مــورد نظرمــون هســت کــه فیلتردلخــواه رو تــوش تعریــف کردیــم و میخوایــم روی تصویرمــون اعــال کنیــم تــا فایرفاکــس هــم ایــن افکــت رو بخونــه ، در واقــع بــرای فهمونــدن فیلتربــه فایرفاکــس از url اســتفاده مــی کنیــم . بــه کدهــای زیــر دقــت کنیــد تــا نحــوه ی اســتفاده از ایــن فیلتررو بیاموزیــد :

به عنوان مثال ما یک فایل svg به نام filters.svg داریم که فیلترزیر رو توش تعریف کردیم :

<svg xmlns=”http://www.w3.org/2000/svg”>
<filter id=”blur”>
<feGaussianBlur stdDeviation=”۲”/>
</filter>
</svg>

ایــن فیلتر افکــت Blur رو روی تصویــر اعــال مــی کنــه id=”blur” در فایــل Svg به عنوان یک شناسه مــورد نظر مــارو مشــخص میکنه . چــون ممکنــه ما چندیــن فیلتر رو بصــورت همزمان در فایل svg تعریــف کنیــم . بــرای شناســایی هــر فیلتر بایــد یــک id به هر کدوم اختصاص بدیم. حالا برای اینکــه بتونیــم ایــن فیلتر رو درون Css اســتفاده کنیــم . بــه شــکل زیــر عمــل مــی کنیــم :

img {filter: url(‘filters.svg#blur’)}

درون url آدرس فایــل svg رو مینویســیم ســپس شناســه ی فیلتر رو بصــورت IdName# فراخوانــی مــی کنیــم . در مثــال بــالا id برابــر بــود بــا blur در کــد css هــم در انتهــای آدرس فایــل با IdName# فیلتر مــورد نظــر رو شناســایی میکنیم .

فیلتر ()Blur

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

قاعده دستوری ()Blur

filter: blur(2px)

Blur قابل پشتیبانی در مرورگرهای webkit

-webkit-filter: blur(2px)

Blur قابل پشتیبانی در فایرفاکس ورژن های جدید

ذخیره کد زیر در فایل filters.svg

<svg xmlns="https://www.w3.org/2000/svg">
<filter id="blur">
<fegaussianBlur stddeviation="2"/>
</filter>
</svg>

فراخوانی در CSS :

filter: url(‘filters.svg#blur’)

Blur قابل پشتیبانی در فایرفاکس های قدیمی

-moz-filter: blur(2px)

Blur قابل پشتیبانی در IE9+

filter:progid:DXImageTransform.Microsoft.Blur(strength=1) , progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=0)

دستور کلی :

img{-webkit-filter: drop-shadow(5px 5px 2px black); -moz-filter: drop-shadow(5px 5px 2px black);
-ms-filter: drop-shadow(5px 5px 2px black);
filter: url(‘filters.svg#shadow’);filter:progid:DXImageTransform.Microsoft.Shadow(color=’black’, Direction=135, Strength=6)}

فیلتر ()Drop-shadow

از این فیلتربرای ایجاد سایه در تصویر استفاده میشه :

قاعده دستوری ()Drop-shadow :

filter: drop-shadow(16px 16px 10px black)

Drop-shadow قابل پشتیبانی در مرورگرهای webkit

-webkit-filter: drop-shadow(5px 5px 2px black)

Drop-shadow قابل پشتیبانی در فایرفاکس ورژن های جدید

ذخیره کد زیر در فایل filters.svg

<svg xmlns=”http://www.w3.org/2000/svg”>
<filter id=”shadow”>
<feGaussianBlur in=”SourceAlpha” stdDeviation=”۲”/>
<feOffset dx=”۵” dy=”۵” result=”offsetblur”/>
<feFlood flood-color=”#۰۰۰۰۰۰”/>
<feComposite in2=”offsetblur” operator=”in”/>
<feMerge>
<feMergeNode/>
<feMergeNode in=”SourceGraphic”/>
</feMerge>
</filter>
</svg>

فراخوانی در CSS :

filter: url(‘filters.svg#shadow’)

Drop-shadow قابل پشتیبانی در فایرفاکس های قدیمی

-moz-filter: drop-shadow(5px 5px 2px black)

Drop-shadow قابل پشتیبانی در IE9+

filter:progid:DXImageTransform.Microsoft.Shadow(color=’black’, Direction=135, Strength=6)

دستور کلی :

img{-webkit-filter: drop-shadow(5px 5px 2px black); -moz-filter: drop-shadow(5px 5px 2px black);-ms-filter: drop-shadow(5px 5px 2px black);filter: url(‘filters.svg#shadow’);filter:progid:DXImageTransform.Microsoft.Shadow(color=’black’, Direction=135, Strength=6)}

فیلتر () Opacity

از این فیلتر برای تعیین میزان شفافیت تصویر استفاده میشه .

دستور کلی :

img{opacity : 0.5; -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; filter: alpha(opacity=50);}

بــه دلیــل اینکــه فیلترهــای دیگــه توســط مرورگرهــای اصلــی بــه خوبــی پشــتیبانی نمیشــه ، از آمــوزش آن هــا میپرهیزیــم بــا ایــن تفاســیر دوســتان عزیــز آمــوزش مــا در رابطه با Filter ها در CSS بــه اتمــام میرســه . امیــدوارم کــه آمــوزش مفیــدی براتــون بــوده باشــه .