اُپن تگ | منابع و محتوای آموزشی برای طراحان وب
بدون نتیجه
نمایش همه نتایج
  • ثبت نام / ورود
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
اپن تگ
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
بدون نتیجه
نمایش همه نتایج
بدون نتیجه
نمایش همه نتایج
اپن تگ

خانه › CSS3 › ویژگی › ویژگی filter در CSS

ویژگی filter در CSS

filter Property

عناصر مرتبط:
lang()  text-align

ویژگی filter در CSS جلوه های گرافیکی نظیر blur, contrast و grayscaleرا به تصویر یا تصویر پس زمینه اعمال می کند.

نحوه نوشتار

filter: url("filters.svg#filter-id");

filter: blur(2px);
filter: brightness(0.8);
filter: contrast(50%);
filter: drop-shadow(0px 8px 12px lightblue);
filter: grayscale(30%);
filter: hue-rotate(250deg);
filter: invert(55%);
filter: opacity(85%);
filter: saturate(70%);
filter: sepia(30%);

filter: contrast(113%) brightness(11%);

filter: none;

مقادیر

none​

هیچ افکتی را اعمال نمی کند.

blur​

افکت بلور را اعمال می کند. این افکت تاثیر تاری و محو شدگی بر تصویر می گذارد. مقدار این تابع بر مبنای درصد می باشد.

brightness​

میزان روشنایی را در تصویر مشخص می کند. مقدار این تابع بر مبنای درصد می باشد.

contrast​

شدت کنتراست را در تصویر مشخص می کند. بطور ساده، کنتراست شدت درخشندگیِ رنگ ها است. مقدار این تابع بر مبنای درصد می باشد.

drop-shadow​

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

  • سایه افقی​ : این مقدار موقعیت سایه را در محور افقی مشخص می کند.
  • سایه عمودی​ : این مقدار موقعیت سایه را در محور عمودی مشخص می کند.
  • blur​ : این مقدار سومین مقدار و اختیاری می باشد و میزان محو شدگی تصویر را مشخص می کند.
  • spread​ : این مقدار چهارمین مقدار و اختیاری می باشد و میزان پراکندگی سایه را مشخص می کند.

grayscale​

بر روی میزان رنگ تصویر تاثیر می گذارد. این تابع اگر بالاترین مقدار را که بر حسب درصد (100%) می باشد، دریافت کند، تصویرِ رنگی را بطور کامل سیاه و سفید می کند. مقدار این تابع بر مبنای درصد می باشد.

hue-rotate​

این تابع چرخش hue را بر روی تصویر اعمال می کند. مقدار این تابع بر مبنای درجه می باشد.

invert​

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

opacity​

این تابع میزان وضوح تصویر را مشخص می کند. در بیشترین مقدارِ این تابع، تصویر، کاملا نمایان و در کمترین مقدار، تصویر نامرئی می شود. مقدار این تابع بر مبنای درصد می باشد.

saturate​

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

sepia​

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

()url​

این تابع مکان فایل XML، که یک فیلتر SVG را که حاوی یک فیلتر خاص است را مشخص می کند.

در مثال های زیر نوع عملکرد این ویژگی را با مقادیر مختلف می بینیم:

css

.none        { filter: none; }
.blur        { filter: blur(5px); }
.brightness  { filter: brightness(0.4); }
.contrast    { filter: contrast(200%); }
.drop-shadow { filter: drop-shadow(0px 0px 20px blue); }
.grayscale   { filter: grayscale(70%); }
.hue-rotate  { filter: hue-rotate(180deg); }
.invert      { filter: invert(75%); }
.opacity     { filter: opacity(25%); }
.saturate    { filter: saturate(0%); }
.sepia       { filter: sepia(100%); }

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها به جز مرورگر Internet Explorer از این ویژگی پشتیبانی می کنند.

پست قبلی

ویژگی empty-cells در CSS

پست بعدی

ویژگی float در CSS

پست بعدی
css-float-property

ویژگی float در CSS

دیدگاهتان را بنویسید لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

بنر مرجع html
بنر مرجع css

اُپن تگ

اپن تگ در تلاش است با گردآوری منابع و ارائه محتوای آموزشی در حوزه طراحی وب، راه را برای دسترسی طراحان وب و علاقه‌مندان به آخرین روش‌ها و تکنولوژی‌های این بخش از صنعت توسعه وب هموارتر سازد.

با خبر باشید!

برای اطلاع از مطالب ويژه و دوره های آموزشی جدید در خبرنامه اُپن‌تگ عضو شوید.

  • درباره
  • ارتباط با ما

تمامی حقوق برای اپن تگ محفوظ است. استفاده از مطالب تنها با ذکر منبع مجاز است.

  • ورود
  • ثبت نام
  • سبد خرید
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS

خوش آمدید!

به حساب خود وارد شوید

فراموشی رمز عبور ؟ ثبت نام

ساخت حساب کاربری!

فرم زیر را برای ثبت نام تکمیل نمایید

همه فیلد ها ضروری اند وارد شدن

رمز عبور خود را بازیابی کنید

لطفاً ایمیل یا نام کاربری خود را جهت بازیابی رمز عبور وارد نمایید

وارد شدن