Hatto eng yashil dizayner ham Photoshop-da qanday qilib soya qilishni biladi. Shadows dizaynga o'lcham qo'shadi va hozir juda mashhur. Matnlar, menyu elementlari va sarlavhalar uchun soyalar bundan mustasno emas. Apple interfeyslarining dizaynini eslash kifoya

Texnikalar arsenalida matn soyalari bilan ishlash ko'nikmalariga ega bo'lish foydali bo'ladi.

Vazifa

Rasmlardan foydalanmasdan, CSS-dan foydalanib matn uchun soya yarating. Bu bilan nimaga erishamiz?

• moslashuvchanlik - rasm kerak emas, matnni o'zgartirish oson
• tezlik - kamroq tasvir - kamroq sahifa og'irligi, serverga kamroq qo'ng'iroqlar
• SEO - matn rasmlarga qaraganda yaxshiroq optimallashtirilgan va matnni rasm bilan almashtirish texnikasidan foydalanishdan ko'ra ishonchliroqdir

Oddiy brauzerlar uchun matn soyalari

Oddiy brauzerlar W3C tavsiyalariga ko'proq yoki kamroq mos keladigan barcha zamonaviy brauzerlarni o'z ichiga oladi. Bunday holda, ushbu brauzerlar 2003 yilda tavsiya etilgan CSS3 matn soyasi xususiyatini tushunishadi.

Shunday qilib, matn soya xususiyatini qo'llab-quvvatlaydigan brauzerlar ro'yxati:

• Safari 3.1 (Mac/Win) - qo'llab-quvvatlaydi, bir nechta soyalarni qo'llab-quvvatlamaydi
• Safari 4 (Mac/Win) - to'liq qo'llab-quvvatlanadi
• Opera 9.5+ (Mac/Win/Lin) - to'liq qo'llab-quvvatlaydi
• Firefox 3.1/3.5 (Mac/Win/Lin) - to'liq qo'llab-quvvatlaydi
• Google Chrome 2 (Win) - to'liq qo'llab-quvvatlanadi
• Shiira (Mac) - qo'llab-quvvatlaydi, bir nechta soyalarni qo'llab-quvvatlamaydi
• Konqueror (Lin/Mac/Win) - to'liq qo'llab-quvvatlaydi
• iCab (Mac) - qo'llab-quvvatlaydi, bir nechta soyalarni qo'llab-quvvatlamaydi
• iPhone-da Safari - qo'llab-quvvatlanadi, bir nechta soyalar qo'llab-quvvatlanmaydi
• Nokia Symbian-smartfonlari (60-seriya) - qo'llab-quvvatlaydi
• Opera Mini 4.1 - qo'llab-quvvatlaydi, soyani xiralashtirishni qo'llab-quvvatlamaydi

Ushbu brauzerlar uchun CSS-ning bir qatori matnni soya qilish uchun etarli:

H1 (matn soyasi: 0px 1px 3px #000; )

Biz ushbu ajoyib sarlavhani olamiz:

Matn-soya yordamida turli xil qiziqarli effektlarga erishishingiz mumkin.

Xiralashgan matn

H1 (rang: #fff; fon: #666; matn soyasi: 0px 0px 3px #fff; )

Ikki nusxadagi matn

H1 (matn soyasi: 0px 20px #000; )

Bir nechta soyalar sizga yana bir nechta effektlarga erishishga imkon beradi:

O'chirilgan matn

H1 (fon: #ccc; rang: #ccc; matn soyasi: -1px -1px #666, 1px 1px #FFF; shrift oilasi: serif; )

Ko'tarilgan matn

H1 (fon: #999; rang: #999; matn soyasi: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; shrift oilasi: serif; )

(IE bu erda go'zallikdan bahramand bo'lishingizga ruxsat bermaydi, chunki u matn-soyani qo'llab-quvvatlamaydi). Matn-soya yordamida siz juda ko'p turli xil effektlarni topishingiz mumkin, yagona amaliy cheklov sizning tasavvuringizdir.

Endi qayg'uli narsa haqida - hammaning "sevimli" IE bilan nima qilish kerak?

IE da matn soyalari

IE 8-versiyasigacha matn soyasini tushunmasa ham, uning o'ziga xos "qo'ng'iroq va hushtak"lari ko'p. Xususan, soyalarni yaratish uchun dropShadow() filtri mavjud. Soyalar paydo bo'lishi uchun elementda tartib to'plami bo'lishi kerak. Siz bir necha usul bilan o'rnatishingiz mumkin:

• element xususiyatlarini o'rnatish orqali: blok + balandlik () yoki kenglik ())
• elementni berish: mutlaq
• belgilash orqali: chap/o'ng
• masshtabni sozlash: 1

H1 (filtr:progid:DXImageTransform.Microsoft.DropShadow(color="#666666",offX=2,offY=2,pozitiv="true"); masshtablash: 1; )

“Hurray!!!” deb baqirish mumkindek tuyuldi. va hayotdan zavqlaning, lekin bu filtr haqiqatda qanday ishlashiga qarang:

Agar siz unga dropShadow filtrini qo'llasangiz, matn shunday ko'rinadi

Tushunmaganlar uchun ushbu filtrning kamchiliklari:

• soya dahshatli ko'rinadi: burchakli, shaffoflik bilan fonga silliq o'tish yo'q
• shrift uslubi buzilgan
• soyani sozlash deyarli mumkin emas (siz faqat soyaning holatini boshqarishingiz mumkin) - buni dropShadow o'rniga soya filtri yordamida qisman chetlab o'tish mumkin, ammo birinchi ikkita muhim kamchilik saqlanib qolmoqda.
• tartibning majburiy mavjudligi ishlab chiquvchini biroz cheklaydi

Bu natija haqiqiy loyihalarda qabul qilinishi mumkin emas. Ishlab chiquvchilardan bunday ishni kim va qanday qilib olgani noma'lum.

Kilian Valkhof soya emulyatsiyasidan foydalanishni taklif qildi:

1. filtrni to'g'ridan-to'g'ri matnga qo'llamang
2. dropShadow va soya o'rniga porlash va xiralashtirish filtrlari kombinatsiyasidan foydalaning

Bu matn buzilishining oldini oladi va soyani yanada moslashuvchan qiladi.

Sinov sarlavhasiТестовый заголовок

H1 (matn soyasi: 3px 3px 3px #cccccc; joylashuv: nisbiy; masshtab: 1; rang: #000; ) h1 oraliq (pozitsiya: mutlaq; chap: -3px; tepa: -3px; z-indeks: -1; filtr: progid:DXImageTransform.Microsoft.Glow(Color=#cccccc,Strength=1) progid:DXImageTransform.Microsoft.blur(pixelradius=3, enabled="true") ; masshtablash: 1; )

Ammo bu yondashuv bilan ham, hali ham bir qator kamchiliklar mavjud:

• semantik bo'lmagan kod qo'shimcha element bo'lib, hatto matnni takrorlash bilan ham tarkibning mantiqiy tuzilishiga va SEO optimallashtirishga eng yaxshi ta'sir ko'rsatmaydi. Ushbu muammoni JavaScript yordamida hal qilish mumkin, bu sahifa yuklanganda IE uchun qo'shimcha element kiritadi
• boshqa brauzerlarda (matn-soyani tushunadigan) displeyga mos kelmaydi - filtrlar sizga minimal sozlamalar bilan soyani taqlid qilish imkonini beradi. Boshqa brauzerlar bilan soya o'xshashligiga erishish har doim ham mumkin emas
• kamroq moslashuvchanlik - filtrlar matn soyasining barcha imkoniyatlarini ta'minlamaydi, masalan, bir nechta soyalarni amalga oshirish mumkin bo'lmaydi.

IE uchun soyalarni yaratish uchun siz javascriptdan foydalanishingiz mumkin (javascript kunni birinchi marta saqlagan emas)

Javascript yordamida matn soyalari

Men sinab ko'rgan skriptlardan jQuery plaginini tanladim "Drop Shadow". Uning afzalliklari:

• bir nechta konteynerlarni kiritish orqali soyalarni emulyatsiya qiladi, ya'ni. IE uchun filtrlardan foydalanmasdan. Bu IE-da soyalarni iloji boricha boshqa brauzerlarga o'xshash qilish imkonini beradi + IE uchun tartib haqida tashvishlanishning hojati yo'q
• nafaqat IE uchun soyalarni yaratadi, bu ba'zan foydali bo'lishi mumkin
• skript engil - 4Kb (agar siz koddan sharhlarni olib tashlasangiz) va agar siz siqishni qo'llasangiz, u kamroq bo'ladi. Skript yozishda talablar bor - jquery.dimensions.js skriptining mavjudligi, lekin men haligacha nima uchun kerakligini tushunmayapman. Soyalar yaratiladi, o'chiriladi, id bo'yicha va unsiz aniqlanadi.
• foydalanish uchun oddiy va tushunarli
• Bir necha muvaffaqiyat bilan bir nechta soyalarni taqlid qilishingiz mumkin

Kamchiliklari:

• element identifikatori bo'yicha skriptni ishga tushira olmaysiz
• agar elementga fon berilsa, soya matn uchun emas, balki butun element uchun yaratiladi
• JQuery kutubxonasini majburiy kiritish (bu 50Kb dan ortiq). Ammo jQuery-ning mashhurligi bu kamchilikni amalda yo'q qiladi
• Skript tavsifiga ko'ra, jquery.dimensions.js (boshqa 2Kb) ulanishi ham talab qilinadi. Lekin men bu kutubxona nima uchun kerakligini tushunmayapman, usiz hamma narsa yaxshi ishlayotganga o'xshaydi

Drop Shadow plaginidan foydalanish

Sintaksis:

JQuery(selektor).dropShadow(variantlar); // jQuery(selector).redrawShadow() elementida soya yaratish; // soyani qayta chizish jQuery(selektor).removeShadow(); // soyani olib tashlash jQuery(selektor).shadowId(); // element soyasining identifikatorini qaytaradi

Chap: [integer] (standart = 4) tepa: [butun] (standart = 4) loyqalik: [butun] (standart = 2) noaniqlik: [kasr son] (standart = 0,5) rang: [string] (standart = " qora") almashtirish: [boolean] (standart = noto'g'ri)

Chap va yuqori parametrlar yorliqning (yoki ob'ektning) yuqori chap burchagiga nisbatan soyaning boshlanishining koordinatalari. Ijobiy qiymatlar soyani o'ngga va pastga siljitadi, salbiy qiymatlar soyani chapga va yuqoriga siljitadi.

CSS text-shadow xususiyati matn soyasini o'rnatish uchun javobgardir. Box-shadow xususiyatiga juda o'xshash.

CSS matn-soya sintaksisi

matn soyasi: X Y R rangi;

• X - soyaning X o'qi bo'ylab matnga nisbatan siljishi (ko'pincha px piksellarda o'rnatiladi);
• Y - soyaning Y o'qi bo'ylab matnga nisbatan siljishi (ko'pincha px piksellarda o'rnatiladi);
• R - soya radiusi (ko'pincha px piksellarda ko'rsatilgan);
• rang - rang (har qanday formatda ko'rsatilishi mumkin, html rang nomlariga qarang)

Matn-soya sintaksisi bir nechta soyalarni vergul bilan ajratish imkonini beradi. Masalan

matn-soya : X1 Y1 R1 rang1 , X2 Y2 R2 rang2 , ...;

Soya ustuvorligi (qaysi balandroq, qaysi biri pastroq) o'ziga xos CSS versiyasiga bog'liq. CSS3 da ro'yxatdagi birinchi soya eng yuqori qismida, oxirgisi esa eng pastda joylashgan. CSS2 da buning aksi.

Misollar: html-da matn uchun soyani qanday qilish kerak

Misol № 1. Html matn uchun oddiy soya

Quyida matn soyasi bilan eng oddiy misol keltirilgan. Bu erda biz ikkala ofsetni (X va Y) qo'lladik, shuningdek, loyqa radiusni yaratdik.

Текст с тенью

Текст с тенью

Пример №2. Фиксированная или жесткая тень у текста в html

Ниже представлены два примера. Тень в обоих случаях одинаковая (фиксированная), т.е. без размытия. Обратите внимание, какой эффект создается, если текст будет на черном фоне.

Фиксированная или жесткая тень

Фиксированная или жесткая тень с фоном

На странице преобразуется в следующее

Фиксированная или жесткая тень

Фиксированная или жесткая тень с фоном

Пример №3. Двойная тень у текста в html

Двойная тень

На странице преобразуется в следующее

Двойная тень

Пример №4. Вдавленные буквы у текста в html

Вдавленные буквы - вариант 1

Вдавленные буквы - вариант 2

На странице преобразуется в следующее

Вдавленные буквы - вариант 1

Вдавленные буквы - вариант 2

Пример №5. Вдавленные буквы у текста в html

Небольшой 3D текст

На странице преобразуется в следующее

Небольшой 3D текст

Для обращения к margin из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.margin ="VALUE "

Влад Мержевич

Одно время на текст с тенью была определённая мода и подобный эффект можно было встретить практически на любом сайте. В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство text-shadow , мода уже прошла и теперь текст с тенью встречается довольно редко. Впрочем у text-shadow есть ряд других неявных способов применения, о которых мало кто подозревает. С помощью этого свойства можно делать контурный текст, «выдавливать» его, создавать свечение, размытие и многое другое.

Использование text-shadow

В качестве значений пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени (рис. 1).

Рис. 1. Параметры text-shadow

Цвет допускается писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba. Положительные значения смещения «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения смещения. Радиус размытия устанавливает, насколько тень будет резкой. Чем больше радиус размытия, тем мягче выглядит тень.

Большим плюсом text-shadow является возможность добавлять сразу несколько разных теней, перечисляя их параметры через запятую. Эта особенность, в основном, и позволяет делать разные эффекты.

К сожалению, IE до версии 10.0 не поддерживает text-shadow , так что в этом браузере мы никаких красивостей не увидим.

Контурный текст характерен тем, что каждая буква обводится линией, цвет которой отличается от цвета текста (рис. 2). Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.

Рис. 2. Контурный текст

Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.

Пример 1. Контурный текст

Kontur matni

Ushbu usul bilan tuzilgan kontur rasmda ko'rsatilgan. 1. Kontur biroz loyqa bo'lib chiqadi, shuning uchun aniq chiziq olishni istaganlar uchun ikkinchi usul mo'ljallangan. U bir xil rangdagi to'rtta o'tkir soyadan foydalanishdan iborat bo'lib, ular bir pikselga turli burchaklarga o'tkaziladi (2-misol).

Misol 2. Kontur uchun to'rtta soya

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Kontur matni

Bunday konturning ko'rinishi rasmda ko'rsatilgan. 3. Konturning ifodaliroq ekanligi seziladi.

Guruch. 3. To'rtta soya bilan kontur

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

Guruch. 4. 3D matn

Shaxsan, bu turdagi matn menga retro uslubidagi harflarni eslatadi va yana, u veb-sahifaning asosiy qismi emas, balki sarlavhalar uchun eng mos keladi.

Soyalar soni matnni qanchalik oldinga "tortish" istayotganingizga bog'liq. Kattaroq raqam harflarning "chuqurligini" oshiradi, kichikroq raqam, aksincha, uch o'lchamlilikni pasaytiradi. 3-misolda bir xil rangdagi beshta soya ishlatiladi.

3-misol: Uch o'lchamlilikni qo'shish uchun soya

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

O'n kamerali muzlatgich

Barcha soyalar uchun biz loyqalik radiusini nolga va bir xil rangga o'rnatamiz. Soyalar faqat ofset qiymatlarida farqlanadi.

Matnni bo'rttirish

Matnni bo'rttirish effektini yoki boshqacha aytganda, relyefni yaratish uchun matn rangi fon rangiga mos kelishi kerak. Harflarning sirt ustida "chiqadigan" bir qismi yoritilganga o'xshaydi, boshqa qismi esa soyada (5-rasm).

Guruch. 5. Naqshli matn

Shunga o'xshash effektni qo'shish uchun bizga ikkita soya kerak bo'ladi - biz oq soyani chapga bir pikselga, quyuq kulrangni esa o'ngga siljitamiz (4-misol).

4-misol: Naqshli 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, extruded matn emas, balki bosish oson; shunchaki soya ranglarini almashtiring.

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

Yorqin

Matn atrofidagi yorug'lik bir xil soya, faqat u yorqin va qarama-qarshidir. Shunday qilib, porlash effektini yaratish uchun faqat soya rangini o'zgartiring va kerakli loyqalik radiusini o'rnating. Matn atrofidagi yorug'lik bir xil bo'lishi kerakligi sababli, soyaning siljishi nolga teng bo'lishi kerak. Shaklda. 6-rasmda turli xil ranglarda porlash misoli ko'rsatilgan.

Guruch. 6. Yorqin matn

Misol 5. Yorqinlik

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Yorug 'tomoni

Qorong'u tomoni

Xiralashtirish

Soyaning o'zi xiralashgan, shuning uchun agar biz faqat soyani qoldirib, matnning o'zini yashirsak, biz loyqa harflarga ega bo'lamiz (7-rasm) va loyqalik darajasini matn-soya parametri yordamida osongina sozlash mumkin.

Guruch. 7. Xiralashgan matn

Asl matnni yashirish uchun rangni shaffof qilib qo'yish kifoya (6-misol). Keyin soya rangi matn rangi vazifasini bajaradi va loyqalik radiusi harflarning loyqalanish darajasini belgilaydi.

6-misol: Matnni xiralashtirish

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Xiralashgan matn

Soya va psevdo-sinflar

Soyani toʻgʻridan-toʻgʻri matnga qoʻshish shart emas; matn-soya xususiyati :hover va :birinchi harf psevdo-sinflari bilan yaxshi oʻynaydi. Shu sababli, matn bilan qiziqarli effektlar olinadi, masalan, paragrafning konturlangan birinchi harfi yoki sichqoncha kursorini uning ustiga olib borganingizda havolaning porlashi. 7-misolda bunday texnikalar ko'rsatilgan.

7-misol: Pseudo-klasslardan foydalanish

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Niche loyihasi xarajatlardan qat'i nazar, an'anaviy kanalni sekinlashtiradi. Bozor tuzilishi, tafsilotlardan voz kechib, oldingi kampaniyalar tajribasidan foydalangan holda marketing va savdo bo'limini barqarorlashtiradi. Tovar qurilishi, albatta, o'z-o'zidan konvergent PRni itarib yuboradi va bozor segmentida g'alaba qozonadi. Investitsiyalar ijtimoiy maqomning rolini sinxronlashtiradi, raqobatni oshiradi. Brend tabiiy ravishda avvalgi kampaniyalar tajribasidan foydalanib, joylashtirish rejasini belgilaydi.

Tipografiya veb-dizaynerlarning sevimli o'yinchoqidir. CSS juda qiziqarli vositaga ega - matn soyasi(matn soyasi), bu birinchi qarashda juda oddiy ko'rinadi, ammo uning yordami bilan siz zukkolik va tasavvurdan foydalansangiz, unutilmas effektlarni yaratishingiz mumkin.

Soya asoslari

Mulk matn soyasi foydalanish juda oson. U barcha zamonaviy brauzerlar tomonidan va hatto prefikslardan foydalanmasdan ham qo'llab-quvvatlanadi. Ammo IEda (hatto IE9da ham) qo'llab-quvvatlash yo'q. IE ning eski versiyalarida ham CSS3 effektlarini chiqarishga yordam berish uchun Modernizr kabi vositalardan foydalanishingiz mumkin.

Sintaksis

Matn soyasini yaratish uchun xususiyat sintaksisidan foydalaning matn soyasi qaysi quyida berilgan. Aniqlash uchun to'rtta parametr mavjud: birinchi ikkitasi soyaning o'rnini, uchinchisi loyqalik darajasini, to'rtinchisi esa soyaning rangini belgilaydi.

Matn-soya: gorizontal_offset vertical_offset xira rang;

Quyida ikki piksel pastga va to'rt piksel o'ngga ofset qilingan, uch pikselga xiralashgan va 30% shaffoflikda qora rangga o'rnatilgan matn soyasining misoli keltirilgan.

Matn-soya: 2px 4px 3px rgba(0,0,0,0,3);

Ushbu xususiyatdan foydalanish natijasi quyidagicha ko'rinadi:

Nima uchun rgba ishlatiladi?

Xususiyatni belgilashda soya rangini belgilash uchun rgba dan foydalanish shart emas. Biroq, rgba soyani belgilashda yana bir o'lchovni qo'shadi - shaffoflik darajasi.

Bu usul rangni aniqlashning boshqa usullariga qaraganda ancha sodda. Soya rangining soyasini aniqlashga e'tibor qaratishingiz shart emas, u faqat fon rangidan bir oz quyuqroq yoki engilroq bo'lishi mumkin. Rgba yordamida siz shunchaki oq yoki qora ranglardan foydalanishingiz va ranglarni aralashtirishda kerakli fon rangiga erishish uchun ularning shaffofligini oshirishingiz mumkin.

Mulkdan foydalanish matn soyasi Siz oddiy soyalar bilan cheklanib qolmasdan, matn uchun turli effektlarni yaratishingiz mumkin. Misol uchun, bu erda tushkun matnning illyuziyasini yaratish uchun kod.

Avval siz matn rangini fon rangidan bir oz quyuqroq o'rnatishingiz kerak. Va keyin siz mulkdan foydalanishingiz kerak matn soyasi oq rang va oshkoralik bilan.

Fon rangi #222 va matn rangi 60% shaffoflikka o'rnatiladi. Oq soya 10% shaffoflik darajasi bilan bir oz pastga va o'ngga joylashtirilgan.

Asosiy (fon: #222; ) #matn h1 (rang: rgba(0,0,0,0,6); matn soyasi: 2px 2px 3px rgba(255,255,255,0.1); )

Soyani umuman xiralashtirishning hojati yo'q. Aniq soya veb-sayt dizayni bilan yaxshi mos kelishi mumkin.

Matn-soya: 6px 6px 0px rgba(0,0,0,0,2);

Haqiqiy o'yin-kulgi faqat bitta soyaga ega bo'lish cheklovini tashlaganingizda boshlanadi. Ta'riflarni ajratish uchun verguldan foydalanib, kerakli soyalardan foydalanishingiz mumkin!

Matn-soya: soya1, soya2, soya3;

Bu erda ikkita soyadan foydalanishga misol. Birinchisi fon bilan bir xil rangga ega.

Matn-soya: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

Uzoq masofadan pastga siljish

Bir nechta soyalardan foydalanishni o'rganganingizdan so'ng, natijalar yanada dramatik bo'ladi. Matn uchun 3D effekt yaratish juda oson.

Misolda to'rtta soya ishlatiladi, ularning barchasi turli masofalarda pastga siljiydi va loyqalanadi.

Matn soyasi: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,01) );

Kichik masofani pastga siljiting va qattiq xiralashtiring

Mana xuddi shu fikrning yana bir mujassamlanishi. Uchta soya kichikroq masofaga siljiydi va yanada xiralashgan.

Matn-soya: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);

Mark Dotto tomonidan 3D matn

Effekt MarkDotto.com veb-saytida qo'llaniladi. U ajoyib 3D effektini yaratish uchun 12 xil soyadan foydalanadi.

Matn soyasi: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0) ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

Gordon Xoll tomonidan chizilgan matn

Yuqoridagi misolga e'tibor bering, men o'z texnikamni "tez va iflos" harf effekti deb atadim. Buning sababi, ishonchliroq bo'lgan jiddiy kiritilgan matnni yaratishning yanada qiziqarli usuli bor.

Gordon nafaqat tashqi soyani, balki haqiqiy ichki soyani ham olish uchun jiddiy CSS vududan foydalanadi. Texnikani to'liq tushuntirish uchun uning blog postiga qarang.

Fon rangi: #666666; -webkit-fon-klip: matn; -moz-fon-klip: matn; fon klipi: matn; rang: shaffof; matn soyasi: rgba (255,255,255,0.5) 0px 3px 3px;

Yorqin

Matn-soya: 0px 0px 6px rgba(255,255,255,0.7);

Matn soyasi: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

Ko'p yorug'lik manbalari

Matn-soya: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);

Rang: rgba (0,0,0,0,6); matn soyasi: 2px 8px 6px rgba (0,0,0,0.2), 0px -5px 35px rgba (255,255,255,0.3);

Xulosa

Ko'pgina CSS effektlari singari, soyalarni ham amalga oshirish juda oson. Ammo oddiy harakatlar kombinatsiyasi ajoyib ta'sirga olib kelishi mumkin.

Veb-sahifani bezashning yana bir usuli - CSS-da soyali matn yaratish. Ushbu uslubdan to'g'ri foydalanish bilan siz sarlavha, paragraf yoki matnning bir qismini muvaffaqiyatli ajratib ko'rsatishingiz mumkin. Siz soya rangini, ofsetni va xiralashtirishni sozlashingiz mumkin.

Internet Explorer 9 va undan oldingi versiyalaridan tashqari barcha brauzerlar tomonidan qo'llab-quvvatlanadigan matn soya xususiyatidan foydalangan holda CSS-da matn soyasini o'rnatishingiz mumkin. Opera Mini bilan bog'liq muammolar ham mavjud - bu brauzer xususiyatni faqat qisman qo'llab-quvvatlaydi. Quyida yozuv uslubi va xususiyat qiymatlariga misol keltirilgan:

H1 (matn soyasi: 3px 5px 6px #6C9; )

Ko'rib turganingizdek, biz bo'sh joy bilan ajratilgan to'rtta qiymatni belgiladik. Keling, uni tartibda ko'rib chiqaylik:

• 3px - birinchi qiymat soyaning X o'qi (o'ng, chap) bo'ylab siljishi uchun javobgardir. Ijobiy qiymat soyani o'ngga, salbiy qiymat esa soyani chapga siljitadi.
• 5px - ikkinchi qiymat Y o'qi bo'ylab soyaning siljishi uchun javobgardir (pastga, yuqoriga). Ijobiy qiymat soyani pastga siljitadi va salbiy qiymat soyani yuqoriga siljitadi.
• 6px - uchinchi qiymat soyaning xiralashishi radiusi uchun javobgardir. Ushbu parametr ixtiyoriy. Odatiy bo'lib, loyqalik 0 piksel bo'lib, bu soyani aniq va loyqasiz qiladi.
• # 6c9 - to'rtinchi qiymat soyaning rangi uchun javobgardir. Ushbu parametr ixtiyoriy. Odatiy bo'lib, soya rangi uslub qo'llaniladigan matn bilan bir xil rangga o'rnatiladi.

Brauzerda soya qanday ko'rinishga ega (skrinshot):

Skrinshot: soyali matn, CSS

Matn uchun bir nechta CSS soyalari

Matn-soya xususiyati uchun bir nechta qiymatlar guruhidan foydalanish ham mumkin. Bu bitta matn uchun bir nechta soyalarni o'rnatishingiz mumkinligini anglatadi. Buning uchun siz vergul bilan ajratilgan qiymatlar guruhlarini yozishingiz kerak.

H1 (matn soyasi: 3px 5px 6px #6C9, -6px -7px 6px #D9FFA7; )

Ushbu uslubni qo'llash natijasi skrinshotda ko'rinadi:

Skrinshot: CSS matni uchun bir nechta soyalar

CSS text-shadow xususiyati bilan chindan ham chiroyli narsalarni yaratishingiz mumkin. Siz tajriba qilishingiz mumkin: ko'p sonli turli xil soyalarni o'rnating, shaffoflikni sozlash uchun alfa kanalidan foydalanib, rangni nafaqat o'n oltilik, balki RGBA formatida ham o'rnating. Agar siz ushbu mulkka etarlicha e'tibor qaratsangiz, shunday bo'lishi mumkin:

Skrinshot: CSS-dagi 3D matn soyasi