filter Property
ویژگی 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 از این ویژگی پشتیبانی می کنند.
