Vlad Merjevich

Bir paytlar soyali matn ma'lum bir moda bo'lgan va shunga o'xshash effektni deyarli har qanday saytda topish mumkin edi. IN grafik muharriri soya shunchaki qo'shiladi, u juda zo'r ko'rinadi, bu erda saytning uslubi va dizaynerning o'lchov tuyg'usidan qat'i nazar, soyali va veb-sahifalarga tushirilgan matn mavjud. Ko'pgina brauzerlar matn soya uslubi xususiyatini qo'llab-quvvatlay boshlaganda, rejim o'tib ketdi va endi soya bilan matn juda kam uchraydi. Shu bilan birga, matn soyasi kam sonli odamlar shubha qiladigan boshqa bir qator yashirin foydalanishga ega. Ushbu xususiyatdan foydalanib siz belgilangan matnni tuzishingiz, uni "ekstruziya qilishingiz", porlashingiz, xiralashishingiz va boshqa ko'p narsalarni yaratishingiz mumkin.

Matn soyasidan foydalanish

To'rt parametr qiymat sifatida yozilgan: soyaning rangi, gorizontal va vertikal ofset va soyaning xiralashishi radiusi (1-rasm).

Shakl: 1. Matn soya parametrlari

Rang barcha parametrlarning boshida yoki oxirida har qanday mos CSS formatida yozilishi mumkin. Shunday qilib, rgba formatidan foydalanib yarim shaffof soya qilishingiz mumkin. Ijobiy ofset qiymatlari soyani o'ngga va pastga "tushiradi", salbiy qiymatlar esa chapga va yuqoriga soya soladi. Matn atrofida soya bo'lishi uchun ofset qiymatlarini nolga o'rnatish kifoya. Xiralashish radiusi soya qanchalik aniq bo'lishini belgilaydi. Xiralashish radiusi qanchalik katta bo'lsa, soya yumshoqroq ko'rinadi.

Matn soyasining katta afzalligi shundaki, ularning parametrlarini vergul bilan ajratib, bir vaqtning o'zida bir nechta turli xil soyalarni qo'shish mumkin. Ushbu xususiyat asosan turli xil effektlarni yaratishga imkon beradi.

Afsuski, IE 10.0 versiyasidan oldin matn soyasini qo'llab-quvvatlamaydi, shuning uchun biz ushbu brauzerda biron bir go'zallikni ko'rmaymiz.

Kontur matni har bir harfning rangi matn rangidan farq qiladigan chiziq bilan o'ralganligi bilan ajralib turadi (2-rasm). Ushbu effekt sarlavhalar kabi katta hajmdagi sarum shriftlari bilan yaxshi ishlaydi. Asosiy matn uchun konturdan foydalanish faqat o'qishni yomonlashtiradi.

Shakl: 2. Qisqacha matn

Konturni ikki usulda yaratish mumkin. Birinchi usulda biz soya uchun nolinchi ofset va uning xiralashganligi kichik radiusini o'rnatdik, so'zma-so'z 1-2 piksel (1-misol). Loyqalanish qiymatini oshirish yo'lni matn atrofidagi nurga aylantiradi, bu boshqacha effekt.

1-misol

Qisqacha matn

Ushbu usul bilan tuzilgan kontur shakl. 1. Kontur biroz xiralashgan, shuning uchun aniq chiziqni olishni istaganlar uchun ikkinchi usul mo'ljallangan. U tarkibida to'rtdan foydalanib bir xil rangdagi o'tkir soyalar, ular bir xil piksel bilan har xil burchaklarga siljiydi (2-misol).

Misol 2. Yo'l uchun to'rtta soya

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Qisqacha matn

Bunday konturning shakli shakl. 3. Kontur yanada ifodali ekanligi seziladi.

Shakl: 3. To'rt soyali kontur

Shaklda ko'rsatilgan 3D matn effektini qo'shish uchun. 4, gorizontal va vertikal ravishda bir-biriga nisbatan bir pikselga siljigan bir nechta soyalar bir vaqtning o'zida qo'llaniladi.

Shakl: 4. 3D-matn

Shaxsan men uchun ushbu turdagi matn retro uslubidagi yozuvlarga o'xshaydi va yana veb-sahifaning asosiy matni uchun emas, balki sarlavhalar uchun eng mos keladi.

Soyalar soni matnni oldinga "surish" istagiga bog'liq. Ko'proq raqam harflarning "chuqurligini" oshiradi, kichikroq raqam, aksincha, uch o'lchovliligini pasaytiradi. 3-misolda bir xil rangdagi beshta soyadan foydalaniladi.

Misol 3. Uch o'lchovli qo'shilish uchun soya

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

O'n kamerali sovutgich

Barcha soyalar uchun loyqa radiusini nolga va bir xil rangga qo'ying. Shadows faqat ofset qiymatlari bilan farq qiladi.

Matnni bo'rttirish

Naqshinkor matni yoki boshqacha qilib aytganda, relyef effektini yaratish uchun matn rangi fon rangiga mos kelishi kerak. Sirt ustidagi "chiqib turgan" harflarning bir qismi xuddi yoritilganga o'xshaydi, qolgan qismi esa soyada (5-rasm).

Shakl: 5. Naqshlangan matn

Shunga o'xshash effektni qo'shish uchun biz ikkita soyaga muhtojmiz - biz oq soyani chapga bir pikselga, quyuq kulrang esa o'ngga pastga siljitamiz (4-misol).

Misol 4. Naqshlangan matn

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Naqshli matn

Rölyef kulrang fonda eng yaxshi ko'rinadi, shuning uchun effekt saytning har bir rang sxemasiga mos kelmaydi. Aytgancha, bo'rttirma matnni emas, bo'rttirma olish oson, shunchaki soyaning ranglarini almashtiring.

Matn soyasi: # 333 -1px -1px 0, #fff 1px 1px 0;

Yorqin

Matn atrofidagi porlash bir xil soyada, faqat yorqin va qarama-qarshi. Shunday qilib, porlash effektini yaratish uchun soyaning rangini o'zgartirish va kerakli loyqa radiusini o'rnatish kifoya. Matn atrofidagi yorug'lik bir xil bo'lishi kerakligi sababli, soya ofsetini nolga qo'yish kerak. Shakl. 6-da turli xil ranglarning porlashi misoli ko'rsatilgan.

Shakl: 6. Matn nashrida

Misol 5. Yorqinlik

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Yorqin taraf

Qorong'u tomoni

Xiralashish

Soyaning o'zi xiralashgan, shuning uchun agar siz faqat soyani qoldirsangiz va matnning o'zini yashirsangiz, unda biz xira harflarni olamiz (7-rasm) va xira darajasi matn-soya parametri yordamida osongina sozlanishi mumkin.

Shakl: 7. Xiralashgan holda matn yuboring

Asl matnni yashirish uchun rangni shaffof qilib belgilang (6-misol). So'ngra soya rangi matn rangi vazifasini bajaradi va loyqa radiusi harflar uchun loyqa darajasini belgilaydi.

Misol 6. Xiralashgan matn

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Matnni ajratish

Soya va psevdo-sinflar

Soya to'g'ridan-to'g'ri matnga qo'shilishi shart emas, text-shadow xususiyati: hover va: birinchi harfli psevdo-sinflar bilan yaxshi ishlaydi. Shu tufayli biz olamiz qiziqarli effektlar paragrafning birinchi harfi konturi yoki uning ustiga sichqonchaning ishorasi kabi matn bilan. 7-misolda bunday usullar ko'rsatilgan.

Misol 7. Psevdo-sinflardan foydalanish

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Mart loyihasi xarajatlaridan qat'i nazar an'anaviy kanalni sekinlashtiradi. Bozor tarkibi, tafsilotlarni bekor qilish, avvalgi kampaniyalar tajribasidan foydalangan holda marketing va savdo bo'limini barqarorlashtiradi. Tovar ishlab chiqarish, albatta, o'z-o'zidan birlashtirilgan PRni uzoqlashtiradi va bozor segmentini yutadi. Investitsiya rolni sinxronizatsiya qiladi ijtimoiy holattobora kuchayib borayotgan raqobat. Brend tabiiy ravishda avvalgi aktsiyalar tajribasidan kelib chiqib, joylashtirish rejasini belgilaydi.

Umumiy chegara xususiyati element chegarasini boshqarish uchun ishlatiladi. Ushbu xususiyat bitta deklaratsiyada element chegarasining kengligi, uslubi va rangini belgilashga imkon beradi.

Ushbu uchta xususiyat (kenglik, uslub va chegara rangi) bitta deklaratsiyada o'rnatilishi mumkin. Mana bir misol:

Elementning faqat bir tomonida chegara uslubini belgilashingiz mumkin. Buning uchun chegara-yuqori (yuqori chegara), chegara-o'ng (o'ng chegara), chegara-pastki (pastki chegara), chegara-chap (chap chegara) xususiyatlaridan foydalaning.

Ushbu misolda qutining har bir tomoni har xil qalinlik, uslub va rangga ega.

CSS yordamida qanday qilib shunday shakl yaratishingizni ko'rib chiqing:

Chegara qiymatlari - qalinligi, uslubi va rangi - maxsus xususiyatlar yordamida alohida o'rnatilishi mumkin.

• chegara uslubi - chegara uslubi.
• border-width - chegara kengligi.
• chegara-rang - chegara rang.

Keling, qiymatlarning har birini alohida ko'rib chiqaylik.

Chegaraviy uslub. Chegara uslubi.

Chegara uslubi xususiyati chegara uslubini belgilaydi. CSS-da, HTML-dan farqli o'laroq, element chegarasi shunchaki mustahkamdan ko'proq bo'lishi mumkin. Chegaraviy uslub uchun haqiqiy qiymatlar:

1. yo'q - chegara yo'q (standart).
2. qattiq - qattiq chegara.
3. er-xotin chegara.
4. kesik - kesilgan chegara.
5. nuqta - bir qator nuqta chegarasi.
6. tizma - tizma chegarasi.
7. yiv - chegara chegarasi.
8. ichki qism - chiziqli chegara.
9. dastlabki - ekstrudirovka qilingan chegara.

Ularning tashqi ko'rinishiga misollar.

chegara yo'q (yo'q)

mustahkam chegara

qo‘sh chegara (qo‘sh)

nuqtali chegara

kesilgan chegara (kesilgan)

yiv chegarasi

tizma chegarasi

chegara kiritish

ekstrudirovka qilingan chegara (dastlabki)

Aytgancha, agar siz tizma ramkasi uchun chegara rangini qora rangga qo'ysangiz, quyidagi natijaga erishasiz.

Qora chegara va tizma uslubiga ega div.

Chegarasi mustahkamga o'xshaydi, ammo tizma uslubi qora tomchi soya effektini qo'shish orqali yaratilganligi va qora chegaradagi qora effekt ko'rinmasligidadir.

Chegaraviy uslub xususiyatidan foydalanib, chegara uslubi blokning barcha tomonlari uchun ham ko'proq o'rnatilishi mumkin. Chegaraviy uslubning bitta xususiyati uchun bir nechta qiymatlarni belgilash mumkin, qiymatlar soniga qarab, chegara uslubi blokning boshqa tomonlariga belgilanadi. Siz bitta, ikkita, uch va to'rtta qiymatlarni o'rnatishingiz mumkin. Keling, har bir misol uchun misollarni ko'rib chiqaylik.

Bitta qiymat (qattiq) - chegara uslubi blokning barcha tomonlari uchun o'rnatiladi.

Ikki qiymat (qattiq er-xotin) - birinchi qiymat yuqori va pastki tomonlar uchun uslubni, ikkinchisi tomon uchun belgilaydi.

Uchta qiymat (qattiq ikki nuqta) - birinchi tomon yuqori tomonga, ikkinchisi yon tomonga, uchinchisi pastki qismga.

To'rt qiymat (qattiq ikki nuqta chiziqli) - har bir qiymat yuqoridan boshlab soat yo'nalishi bo'yicha.

Chegaraning kengligi xususiyati. Chegaraning qalinligi.

Border-width xususiyati elementning chegara qalinligini o'rnatish uchun ishlatiladi. Chegaraning qalinligi har qanday mutlaq o'lchov birligida, masalan piksellarda ko'rsatilishi mumkin.

Chegaraviy uslub xususiyatida bo'lgani kabi, xususiyat birdan to'rtgacha qiymatga o'rnatilishi mumkin. Keling, har bir misol uchun misollarni ko'rib chiqaylik.

Misol kodi:

Shuningdek, border-width xususiyati uchun formadagi qiymatlar mavjud kalit so'zlar... Ularning uchtasi:

• ingichka - ingichka chegara;
• o'rta - o'rtacha qalinligi;
• qalin - qalin chegara;

Chegaraning qalinligi: ingichka.

Chegaraning qalinligi: o'rtacha.

Chegaraning qalinligi: qalin.

Chegara rang xususiyati. Chegaraning rangi.

Chegara rangini boshqarish vositasi chegara rangini boshqarish uchun ishlatiladi. Ushbu xususiyat uchun ranglar "CSSdagi ranglar" maqolasida tasvirlangan har qanday usul yordamida o'rnatilishi mumkin, ya'ni:

• Rangning o'n oltinchi yozuvi (# ff00aa).
• RGB formati - rgb (255,12,110). CSS3 uchun RGBA formati.
• HSL formatlari va CSS3 uchun HSLA.
• Rang nomi, masalan, qora. To'liq ro'yxat rang nomlari CSS rang nomlari jadvalida keltirilgan.

Chegarali rang xususiyati, shuningdek, bitta to'rt qiymatga ega bo'lishi mumkin va ularni oldingi xususiyatlar singari boshqaradi.

Bitta qiymat (qizil).

Ikki qiymat (qizil qora).

Uch ma'no (qizil qora sariq).

To'rt ma'no (qizil qora sariq ko'k).

Keling, yuqorida aytib o'tilgan muammoga qaytib, bir shakl chizamiz:

Bunday shaklni tortadigan kod, faqat kattaligi kattaroq:

Yon tomonlar uchun qiymatlarni alohida belgilash

Yuqorida aytib o'tilganidek, blokning faqat bitta tomoni uchun chegara xususiyati qiymatlarini belgilashingiz mumkin. Ushbu maqsadlar uchun xususiyatlar mavjud:

• chegara-yuqori (yuqori chegara)
• chegara-o‘ng (o‘ng chegara)
• chegara-pastki (pastki chegara)
• chegara-chap (chap chegara)

Shuni eslatib o'tamanki, barcha xususiyatlar har qanday tartibda uchta qiymatga (qalinlik, uslub va rang) ega. Ammo har bir tomon uchun qalinligi, rangi va uslubini alohida belgilashga imkon beradigan xususiyatlar mavjud. Ushbu xususiyatlarning yozilishi yuqoridagilardan kelib chiqadi.

Yuqori chegara variantlari (border-top).

• border-top-color - Elementning yuqori chegarasi rangini belgilaydi.
• border-top-width - elementning yuqori chegarasi qalinligini belgilaydi.
• border-top-style - Elementning yuqori chegarasi uslubini o'rnatadi.

O'ng chegara variantlari (chegara-o'ng).

• border-right-color - Elementning o'ng chegarasi rangini belgilaydi.
• border-right-width - Elementning o'ng chegarasi kengligini o'rnatadi.
• border-right-style - Elementning o'ng chegarasi uslubini o'rnatadi.

Pastki parametrlar (chegara-pastki).

• border-bottom-color - elementning pastki chegarasi rangini belgilaydi.
• border-bottom-width - Elementning pastki chegarasining kengligini belgilaydi.
• border-bottom-style - Elementning pastki chegarasi uslubini belgilaydi.

Chap chegara variantlari (chegara chapda).

• border-left-color - Elementning chap chegarasi rangini belgilaydi.
• border-left-width - Elementning chap chegarasi kengligini belgilaydi.
• border-left-style - elementning chap chegarasi uslubini belgilaydi.

Ushbu xususiyatlardan foydalanish misoli:

Chegaraviy radius xususiyati. Chegaraning burchaklarini yaxlitlash.

Chegaraviy radius xususiyati element chegaralarining burchaklarini yaxlitlash uchun mo'ljallangan. Ushbu xususiyat CSS3-da taqdim etilgan va boshqa barcha zamonaviy brauzerlarda to'g'ri ishlaydi Internet Explorer 8 (va undan katta).

Qiymatlar CSS-da ishlatiladigan har qanday raqam bo'lishi mumkin.

Chegaraning radiusi xususiyati: 15px.

Agar blok ramkasi ko'rsatilmagan bo'lsa, unda yaxlitlash fon bilan sodir bo'ladi. Chegarasiz, lekin fon rangi bilan qutichani yaxlitlash misoli:

Chegaraning radiusi xususiyati: 15px.

Elementning har bir burchagini alohida-alohida yaxlitlash uchun xususiyatlar mavjud. Ushbu misolda ularning barchasi ishlatiladi:

Chegaradan yuqori-chapga radius: 15px; chegara-yuqori-o'ng-radiusi: 0; chegara-pastki-o'ng-radiusi: 15px; chegara-pastki-chap-radius: 0;

Chegaraning radiusi xususiyati: 15px.

Ushbu kod bitta deklaratsiyada yozilishi mumkin bo'lsa-da: border-radius: 15px 0 15px 0. Gap shundaki, chegara radiusi xususiyati birdan to'rtgacha qiymatga o'rnatilishi mumkin. Quyidagi jadvalda bunday reklamalarni boshqaradigan qoidalar keltirilgan.

Ushbu jadvalni diqqat bilan o'rganib chiqib, kerakli uslubning eng qisqa yozuvi shunday bo'lishini tushunishingiz mumkin: chegara radiusi: 15px 0. Faqat ikkita qiymat.

Bir oz mashq qiling

CSS yordamida limon chizish.

Bunday blok uchun kod:

Marj: 0 avtomatik; / * Blokni markazga qo'ying * / kengligi: 200px; balandligi: 200 piksel; fon: # F5F240; chegara: 1px qattiq # F0D900; chegara radiusi: 10px 150px 30px 150px;

Biz allaqachon shaklni chizdik:

Endi undan uchburchak qoldiramiz:

Uchburchak kodi quyidagicha:

Marj: 0 avtomatik; / * Blokni markazga joylashtiring * / padding: 0px; kengligi: 0px; balandlik: 0; chegara: 30px qattiq oq; chegara-pastki-rang: qizil;

5 dan 3,5

Sizningcha, bir nechta teglar va sof CSS bilan kattalashtiriladigan uchburchak yasash mumkinmi? Pentagon haqida nima deyish mumkin? Ammo shunday yulduzmi? O'ylaymanki, ko'p odamlar o'ylamaydilar. Aslida, siz qila olasiz.

Shunday qilib, bugun bizda tajribadan keyingi tajriba mavjud. Biz taniqli CSS xususiyati - chegara (va unga tegishli barcha narsalar) bilan o'ynaymiz. Tajriba davomida biz qanday qilib oddiy ko'pburchaklarni, yulduzni yasashni ko'rib chiqamiz va ushbu usullardan amalda foydalanish mumkin bo'lgan bitta holatni ko'rib chiqamiz. Boring!

Oddiy geometrik shakllar

Keling, boshlaymiz oddiy misollar... Faqat HTML va CSS dan foydalanib uchburchakni qanday chizishni bilasizmi? Va shunga o'xshash:

HTML

CSS

Trapezoid,
.polygon (displey: -moz-inline-block;)

Ko'pburchak,
.trapezoid (margin: 0; padding: 0; background: none;)

Ko'pburchak (kengligi: 10em; balandligi: 10em; chegarasi: yo'q; displey: inline-block; text-align: center;)
.trapezoid (
displey: inline-blok; kengligi: 1px; balandlik: 0; margin: 0 avtomatik;
chegara-chap: 5em qattiq shaffof; chegaradan o'ngga: 5em qattiq shaffof;
}

Poligon .aa (chegara osti: 10em qattiq; chegara tepasi: yo'q;)

Polygon.r2 (balandligi: 0em;)

Polygon.r3 (balandligi: 8.66em;)
.polygon.r3 .trapezoid (chegara kengligi: 8.66em 5em;)

div.eg (kenglik: 10em; fon: #FFF; margin: 0 0; to'ldirish: 1em;)
div.eg .polygon (displey: blok; margin: 0 auto;)

R3 (rang: qizil; shrift hajmi: 0,5em;)

Yulduz

HTML

CSS

# yulduzcha oralig'i,
#Yulduz (
displey: blok;
}

#top (
kengligi: 0;
balandlik: 0;
margin: auto;
chegaradan o'ngga: 4.64em qattiq shaffof;
chegara-chap: 4.64em qattiq shaffof;
chegara-pastki: 14.27em qattiq;
}

# markaz (
kengligi: 5.7em;
chegaradan o'ngga: 4.65em qattiq shaffof;
chegara-chap: 4.65em qattiq shaffof;
yuqori chegarasi: 3.36em qattiq;
balandlik: 0;
pozitsiya: mutlaq;
yuqori: 5.46em;
chapda: 0;
z-indeks: 100;
matn bilan tekislash: markaz;
}

#bottom (
pozitsiya: mutlaq;
pastki: 0;
chapda: 2.852em;
chegaradan o'ngga: 4.635em qattiq shaffof;
chegara-chap: 4.635em qattiq shaffof;
border-bottom: 3.4em solid #fff;
kengligi: 0;
balandlik: 0;
}

# markaz oralig'i (
margin-top: -2em;
rang: # 000;
shrift og'irligi: qalin;
}

a # yulduz: hover #center span (
rang: #fff;
fon-rang: shaffof;
}

# yulduz (
rang: # f90;
fon-rang: shaffof;
}
# yulduzcha: hover (
rang: # fc3;
fon-rang: shaffof;
}

Yana bir nechta misollar

• Erik Meyerdan Rojdestvo daraxti va g'ayrioddiy maketi;
• Texnokratiyaning bosh texnologidan plitkalar va menyular;

Albatta, siz fotoshopda go'zallik yaratishingiz mumkin, ammo agar siz matnni chiroyli rasmga kiritmasdan saqlashingiz kerak bo'lsa?

Masalan, matnni teglar bo'yicha ko'proq indeksatsiya qilish uchun sarlavha qilishni xohladim

Shunday qilib, keling, CSS-dan foydalanib, soyali soyali matn tuzamiz:

CSS 3-darajasida har qanday matnning har bir harfiga soya qo'shish uchun "matn soyasi" xususiyati mavjud.

1. Oddiy shakl: h3 (matn soyasi: 0.1em 0.1em # 333)
2. Matn soyalari: h3.b (matn soyasi: 0.1em 0.1em 0.2em qora)
3. O'qiladigan oq matn: h3.a (rang: oq; matn soyasi: qora 0.1em 0.1em 0.2em)
4. Ko'p qatlamli soyalar: h3 (matn soyasi: 0.2em 0.5em 0.1em # 600, -0.3em 0.1em 0.1em # 060, 0.4em -0.3em 0.1em # 006)
5. Xatlar va konturlarni chizish: h3 (matn soyasi: -1px 0 qora, 0 1px qora, 1px 0 qora, 0 -1px qora)
6. Neon porlashi: h3.a (matn soyasi: 0 0 0.2em # 8F7) h3.b (matn soyasi: 0 0 0.2em # F87, 0 0 0.2em # F87) h3.c (matn soyasi: 0 0 0.2em # 87F, 0 0 0.2em # 87F, 0 0 0.2em # 87F)

Yana bir qiziqarli misol:

CSS bilan matnni zarb qilish

Skriptlarga murojaat qilmasdan CSS-dan foydalangan holda matnni zarb qilish mumkin. Ushbu effekt matn-soya xususiyati yordamida yaratilishi mumkin. IE ushbu xususiyatni uning biron bir versiyasida sezmasa ham, qolgan qismida mashhur brauzerlar ushbu retsept juda yaxshi ishlaydi.

Quyidagi kodni ko'rib chiqing:

Misol №1

H1 (matn soyasi: qizil 1px 0px, qizil 1px 1px, qizil 0px 1px, qizil -1px 1px, qizil -1px 0px, qizil -1px -1px, qizil 0px -1px, qizil 1px -1px;)

Text-shadow xususiyatining birinchi parametri soyaning rangini belgilaydi, ikkinchisi - soyaning matnga nisbatan gorizontal siljishi, uchinchisi vertikal ofset. Matn atrofidagi barcha yo'nalishlarda soyaning ofsetini navbati bilan 1 pikselga belgilaganda va zarba effekti olinadi.

Qon tomirlariga misol # 1

Qon tomirini yanada to'yingan qilish uchun siz soyaning xiralashgan radiusi uchun javob beradigan to'rtinchi matn-soya parametridan foydalanishingiz mumkin:

2-misol

H1 (matn soyasi: qizil 1px 0px, qizil 1px 1px, qizil 0px 1px, qizil -1px 1px, qizil -1px 0px, qizil -1px -1px, qizil 0px -1px, qizil 1px -1px, qizil 0 0 3px, qizil 0 0 3px, qizil 0 0 3px, qizil 0 0 3px, qizil 0 0 3px, qizil 0 0 3px, qizil 0 0 3px, qizil 0 0 3px, qizil 0 0 3px;)

Qon tomirlariga misol # 2

E'tibor bergan bo'lsangiz, "qizil 0 0 3px" xususiyati bir necha bor takrorlanadi. Bu erda to'yinganlik effekti yotadi. Qon tomirini aniqroq namoyish etish uchun xususiyat boshqa parametrlar bilan ko'p marta qo'shilishi mumkin. Birgina kamchilik shundaki, u sekinroq ishlaydigan kompyuterlarda brauzeringizni keskin sekinlashtirishi mumkin.

Bugun men sizga qanday qilib CSS-da matnli zarba berishingiz mumkinligini aytaman. Biz barcha manipulyatsiyalarni faqat text-shadow xususiyati bilan amalga oshiramiz.

Yupqa aniq zarbalar

Biz barcha g'oyalarimizni sinab ko'radigan matn sifatida men quyidagilarni ishlatishni taklif qilaman:

Bu erda matn bilan blokirovka matn-dek sinfiga ega ekanligini ko'rishingiz mumkin. Biz CSS-dagi elementimizga kerakli xususiyatlarni qo'llagan holda murojaat qilamiz. Shunday qilib, ingichka zarbani qanday qilish kerak:

Text-dec (shrift o'lchami: 50px; rang: sariq; matn-soya: 1px 1px 0 qora, -1px -1px 0 qora)

Darhol yo'lga chiqamiz katta o'lcham har bir narsa juda aniq ko'rinadigan bo'lishi uchun shrift, va masalan, matn rangi sariq rangga ega. Bizning holatimizdagi uchinchi qator bu zarbani amalga oshiradi.

Matn-soya xususiyati matnga soya qo'shishga imkon beradi, siz istagancha soyalarni vergul bilan ajratishingiz mumkin. Xususiyat sintaksisi quyidagicha:

matn soyasi: gorizontal ofset | vertikal | xiralashish | Rang

Bizning holatimizda, avval kichik chap tomonni chapga, so'ngra yuqoriga va o'ngga o'rnatdik. Natijada, butun kontur atrofidagi matn aylana oldi.

Agar har bir soyaga 10 pikselli xiralashishni qo'shsak, u quyidagicha ko'rinadi:

Xiralashgan qon tomir

Yana bir yondashuv - ofsetni umuman o'rnatmaslik, xiralashganlikni aniqlash - bu holda matn ham xuddi shunday, ammo aniq emas, aniqlanadi. Keling, html-ga xuddi shu matnni qo'shamiz, lekin uslublar sinfini boshqasiga - text-dec2-ga o'rnating:

Text-dec2 (shrift o'lchami: 50px; rang: ko'k; text-shadow: 0 0 7px red;)

Jasur zarba

Buni amalga oshirish qiyinroq, chunki soyalarni haddan tashqari ko'p siljitish o'qilmaydigan matnga olib kelishi mumkin. Shunga qaramay, ma'lum bir natijaga erishish mumkin, ammo bu avvalgi holatlarga qaraganda ko'proq soyalarni qo'shishni talab qiladi. Shunga ko'ra, html-ga text-dec3 va text-dec4 sinflari bilan yangi matn parchalarini qo'shing. Va bu erda ular uchun uslublar:

Text-dec3 (shrift hajmi: 50px; rang: sariq; matn soyasi: 1px 1px 0 qora, -1px -1px 0 qora, 2px 2px 0 qora, -2px -2px 0 qora, 3px 3px 0 qora, -3px - 3px 0 qora, 4px 4px 0 qora, -4px -4px 0 qora) .text-dec4 (shrift o'lchami: 50px; rang: sariq; matn soyasi: -1px 1px 0 qora, 1px -1px 0 qora, -2px 2px 0 qora, 2px -2px 0 qora, -3px 3px 0 qora, 3px -3px 0 qora, -4px 4px 0 qora, 4px -4px 0 qora)

Ko'rib turganingizdek, matn o'qish qobiliyatini saqlab qoldi va shu bilan birga yaxshi qora konturni oldi. Ushbu yondashuvning mohiyati shundaki, biz asta-sekin yangi soyalarni qo'shamiz va har safar ofsetni 1 pikselga oshiramiz.

Hatto har tomondan dadilroq zarbalar

Keyinchalik - qiyinroq. Men shaxsan zarbani har tomondan qanday qilib to'g'ri amalga oshirishni bilmas edim, lekin keyin Internetda soyani vizual ravishda sozlash imkonini beradigan matn-soya generatoriga duch keldim, shundan keyingina uning kodini nusxalash kerak. Bu erda generatorga havola mavjud.
Undan foydalanib, men quyidagi soyani yasay oldim:

CSS hali hamma narsaga qodir emas

Bu erda CSS imkoniyatlari tugaydi. Agar siz bunga o'xshash jasur zarbani xohlasangiz:
Keyin buni Photoshop-da bajaring va matnning o'zi veb-sahifaga rasm sifatida kiritilishi kerak

Hozircha CSS-da matnni qanday zarb qilish variantlarini bilaman. Ehtimol siz nimani bilasiz, izohlarda yozing. Keyingi safar men sizga text-shadow xususiyati tufayli matnda bajarilishi mumkin bo'lgan yana bir nechta effektlarni ko'rsataman.