در بخش اول آموزش فیلترها در CSS3 با مفاهیم پایه و همچنین برخی از فیلترها را یاد گرفتیم. در ادامه آموزش قبلی, بقیه فیلترهای باقی مانده را بررسی می کنیم.
افکت فیلترها در CSS3 یک راه آسان را برای اعمال اثر بصری روی تصاویر را ارایه می دهد. فیلترها در CSS3 یک روش پردازش رندر کردن عنصر قبل از اینکه در صفحه نمایش داده شود می باشند.
بیشتر فیلترهایی که در این مقاله آموزش معرفی می شود در نرم افزارهای معروفی مثل Instagram نیز وجود دارند.
ایجاد چرخش رنگ تصویر
تابع hue-rotate() مقدار چرخش رنگ را روی تصویر ایجاد می کند.
اگر با ساختار رنگ ها آشنا باشید می دانید که تمام رنگ ها در یک دایره ۳۶۰ درجه جای دارند.
این تابع با توجه به زاویه ای که ما به آن می دهیم تمام رنگ های موجود در تصویر یا عنصر مورد نظر را به همان مقدار در دایره رنگی تغییر می دهد.
پارامتر پاس داده شده مشخص کننده عدد درجه اطراف دایره رنگ است.
مقدار ۰deg تصویر را بدون تغییر رها می کند. اگر پارامتر ‘angle’ ست نشود, مقدار ۰deg استفاده می شود.
مقدار حداکثری وجود ندارد ولی مقدار بالای ۳۶۰deg به ابتدای حلقه بر می گردد.
|
1 2 3 4 5 6 7 8 |
img.hue-normal { -webkit-filter: hue-rotate(150deg); /* Chrome, Safari, Opera */ filter: hue-rotate(150deg); } img.hue-wrap { -webkit-filter: hue-rotate(480deg); /* Chrome, Safari, Opera */ filter: hue-rotate(480deg); } |
افکت invert
افکت invert که در فتوشاپ هم موجود است می تواند در CSS با تابع invert() روی تصویر اعمال شود.
این تابع امکان معکوس کردن رنگ ها را به ما می دهد و یک مقدار بین ۰ تا ۱۰۰% می گیرد و هر چه به سمت ۱۰۰% حرکت کنیم تصویر از لحاظ رنگی معکوس تر به نظر می رسد.
مقدار ۱۰۰% نمایانگر نهایت وارونگی رنگ ها می باشد و عدد ۰ تصویر یا عنصر را بدون تغییر نشان می دهد و اگر هیچ مقداری به این تابع ندهیم مقدار پیشفرض یعنی ۱۰۰% را به خود می گیرد.
اعداد بیشتر از ۱۰۰% هم به ۱۰۰% تبدیل می شوند. همچنین این تابع عدد بین صفر تا یک هم به جای درصد قبول می کند. مقادیر منفی نیز قابل قبول نیستند.
|
1 2 3 4 5 6 7 8 |
img.partially-inverted { -webkit-filter: invert(80%); /* Chrome, Safari, Opera */ filter: invert(80%); } img.fully-inverted { -webkit-filter: invert(100%); /* Chrome, Safari, Opera */ filter: invert(100%); } |
اعمال شفافیت تصاویر (opacity)
تابع opacity() می تواند برای ایجاد شفافیت روی تصویر استفاده شود.
مقدار ۰٪ می تواند کاملا شفاف شود. مقدار ۱۰۰٪ یا ۱ نیز تصویر را بدون تغییر می گذارد.
مقادیر ۰٪ تا ۱۰۰٪ ضرایب خطی بر روی این افکت هستند. اگر پارامتر ‘amount’ ست نشود مقدار ۱ پیش فرض خواهد بود.
این تابع مشابه ویژگی opacity در css است.
|
1 2 3 4 |
img { -webkit-filter: opacity(80%); /* Chrome, Safari, Opera */ filter: opacity(80%); } |
ایحاد افکت قهوه ای (sepia) روی تصویر
تابع sepia() به تصویر یا عنصر یک ته رنگ قهوه ای تیره شبیه عکسبرداری های قدیمی می دهد.
مقدار ۱۰۰٪ یا ۱ می تواند کاملا ته رنگ قهوه ای تیره شود. مقدار ۰٪ نیز تصویر را بدون تغییر می گذارد.
مقادیر ۰٪ تا ۱۰۰٪ ضرایب خطی بر روی این افکت هستند. اگر پارامتر ‘amount’ ست نشود مقدار ۰ پیش فرض خواهد بود.
|
1 2 3 4 5 6 7 8 |
img.complete-sepia { -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */ filter: sepia(100%); } img.partial-sepia { -webkit-filter: sepia(30%); /* Chrome, Safari, Opera */ filter: sepia(30%); } |
تنظیم Saturation تصویر
از تابع saturate() زمانی استفاده می شود که بخواهیم به تصویر مورد نظر از نظر رنگی جان ببخشیم, این تابع تصویر را زنده تر و خوش رنگ تر می کند.
این تابع هم عددهایی بین ۰ تا ۱۰۰% یا ۰ تا ۱ را می پذیرد. اعداد بیشتر از ۱۰۰% هم اشباع بیشتری را در رنگ ها اعمال می کنند
|
1 2 3 4 5 6 7 8 |
img.un-saturated { -webkit-filter: saturate(0%); /* Chrome, Safari, Opera */ filter: saturate(0%); } img.super-saturated { -webkit-filter: saturate(200%); /* Chrome, Safari, Opera */ filter: saturate(200%); } |
تابع url()
این تابع این امکان را می دهد که یک فیلتر خاص که خودتان با استفاده از SVG ساخته اید بر روی عنصر یا تصویر مورد نظر اعمال کنید. فقط کافی است آدرس آن فیلتر را به این تابع بدهید.
به عنوان مثال فرض کنید افکتی با SVG به صورت زیر برای مات کردن ساخته ایم
|
1 2 3 4 5 |
<svg height="0" xmlns="http://www.w3.org/2000/svg"> <filter id="myFilter" x="-5%" y="-5%" width="110%" height="110%"> <feGaussianBlur in="SourceGraphic" stdDeviation="8"/> </filter> </svg> |
حال فقط کافی است id این افکت را به صورت زیر به این تابع بدهیم در نتیجه افکت مورد نظر بر روی عنصر یا تصویر اعمال می شود.
|
1 2 3 4 |
div { filter: url(#myFilter); -webkit-filter: url(myFilters.xml#effect); } |
خط دوم نحوه آدرس دهی از یک فایل خارجی را نشان می دهد.
فیلترهای چندگانه
شما به روش زیر می توانید چندین فیلتر را بر روی یک عنصر یا تصویر اعمال کنید. فقط این نکته را در نظر داشته باشید که ترتیب نوشتن فیلترها اهمیت دارد.
|
1 2 3 |
div { filter: sepia(1) brightness(150%) contrast(0.5); } |
امیدوارم از بخش آخر آموزش فیلترها در CSS3 نهایت استفاده را برده باشید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
عالی