blur()
CSS blur() filtr funksiyasi elementga xiralashtirish (blur) effektini qo‘llaydi. Qiymat qanchalik katta bo‘lsa, xiralik shunchalik kuchli bo‘ladi.
Misol
<h1> va <img> elementlariga turli xiralashtirish effektlarini qo‘llang:
h1 {
filter: blur(2px);
}
#img1 {
filter: blur(2px);
}
#img2 {
filter: blur(6px);
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar funksiyani to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Funksiya | |||||
|---|---|---|---|---|---|
| blur() | 18 | 12 | 35 | 6 | 15 |
CSS sintaksisi
blur(radius)
| Qiymat | Tavsif |
|---|---|
| radius | Ixtiyoriy. Xiralashtirish radiusini belgilaydi. Qiymat qanchalik katta bo‘lsa, xiralik shunchalik kuchli bo‘ladi. Agar qiymat ko‘rsatilmasa, 0 ishlatiladi (effekt yo‘q). |
| Versiya: | CSS Filter Effects moduli, 1-daraja |
|---|
Ko‘proq misollar
Misol
Xiralashtirilgan fon yarating:
img.background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
filter: blur(35px);
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS ma’lumotnomasi: CSS filter xususiyati.
CSS ma’lumotnomasi: CSS brightness() funksiyasi.
CSS ma’lumotnomasi: CSS contrast() funksiyasi.
CSS ma’lumotnomasi: CSS drop-shadow() funksiyasi.
CSS ma’lumotnomasi: CSS grayscale() funksiyasi.
CSS ma’lumotnomasi: CSS hue-rotate() funksiyasi.
CSS ma’lumotnomasi: CSS invert() funksiyasi.
CSS ma’lumotnomasi: CSS opacity() funksiyasi.
CSS ma’lumotnomasi: CSS saturate() funksiyasi.
CSS ma’lumotnomasi: CSS sepia() funksiyasi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!