Blok soyasi

CSS box-shadow xossasi

CSS box-shadow xossasi elementga bir yoki bir nechta soya qo‘llash uchun ishlatiladi.

Box shadow

Eng oddiy ishlatishda soyaning faqat gorizontal va vertikal ofsetini ko‘rsatasiz.

Bundan tashqari, soya rangi, tarqalish radiusi, xira effekti qo‘shishingiz va soyani tashqi soyadan ichki soyaga (inset) o‘zgartirishingiz mumkin.

CSS gorizontal va vertikal soya

Eng oddiy ishlatishda soyaning faqat gorizontal va vertikal ofsetini ko‘rsatasiz.

Soyaning standart rangi joriy matn rangidir.

box-shadow berilgan <div> elementi

Misol

Gorizontal va vertikal soyani belgilash:

div {
box-shadow: 10px 10px;
}

O‘zingiz sinab ko‘ring »

Soya uchun rang belgilash

color parametri soya rangini belgilaydi.

lightblue rangli box-shadow berilgan <div> elementi

Misol

Soya uchun rang belgilash:

div {
box-shadow: 10px 10px lightblue;
}

O‘zingiz sinab ko‘ring »

Soyaga xira (blur) effekti qo‘shish

blur parametri soyaning xiralik radiusini belgilaydi. Son qanchalik katta bo‘lsa, soya shunchalik xira bo‘ladi.

5px xiralashtirilgan, lightblue rangli box-shadow berilgan <div> elementi

Misol

Soyaga xira (blur) effekti qo‘shing:

div {
box-shadow: 10px 10px 5px lightblue;
}

O‘zingiz sinab ko‘ring »

Soyaning tarqalish radiusini belgilash

spread parametri soyaning tarqalish radiusini belgilaydi.

Musbat qiymat soya o‘lchamini oshiradi, manfiy qiymat esa kichraytiradi.

Xiralashtirilgan, lightblue rangli, yoyilish radiusi 12px bo‘lgan box-shadow berilgan <div> elementi

Misol

Soyaning tarqalish radiusini belgilash:

div {
box-shadow: 10px 10px 5px 12px lightblue;
}

O‘zingiz sinab ko‘ring »

inset parametrini belgilash

inset parametri soyani tashqi soya (outset)dan ichki soyaga (element frameworki ichida) o‘zgartiradi.

Xiralashtirilgan, lightblue rangli, ichki (inset) box-shadow berilgan <div> elementi

Misol

inset parametrini qo‘shish:

div {
box-shadow: 10px 10px 5px lightblue inset;
}

O‘zingiz sinab ko‘ring »

Bir nechta soya qo‘shish

Elementda bir nechta soya ham bo‘lishi mumkin.

Elementga birdan ortiq soya bog‘lash uchun vergul bilan ajratilgan soyalar ro‘yxatini qo‘shing.

Bir nechta soya berilgan <div> elementi

Misol

div {
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
}

O‘zingiz sinab ko‘ring »

Soyali kartochkalar yaratish

box-shadow xossasidan qog‘ozga o‘xshash kartalar yaratish uchun ham foydalanish mumkin:

1

January 1, 2021

Hardanger, Norway

Misol

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

Try it (Text Card) » Try it (Image Card) »

CSS soya xossalari

Quyidagi jadval CSS soya xossalarini sanab o‘tadi:

Xususiyat	Tavsif
box-shadow	Elementga bir yoki bir nechta soya qo‘shadi
text-shadow	Matnga bir yoki bir nechta soya qo‘shadi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish