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

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

می پسندم
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره
3,165 بار
0 نظر
پوریا زارعی
۲۳ مرداد ۱۳۹۵

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

افکت فیلتر های رنگی در ابتدا برای 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.

جمع بندی :

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

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

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

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

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

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

مقالات مرتبط

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