آموزش تابع Saturate در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تابع Saturate در CSS با من همراه باشید.

آموزش تابع Saturate در CSS

Free-Learn

تابع Saturate در CSS

با استفاده از تابع saturate در CSS میتوان یک افکت ( Effect ) ( میزان اِشباع شدن رنگ ) را بروی عناصر ( معمولا و بیشتر تصاویر ) ایجاد و یا تعریف نمود.

این تابع در ویژگی filter مورد استفاده قرار میگیرد.

نسخه CSS3

Free-Learn

مثال از تابع Saturate در CSS

در ادامه میتوانید یک مثال از این تابع را در زبان CSS مشاهده نمایید.

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تابع saturate در CSS پشتیبانی میکنند یا خیر.

» عددی که در کنار -webkit- وجود دارد ، یعنی از آن نسخه به بالا باید از این پیشوند استفاده نمایید. ( درباره پیشوندها بیشتر بخوانید )

نام تابع Chrome Firefox Opera Safari IE
()saturate ۵۳٫۰
۱۸٫۰ -webkit-
۳۵٫۰ ۴۰٫۰
۱۵٫۰ -webkit-
۹٫۱
۶٫۰ -webkit-
خیر

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این تابع در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر

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

مقدار توضیح
<number> یک مقدار عددی از ۰٫۰ تا ۱ ( از ۱ به بالا میزان اشباع بیشتر میشود )
مثال :
<percentage> یک مقدار درصدی از ۰% تا ۱۰۰% ( از ۱۰۰% به بالا میزان اشباع بیشتر میشود )
مثال :

Free-Learn

نکات و توضیحات

این تابع در مرورگر اینترنت اکسپلورر ( IE ) پشتیبانی نمی شود.

  • هر مقداری که بیشتر از مقدار مشخص شده وارد نمایید ( مثلا از ۱ بیشتر یا از ۱۰۰% بیشتر ) ، میزان اشباع شدن رنگ را بیشتر میکند.
  • از مقادیر منفی نمیتوان در این تابع استفاده کرد.
  • برخی از مرورگرها در نسخه های قدیمی تر از این ویژگی پشتیبانی نمی کنند لذا باید برای حل این مشکل از یسری دستورات پیشوندی از نسخه مشخص شده آن مرورگر ( که در جدول پشتیبانی مرورگرها مشخص شده ) استفاده نمایید.
  • -webkit- برای مرورگر کروم و سافاری و اُپرا

Free-Learn

دریافت PDF یا پرینت این مطلب