جلسه ی شانزدهم: فیلتر های CSS

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

فیلتر چیست؟

فیلترها در زبان CSS کار های جالبی انجام می دهند و باعث جذاب تر شدن عکس ها در نوشته های ما می شوند. به وسیله ی این ویژگی شما می توانید افکت هایی که در فتوشاپ بر روی تصاویر اعمال می کنید در طراحی سایت نیر بر روی تصاویر خود اعمال کنید و به زیباتر شدن طراحی خود کمک نمایید.

انواع فیلتر ها

در اینجا ما تعدادی از فیلتر ها که توسط کاربران مورد استفاده قرار می گیرد را توضیح می دهیم که عبارتند از:

  1. blur
  2. brightness
  3. opacity
  4. saturate
  5. grayscale
  6. sepia
  7. contrast
  8. hue-rotate
  9. invert
  10. drop-shadow

filter blur

از فیلتر blur برای تار نمودن تصویر استفاده می شود. مقادیری که می توان به این ویژگی نسبت داد مثبت بوده و هر چقدر این مقدار بیشتر باشد تصویر مورد نظر ما نیز کدر یا مات تر خواهد بود. مقادیری که می توانیم به این filter بدهیم باید بر حسب px یا em و یا rem باشد اما این تابع درصد را قبول نمی کند یعنی شما نمی توانید خروجی مورد نظر خود را بر طبق درصد اعمال نمایید. به نمونه کد زیر توجه کنید:

img {
filter: blur(3px);
}

خروجی کد بالا:
فیلتر blur

فیلتر brightness

از فیلتر brightness برای روشنایی تصویر یا عنصر مورد نظر خود استفاده می کنیم از طریق این عنصر می توانیم عنصر خود را تاریک تر یا روشن تر نماییم. مقادیری که این ویژگی میگیرد بر حسب درصد می باشد.
درصورتی که آن را بر روی صفر درصد قرار دهیم تصویر کاملا تاریک شده و در صورتی که آن را به روی صد درصد قرار دهیم خود تصویر را به ما نشان می دهد و در صورتی بیشتر از ۱۰۰ درصد باشد تصویر را روشن تر می نماید. به نمونه کد زیر توجه کنید:

img {
filter: brightness(60%);
}

خروجی کد بالا:
فیلتر brightness

فیلتر opacity

از فیلتر opacity برای شفاف تر نمودن عنصر یا تصویر مورد نظر خود استفاده می کنیم مقداری که این ویژگی قبول می کند یک درصد بین صفر تا صد یا یک عدد بین صفر تا یک می باشد اگر این مقدار را صفر بگذاریم عنصر ما به طور کامل ناپدید می شود و در صورتی که ۱۰۰درصد یا ۱ بگذاریم خود تصویر نمایش داده می شود.
معمولا زمانی که میخواهیم عکس یا عنصری را بر روی نوشته قرار دهیم از این عنصر استفاده می کنیم و مقدار آن را بر روی ۵۰درصد می گذاریم تا تصویر یک حالت شیشه ای داشه باشد. به نمونه کد زیر توجه کنید:

img {
filter: opacity(50%);
}

خروجی کد بالا:
فیلتر opacity

فیلتر saturate

از فیلتر saturate برای جان بخشیدن به تصاویر استفاده می شود بر عکس ویژگی های دیگر این ویژگی محدودیتی ندارد و مقادیر را به درصد قبول می کند و اگر آن را به روی ۱۰۰% قرار دهیم عکس هیچ تغییری نمی کند.
عموما کار این ویژگی اشباع رنگ می باشد که هر چه بیشتر شود اشباع رنگ و جان بخشی بیشتر خواهد شد این درصد میتواند حتی ۲۰۰۰% باشد و محدودیتی ندارد. به نمونه کد زیر توجه کنید:

img {
filter: saturate(50%);
}

خروجی کد بالا:
فیلتر saturate

فیلتر grayscale

از فیلتر grayscale برای بی رنگ نمودن تصاویر استفاده می شود مقداری که این ویژگی می گیرد بین ۰ تا ۱۰۰ درصد یا ۰ تا ۱ می باشد که اگر آن را صفر قرار دهیم تصویر ما هیچ تغییری نمی کند و اگر آن را بر روی ۱۰۰ درصد قرار دهیم تصویر به طور کامل بی رنگ شده و به رنگ خاکستری تبدیل می شود. عموما این تابع رنگ ها را به رنگ خاکستری متناسب با آن ها تبدیل می کند، به نمونه کد زیر توجه کنید:

img {
filter: grayscale(50%);
}

خروجی کد بالا:
فیلتر grayscale

فیلتر sepia

فیلتر sepia مانند filter grayscale عمل می کند اما با این فرق که این ویژگی رنگ ها را به سمت یک قهوه ای کمرنگ تبدیل می کند و تصویر مورد نظر ما را به یک تصویر قدیمی تبدیل می کند.
مقادیری که این ویژگی قبول می کند از ۰ تا ۱۰۰ درصد یا از ۰ تا ۱ می باشد. صفر همان تصویر خودمان می باشد و صد درصد تصویر ما را کاملا به یک تصویر قدیمی تبدیل می کند. به نمونه کد زیر توجه کنید:

img {
filter: sepia(50%);
}

خروجی کد بالا:
فیلتر sepia

فیلتر contrast

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

img {
filter: contrast(150%);
}

خروجی کد بالا:
فیلتر contrast

فیلتر hue-rotate

فیلتر hue-rotate یکی جالب ترین و زیبا ترین filter های CSS می باشد. این filter بر اساس دایره ی رنگ ها می باشد این دایره از ۰ تا ۳۶۰ درجه می باشد و واحد آن deg می باشد و هر عددی را که ما به آن بدهیم رنگ های موجود در تصویر ما را به آن درجه از رنگ ها تبدیل می کند. به نمونه کد زیر توجه کنید:

img {
filter: hue-rotate(90deg);
}

خروجی کد بالا:
فیلتر hue-rotate

فیلتر invert

از فیلتر invert برای تبدیل رنگ ها استفاده می شود به این گونه که تمامی رنگ ها را به سفید یا سیاه تبدیل می کند و یک تضاد جالب ایجاد می نماید. مقادیر دریافتی توسط این filter از ۰ تا ۱۰۰ درصد می باشد که صفر درصد خود عکس و ۱۰۰درصد غلیظ ترین حالت ممکن می باشد. به نمونه کد زیر توجه کنید:

img {
filter: invert(100%);
}

خروجی کدبالا:
فیلتر invert

نکته: این filter به صورت پیشفرض بر روی ۱۰۰ درصد قرار دارد.

فیلتر drop-shadow

از فیلتر drop-shadow برای ایجاد سایه درون عکس استفاده می شود یعنی به اجزای داخلی و خارجی عکس سایه می دهیم نه فقط به قسمت بیرونی. به نمونه کد زیر توجه کنید:

img {
filter: drop-shadow(10px 10px 10px gray);
}

خروجی کد بالا:
فیلتر drop-shadowنکته: به جای رنگ gray میتوانید از rgba نیز استفاده کنید.

خلاصه مطلب:

  1. از فیلتر blur برای مات نمودن تصویر استفاده می شود.
  2. از فیلتر brightness برای روشنایی تصویر یا عنصر مورد نظر خود استفاده می کنیم.
  3. از فیلتر opacity برای شفاف تر نمودن عنصر یا تصویر مورد نظر خود استفاده می کنیم.
  4. از فیلتر saturate برای جان بخشیدن به تصاویر استفاده می شود بر عکس ویژگی های دیگر این ویژگی محدودیتی ندارد.
  5. از فیلتر grayscale برای تبدیل رنگ های تصویر به خاکستری تبدیل می شود.
  6. فیلتر sepia مانند filter grayscale عمل می کند اما با این فرق که این filterرنگ ها را به سمت یک قهوه ای کمرنگ تبدیل می کند.
  7. فیلتر contrast با ایجاد تضاد بین روشنی و تاریکی به تصویر ما جلوه ی زیبا تری می بخشد مقادیر دریافتی این filterبدون محدودیت است.
  8. فیلتر hue-rotateبر اساس دایره ی رنگ ها می باشد این دایره از ۰ تا ۳۶۰ درجه می باشد و با انتخاب درجه ی مورد نظر خود رنگ های تصویر ما به آن درجه تبدیل می شود.
  9. از فیلتر invert برای تبدیل رنگ ها استفاده می شود به این گونه که تمامی رنگ ها را به سفید یا سیاه تبدیل می کند و یک تضاد جالب ایجاد می نماید.
  10. از فیلتر drop-shadow برای ایجاد سایه درون عکس استفاده می شود یعنی به اجزای داخلی و خارجی عکس سایه می دهیم نه فقط به قسمت بیرونی.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها