معرفی پنج افکت فیلتر پر کاربرد سی اس اس

معرفی پنج افکت فیلتر پر کاربرد سی اس اس

1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره
1,176 بار
۰ نظر.
پوریا زارعی
23 مرداد 1395

افکت فیتلر

افکت فیلتر های رنگی در ابتدا برای svg معرفی و توسعه داده شدن و هر روز هم شاهد بیشتر شدن تنوع و تعداد این فیلتر ها هستیم ، به هر حال با اینکه در svg شما دست باز تری دارید اما استفاده از اون کمی پیچیده هست و هر جایی هم توصیه نمیشه . به همین دلیل W3C به زودی چندین افکت پر کاربرد رو به CSS اضافه کرد .

افکت فیلتر های سی اس اس بسیار پرکاربرد هستند و استفاده از اونها خیلی ساده و آسونه . شما می تونید با استفاده از اونها مقدار روشنایی ، اشباع رنگ و کنتراست تصاویرتون رو تغییر بدید و حتی تصاویری بلور شده بسازید ، حتی اگه کمی خلاق باشید می تونید از ترکیب همین چند افکت ساده فیلتر افکت های متنوع و ترکیبی جدیدی رو ایجاد کنید .

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

filter: <filter-function> [<filter-function>]* | none

 

 

Brightness :

این فیلتر کنترل میزان روشنایی تصویر رو به عهده داره ، شما می تونید اون رو با مقادیر بیشتر از صفر مقدار دهی کنید ، خود مقدار صفر به شما تصویری کاملا تاریک و یکدست سیاه ارائه می ده و مقدار ۱۰۰% هم تصویر اصلی یا اورجینال رو به نمایش در میاره و شما می تونید با اعداد بزرگتر تصویر روشنتری رو ایجاد کنید ، مثلا مقدار ۳۰۰% تصویری با سه برابر روشنایی تصویر اولیه رو ایجاد می کنه .

کد استفاده از این فیلتر هم برای سی اس اس ۳ به این شکل هست :

img {

filter: brightness(300%);

}

برای درک بهتر مفهوم این فیلتر برای شما مثالی رو توی آیفریم پایین ارائه کردیم .

See the Pen CSS Filter Example — Brightness by SitePoint (@SitePoint) on CodePen.

 

 

Contrast :

این فیلتر هم که مشخصا اختلاف و تضاد رنگی بین روشن ترین نقاط تصویر و تاریک ترین نقاط تصویر رو واضح می کنه ، درست مثل فیلتر روشنایی این فیلتر هم مقادیر بزرگتر از ۰ رو اختیار می کنه و مقدار ۰ یک تصویر خاکستری رنگ و مقدار ۱۰۰% تصویر اولیه رو به به عنوان خروجی به کاربر نمایش می ده .

استفاده درست از این تصویر می تونه تصاویر با کیفیت متوسط رو به تصاویر جذاب و با کیفیتی تبدیل کنه و البته استفاده نادرستش می تونه شرایط عکس رو به وجود بیاره ، به هر حال اونچه که مسلمه دیگه برای استفاده تصاویر توی وب سایتتون نیاز به نرم افزار های ویرایشگر تصویر ندارید .

کد استفاده از این فیلتر هم برای سی اس اس ۳ به این شکل هست :

img {
filter: contrast(0%);
}

برای درک بهتر مفهوم این فیلتر برای شما مثالی رو توی آیفریم پایین ارائه کردیم .

See the Pen CSS Filter Example — Saturate by SitePoint (@SitePoint) on CodePen.

 

Grayscale :

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

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

مقدار ۰ هیچ تاثیری بر خروجی نداره و مقدار ۱۰۰% یک تصویر کاملا سیاه و سفید به شما ارئه می ده ، مقادیر بین ۰ و ۱۰۰ رو هم می تونید اعمال کنید .

کد استفاده از این فیلتر هم برای سی اس اس ۳ به این شکل هست :

img {
filter: grayscale(100%);
}

برای درک بهتر مفهوم این فیلتر برای شما مثالی رو توی آیفریم پایین ارائه کردیم .

See the Pen CSS Filter Example — Grayscale by SitePoint (@SitePoint) on CodePen.

Saturate :

این فیلتر هم مقدار اشباع رنگ های موجود در تصویر یا المنت شما رو معین می کنه ، شما می تونید با استفاده از این فیلتر تصاویر سردتر یا گرم تری رو ایجاد کنید .

مقادیر مثبت یا به عبارتی بزرگتر از ۰ هم برای اون قابل استفاده هستن ، خود مقدار ۰ تصویری بی رنگ (به عبارت دیگه سفید) رو به شما تحویل می ده و مقدار ۱۰۰ تصویر ورودی رو به عنوان خروجی نمایش می ده ، می تونید از مقادیر بزگتر از ۱۰۰ تا هر مقدار دلخواهی استفاده کنید اما شاید در عمل برای هر تصویر خاص محدودیتی متفاوت وجود داشته باشه .

کد استفاده از این فیلتر هم برای سی اس اس ۳ به این شکل هست :

img {
filter: saturate(0%);
}

برای درک بهتر مفهوم این فیلتر برای شما مثالی رو توی آیفریم پایین ارائه کردیم .

See the Pen CSS Filter Example — Saturate by SitePoint (@SitePoint) on CodePen.

Blur :

این فیلتر کمی برای همه ما نام آشنا تره ، اقلا نام آشنا تری داره ، با استفاده از این فیلتر شما می تونید رنگ های موجود در تصویر رو با هم تداخل بدید و اونا رو از فاز بسته ای که درش قرار گرفتن آزاد تر کنید ، مقدار دهی به این فیتلر کمی متفاوت تر و بر حسب پیکسل هست ، توجه کنید که عددی که به هر تصویر باید داده بشه تا مقدار خاصی بلور روش اعمال شه متفاوت هست ، مثلا ممکنه مقدار ۱px برای تصویری بلور مناسبی باشه ولی روی تصویر بزرگتر هیچ تغییر قابل مشاهده ای ایجاد نکنه .

کد استفاده از این فیلتر هم برای سی اس اس ۳ به این شکل هست :

img {
filter: blur(1px);
}

برای درک بهتر مفهوم این فیلتر برای شما مثالی رو توی آیفریم پایین ارائه کردیم .

See the Pen CSS Filter Example — Blur by SitePoint (@SitePoint) on CodePen.

جمع بندی :

۵ افکت و فیلتری که معرفی کردیم مشخصا از مشهور ترین و پرکاربرد ترین ها برای استفاده های متوسط و حتی حرفه ای هستن اما خب مشخصا کل افکت های مورد نظر رو به شما ارائه نمی دن ، البته همون طور که گفتیم ممکنه خلاقیت شما در استفاده از چند افکت به صورت همزمان افکت های خاص و یکتایی رو ایجاد کنه که البته برای ایجاد کردن چنین افکت هایی به یه مقدار تجربه نیاز خواهید داشت .

نکته مهم که باید اشاره کنیم بهش اینه که استفاده از این افکت ها محدود به تصاویر نمیشه و شما می تونید با استفاده از اونها هر المنت دیگه ای رو دستخوش تغییر کنید ، البته توجه کنید که این تغییرات فقط به خود المنت اثر گذار نیستن و بوردر ها و سایه های مربوط به اون المنت هم با اعمال افکت دچار تغییر میشن .

امیدواریم با استفاده از این مطالب بتونید خیلی راحت تغییرات مد نظرتون رو به تصویر هاتون اعمال کنید .

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

دیدگاه کاربران

هنوز هیچ دیدگاهی وجود ندارد

محصولات مرتبط

بهینه سازی کد های css یکی از حیاتی ترین کار های است که برای یک قالب در نظر گرفت این کار باعث افزایش سرعت سایت و کم شدن حجم قالب می شود و در نتیجه می توانند در منابع سرور نیز صرفه جویی بکند. وب سایت های زیادی هستند که به صورت رایگان کد های

ادامه مطلب
407 بار
3 بهمن 1397

یکی دیگر از افزونه های کاربردی وردپرس افزونه Easy Updates Manager شما با این افزونه به راحتی می توانید بر تمامی بروزرسانی های وردپرس از قبیل بروزرسانی هسته ،قالب و افزونه نظارت داشته باشید. شما قادر در این افزونه قادر هستید تا تمامی بروزرسانی ها را غیر فعال کنید و از بروز رسانی خودکار آنها

ادامه مطلب
393 بار
25 دی 1397

قبلا مقاله ای در فامو منتشر کردیم که به راحتی بتوانید نام کاربری وردپرس خود را عوض کنید (با استفاده از افزونه Username Changer). خوب بریم سراغ آموزش تغییر نام کاربری در وردپرس برای این کار کافیست وارد هاست خود شوید و در قسمت دیتابیس ها گزینه phpmyadmin را انتخاب کنید تا وارد محیط پایگاه

ادامه مطلب
400 بار
14 آذر 1397