CSS soyalar
CSS bilan soya effektlari yaratish mumkin!
CSS matn soyasi
CSS text-shadow xossasi matn soyasini qo‘llaydi.
Eng oddiy ishlatishda faqat gorizontal va vertikal soyani ko‘rsatasiz.
Bundan tashqari, soya rangi va xira (blur) effektini qo‘shishingiz mumkin.
Matn soya effekti!
Keyin soyaga rang qo‘shing:
Matn soya effekti!
Misol
Gorizontal va vertikal soya, rang bilan:
h1
{
text-shadow: 2px 2px red;
}
O‘zingiz sinab ko‘ring »
So‘ng soyaga xira (blur) effekti qo‘shing:
Matn soya effekti!
Misol
Gorizontal va vertikal soya, rang va xira effekti bilan:
h1
{
text-shadow: 2px 2px 5px red;
}
O‘zingiz sinab ko‘ring »
Quyidagi misol qora soyalı oq matnni ko‘rsatadi:
Matn soya effekti!
Misol
Oq matnga text-shadow:
h1
{
color: white;
text-shadow: 2px 2px 4px #000000;
}
O‘zingiz sinab ko‘ring »
Quyidagi misol qizil neon yorug‘lik soyasini ko‘rsatadi:
Matn soya effekti!
Misol
Qizil neon yorug‘lik bilan text-shadow:
h1
{
text-shadow: 0 0 3px #ff0000;
}
O‘zingiz sinab ko‘ring »
Bir nechta soyalar
Matnga birdan ortiq soya qo‘shish uchun vergul bilan ajratilgan soyalar ro‘yxatini qo‘shishingiz mumkin.
Quyidagi misol qizil va ko‘k neon yorug‘lik soyasini ko‘rsatadi:
Matn soya effekti!
Quyidagi misol qora, ko‘k va to‘q ko‘k soyalı oq matnni ko‘rsatadi:
Matn soya effekti!
Misol
h1
{
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
O‘zingiz sinab ko‘ring »
text-shadow xossasidan matn atrofida oddiy chegara yaratish uchun ham foydalanish mumkin (soyasiz):
Matn atrofidagi chegara!
Misol
h1
{
color: coral;
text-shadow: -1px 0 black, 0 1px
black, 1px 0 black, 0 -1px black;
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!