این آموزش در تاریخ ۱۴۰۰/۱۰/۲۰ آپدیت شده است.
آموزش تابع blur در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تابع blur در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تابع blur در CSS
با استفاده از تابع blur در CSS میتوان یک افکت ( Effect ) ( مَحو – تاری ) را بروی تگ ها ( معمولا و بیشتر تصاویر ) ایجاد و یا تعریف نمود.
این تابع در ویژگی filter مورد استفاده قرار میگیرد.
| نسخه | CSS3 |
|---|
Free-Learn
مثال از تابع blur در CSS
در ادامه میتوانید یک مثال از این تابع را در زبان CSS مشاهده نمایید.
|
1 2 3 4 5 6 7 |
<style> img.f2{ filter: blur(1px); } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تابع blur در CSS پشتیبانی میکنند یا خیر.
» عددی که در کنار -webkit- وجود دارد ، یعنی از آن نسخه به بالا باید از این پیشوند استفاده نمایید. ( درباره پیشوندها بیشتر بخوانید )
| نام تابع | Chrome | Firefox | Opera | Safari | Edge |
| ()blur | ۵۳ ۱۸ تا ۵۲ -webkit- |
۳۵ | ۴۰٫۰ ۱۵ تا ۳۹ -webkit- |
۹٫۱ ۶ تا ۹ -webkit- |
۷۹ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این تابع در CSS بصورت زیر می باشد.
|
1 |
blur( <length> ); |
Free-Learn
جدول مقادیر
در جدول زیر میتوانید، مقادیری را که میتوان در این تابع استفاده کرد مشاهده نمایید.
| مقدار | توضیح | ||
|---|---|---|---|
| <length> | یک عدد با واحد اندازه گیری پیکسل ( PX ) مثال :
|
Free-Learn
نکات و توضیحات
- از مقادیر منفی نمیتوان در این تابع استفاده کرد.
- برخی از مرورگرها در نسخه های قدیمی تر از این ویژگی پشتیبانی نمی کنند لذا باید برای حل این مشکل از یسری دستورات پیشوندی از نسخه مشخص شده آن مرورگر ( که در جدول پشتیبانی مرورگرها مشخص شده ) استفاده نمایید.
- -webkit- برای مرورگر کروم و سافاری و اُپرا
