افکت فیلترها در CSS3 یک راه آسان را برای اعمال اثر بصری روی تصاویر را ارایه می دهد. فیلترها در CSS3 یک روش پردازش رندر کردن عنصر قبل از اینکه در صفحه نمایش داده شود می باشند.
بیشتر فیلترهایی که در این مقاله آموزش معرفی می شود در نرم افزارهای معروفی مثل Instagram نیز وجود دارند.
درک توابع فیلترها در CSS3
در این بخش از آموزش CSS در مورد افکت filter در CSS3 که می توانید برای ایجاد افکت هایی مانند تار (blur), کنتراست (contrast), روشنایی (brightness), اشباع رنگ (color saturation) و غیره.. روی عناصر گرافیکی مانند تصاویر استفاده کنید.
این افکت های filter می توانند با خصوصیت filter در CSS3 اعمال شوند, و می تواند یک یا چند تابع فیلتر را دریافت کند.
|
1 |
filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate() | url(); |
نکته: در حال حاضر افکت های فیلتر در هیچ یک از نسخه های IE پشتیبانی نمی شوند. نسخه های قبل تذ IE یک ویژگی filter غیر استاندارد را برای ساخت افکت هایی مانند opacity را پشتیبانی می کرد که این قابلیت هم منسوخ شده.
افکت Blur (تار)
همانند افکت Gaussian Blur در فتوشاپ, را می توانید با تابع blur() ایجاد کنید.
این تابع یک مقدار طولی CSS را به عنوان پارامتر که شعاع blur را تعیین می کند, می پذیرد.
یک مقدار بزرگتر تاری بیشتری ایجاد می کند. اگر هیچ مقداری قرار نگیرد, پس مقدار قابل استفاده ۰ خواهد بود.
|
1 2 3 4 |
img { -webkit-filter: blur(5px); /* Chrome, Safari, Opera */ filter: blur(5px); } |
تعیین روشنایی تصویر
تابع brightness() می تواند برای ست کردن روشنایی یک تصویر مورد استفاده قرار بگیرد.
یک مقدار ۰% می تواند کل تصویر را سیاه کند. درحالی که مقدار ۱۰۰٪ یا ۱ تصویر را بدون تغییر می گذارد. مقادیر دیگر ضرایب خطی روی افکت هستند.
شما همچنین می توانید یک روشنایی بیشتر از ۱۰۰٪ را نیز ست کنید. اگر مقدار این پارامتر خالی باشد, پیش فرض ۱ خواهد بود. مقادیر منفی نیز قابل استفاده نیستند.
|
1 2 3 4 5 6 7 8 |
img.bright { -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */ filter: brightness(200%); } img.dark { -webkit-filter: brightness(50%); /* Chrome, Safari, Opera */ filter: brightness(50%); } |
نکته: توابع filter که یک مقدار تعریف شده با علامت درصد (مثلا ۷۵٪) یا همچنین مقادیر اعشاری (مثل ۰٫۷۵) را می گیرند اگر نامعتبر باشند, تابع مقدار none را برگشت می دهد و هیچ افکتی اعمال نخواهد شد.
تنظیم کنتراست تصویر
تابع contrast() برای تنظیم کنتراست روی یک تصویر استفاده می شود.
یک مقدار ۰% می تواند کل تصویر را سیاه کند. درحالی که مقدار ۱۰۰٪ یا ۱ تصویر را بدون تغییر می گذارد.
مقادیر بالای ۱۰۰٪ نیز می توانند نتیجه ای با کنتراست کمتر ایجاد کنند. اگر مقدار پارامتر تابع خالی باشد, پیش فرض ۱ خواهد بود.
|
1 2 3 4 5 6 7 8 |
img.bright { -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */ filter: contrast(200%); } img.dim { -webkit-filter: contrast(50%); /* Chrome, Safari, Opera */ filter: contrast(50%); } |
افزودن سایه به تصویر
با تابع drop-shadow() می تواند افکت سایه را روی تصویر همانند فتوشاپ ایجاد کنید. این تابع مشابه ویژگی box-shadow است.
|
1 2 3 4 |
img { -webkit-filter: drop-shadow(4px 4px 10px orange); /* Chrome, Safari, Opera */ filter: drop-shadow(4px 4px 10px orange); } |
نکته: پارامتر اول و دوم تابع drop-shadow() به ترتیب محور افقی و عمودی سایه را مشخص می کند, پارامتر سوم نیز مقدار شعاع تاری و پارامتر آخر هم رنگ را مشخص می کند.
همه این موارد مانند box-shadow هستند با یک استثنا که کلمه کلیدی inset اینجا قابل استفاده نیست
سیاه و سفید کردن تصویر
عکس می تواند با تابع grayscale() به صورت سیاه و سفید درآید.
مقدار ۱۰۰٪ کاملا سیاه و سفید و مقدار ۰ نیز تصویر را بدون تغییر رها می کند.مقدار بین ۰٪ و ۱۰۰٪ ضرایت خطی روی افکت هستند.
اگر مقدار پارامتر تابع خالی باشد, پیش فرض ۰ خواهد بود.
|
1 2 3 4 5 6 7 8 |
img.complete-gray { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); } img.partial-gray { -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */ filter: grayscale(50%); } |
امیدوارم از بخش اول فیلترها در CSS3 نهایت استفاده را برده باشید.
در بخش بعدی مبحث فیلتر ها را تکمیل خواهیم کرد.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
سلام خسته نباشی حسن آقا
من بازنشسته و ۶۷ ساله هستم و علاقمند به برنامه نویسی و مطالب علمی و نرم افزار و سخت افزار کامپیوتر. اگر کاری از دست من بر می آید (رایگان) در خدمت شما هستم. زبان انگلیسی من هم بد نیست برای ترجمه و به فتوشاپ هم تسلط دارم. ممنون از سایت مفیدت و در خدمتم بدون هیچ چشم داشتی.
سلام. ممنون.
اطلاعات تکمیلی خدمت شما ایمیل شد.