Čak i najzeleniji dizajner zna kako napraviti sjene u Photoshopu. Sjene dodaju dimenziju dizajnu i sada su vrlo popularne. Sjene za tekstove, stavke menija i naslove nisu izuzetak. Dovoljno je prisjetiti se dizajna Appleovih interfejsa

Bit će korisno imati vještine rada sa sjenama teksta u svom arsenalu tehnika.

Zadatak

Napravite sjenu za tekst koristeći CSS, bez korištenja slika. Šta ćemo ovim postići?

• fleksibilnost - slike nisu potrebne, tekst se lako mijenja
• brzina - manje slika - manja težina stranice, manje poziva serveru
• SEO - tekst je optimizovan bolje od slika, i pouzdaniji je od upotrebe tehnike zamene teksta slikom

Sjene teksta za normalne pretraživače

Normalni pretraživači uključuju sve moderne pretraživače koji su manje-više u korak sa preporukama W3C-a. U ovom slučaju, ovi pretraživači razumiju svojstvo CSS3 text-shadow, koje je preporučeno još 2003. godine.

Dakle, evo liste pretraživača koji podržavaju svojstvo text-shadow:

• Safari 3.1 (Mac/Win) - podržava, ne podržava više senki
• Safari 4 (Mac/Win) - potpuno podržan
• Opera 9.5+ (Mac/Win/Lin) - u potpunosti podržava
• Firefox 3.1/3.5 (Mac/Win/Lin) - u potpunosti podržava
• Google Chrome 2 (Win) - potpuno podržan
• Shiira (Mac) - podržava, ne podržava više senki
• Konqueror (Lin/Mac/Win) - u potpunosti podržava
• iCab (Mac) - podržava, ne podržava više senki
• Safari na iPhoneu - podržano, više sjena nije podržano
• Nokia Symbian-pametni telefoni (Serija 60) - podržava
• Opera Mini 4.1 - podržava, ne podržava zamućenje senki

Za ove pretraživače, jedan red CSS-a je dovoljan da zasenči tekst:

H1 (sjena teksta: 0px 1px 3px #000; )

Dobijamo ovaj otmjeni naslov:

Možete postići razne zanimljive efekte sa senkom teksta.

Zamućen tekst

H1 ( boja: #fff; pozadina: #666; sjena teksta: 0px 0px 3px #fff; )

Duplikat teksta

H1 (sjena teksta: 0px 20px #000; )

Više senki vam omogućava da postignete još nekoliko efekata:

Uvučen tekst

H1 (pozadina: #ccc; boja: #ccc; sjena teksta: -1px -1px #666, 1px 1px #FFF; porodica fontova: serif; )

Podignuti tekst

H1 (pozadina: #999; boja: #999; sjena teksta: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; porodica fontova: serif; )

(IE vam neće dozvoliti da uživate u lepoti ovde, jer ne podržava text-shadow). Možete smisliti mnogo različitih efekata koristeći text-shadow, jedino praktično ograničenje je vaša mašta.

Sada o tužnoj stvari - šta učiniti sa svima "omiljenim" IE?

Sjene teksta u IE

Iako IE do verzije 8 ne razumije sjenku teksta, ima dosta vlastitih „zvona i zviždaljki“. Konkretno, postoji filter dropShadow() za kreiranje senki. Da bi se sjene pojavile, element mora imati postavljen raspored. Možete instalirati na nekoliko načina:

• postavljanjem svojstava elementa: blok + visina() ili širina())
• dajući element: apsolutni
• navođenjem: lijevo/desno
• podešavanje zuma: 1

H1 ( filter:progid:DXImageTransform.Microsoft.DropShadow(color="#666666",offX=2,offY=2,positive="true"); zoom: 1; )

Činilo se da se može viknuti "Ura!!!" i uživajte u životu, ali pogledajte kako ovaj filter radi u stvarnosti:

Ovako će se tekst pojaviti ako na njega primijenite dropShadow filter

Za one koji ne razumiju, evo nedostataka ovog filtera:

• sjena izgleda užasno: ugaona, nema glatkog prijelaza u pozadinu s prozirnošću
• stil fonta je izobličen
• sjenu je praktički nemoguće podesiti (možete kontrolirati samo položaj sjene) - to se može djelomično zaobići korištenjem filtera sjene umjesto dropShadow, ali kritična prva dva nedostatka ostaju
• obavezno prisustvo izgleda donekle ograničava programera

Ovaj rezultat nije prihvatljiv u stvarnim projektima. Nejasno je ko je i kako preuzeo takav posao od programera.

Kilian Valkhof je predložio korištenje emulacije sjene:

1. nemojte primjenjivati ​​filter direktno na tekst
2. koristite kombinaciju filtera sjaja i zamućenja umjesto dropShadow i shadow

Ovo će izbjeći izobličenje teksta i učiniti sjenu fleksibilnijom.

Test headerТестовый заголовок

H1 ( senka teksta: 3px 3px 3px #cccccc; pozicija: relativna; zum: 1; boja: #000; ) h1 raspon (pozicija: apsolutna; levo: -3px; vrh: -3px; z-indeks: -1; filter: progid:DXImageTransform.Microsoft.Glow(Color=#cccccc,Strength=1) progid:DXImageTransform.Microsoft.blur(pixelradius=3, enabled="true") ; zoom: 1; )

Ali čak i uz ovaj pristup, još uvijek postoji niz nedostataka:

• nesemantički kod je dodatni element, pa čak ni uz dupliciranje teksta neće imati najbolji učinak na logičku strukturu sadržaja i SEO optimizaciju. Ovaj problem se može riješiti korištenjem javascripta, koji će umetnuti dodatni element za IE kada se stranica učita
• ne odgovara prikazu u drugim pretraživačima (koji razumeju senku teksta) - filteri vam omogućavaju da emulirate senku sa minimalnim podešavanjima. Nije uvijek moguće postići sličnost u sjeni sa drugim pretraživačima
• manja fleksibilnost - filteri neće pružiti sve mogućnosti sjene teksta, na primjer, neće biti moguće implementirati više sjena

Za kreiranje senki za IE, možete koristiti javascript (nije prvi put da je javascript spasio dan)

Tekstualne sjene koristeći javascript

Od skripti koje sam testirao, izabrao sam jquery dodatak "Drop Shadow". Njegove prednosti:

• emulira senke umetanjem više kontejnera, tj. bez korištenja filtera za IE. Ovo omogućava da senke u IE-u budu što sličnije drugim pretraživačima + nema potrebe da brinete o izgledu za IE
• stvara senke ne samo za IE, što ponekad može biti korisno
• skripta je lagana - 4Kb (ako uklonite komentare iz koda), a ako primijenite kompresiju, bit će još manje. Postoje zahtjevi za pisanje skripte - prisustvo skripte jquery.dimensions.js, ali još uvijek ne razumijem zašto je to potrebno. Sjene se kreiraju, brišu, definiraju id-om i bez njega.
• jednostavan i jasan za upotrebu
• Možete emulirati više sjenki s određenim uspjehom

Nedostaci:

• ne možete inicijalizirati skriptu po ID-u elementa
• ako je elementu data pozadina, sjena će biti kreirana ne za tekst, već za element u cjelini
• Obavezno uključivanje jquery biblioteke (koja je veća od 50Kb). Ali popularnost jqueryja praktično eliminiše ovaj nedostatak
• Prema opisu skripte, potrebna je i veza jquery.dimensions.js (još 2Kb). Ali ne razumijem zašto je potrebna ova biblioteka, čini se da sve dobro funkcionira i bez nje

Korištenje dodatka Drop Shadow

sintaksa:

JQuery(selektor).dropShadow(opcije); // kreiranje sjene na elementu jQuery(selector).redrawShadow(); // ponovno crtanje sjene jQuery(selector).removeShadow(); // uklanjanje sjene jQuery(selector).shadowId(); // vraća id sjene elementa

Lijevo: [cijeli broj] (zadano = 4) vrh: [cijeli broj] (zadano = 4) zamućenje: [cijeli broj] (zadano = 2) neprozirnost: [razlomak] (zadano = 0,5) boja: [niz] (zadano = " crno") swap: [boolean] (zadano = netačno)

Lijevi i gornji parametri su koordinate početka sjene u odnosu na gornji lijevi ugao naljepnice (ili objekta). Pozitivne vrednosti pomeraju senku udesno i dole, negativne vrednosti pomeraju senku ulevo i gore.

CSS svojstvo text-shadow je odgovorno za postavljanje sjene teksta. Vrlo slično svojstvu box-shadow.

CSS sintaksa sjene teksta

text-shadow : X Y R boja ;

• X - pomak sjene u odnosu na tekst duž X ose (najčešće se postavlja u px pikselima);
• Y - pomak sjene u odnosu na tekst duž Y ose (najčešće se postavlja u px pikselima);
• R - polumjer sjene (najčešće specificiran u px pikselima);
• boja - boja (može se navesti u bilo kojem formatu, pogledajte html nazive boja)

Sintaksa text-shadow dozvoljava da se specificira više senki, odvojenih zarezima. Na primjer

text-shadow : X1 Y1 R1 boja1 , X2 Y2 R2 boja2 , ...;

Prioritet senke (koji je veći, koji je niži) zavisi od specifične CSS verzije. U CSS3, prva senka na listi se nalazi na samom vrhu, a poslednja na listi je na samom dnu. U CSS2 je suprotno.

Primjeri: kako napraviti sjenu za tekst u html-u

Primjer br. 1. Jednostavna senka za tekst u html-u

Ispod je najjednostavniji primjer sa sjenkom teksta. Ovdje smo primijenili oba pomaka (X i Y) i također napravili radijus zamućenja.

Текст с тенью

Текст с тенью

Пример №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. Контурный текст

Okvirni tekst

Kontura napravljena ovom metodom prikazana je na Sl. 1. Ispada da je obris malo zamagljen, pa je za one koji žele dobiti jasnu liniju namijenjena druga metoda. Sastoji se od korištenja četiri oštre sjene iste boje, koje su pomaknute u različite kutove za jedan piksel (primjer 2).

Primjer 2. Četiri sjene za obris

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Okvirni tekst

Izgled takve konture prikazan je na Sl. 3. Primjetno je da je kontura izražajnija.

Rice. 3. Kontura sa četiri sjene

Da biste dodali 3D tekstualni efekat prikazan na sl. 4, istovremeno se primjenjuje nekoliko sjenki, koje su pomaknute jedna u odnosu na drugu za jedan piksel horizontalno i vertikalno.

Rice. 4. 3D tekst

Lično, ova vrsta teksta me podsjeća na slova u retro stilu i, opet, najprikladnija je za naslove, a ne za tijelo web stranice.

Broj senki zavisi od toga koliko želite da „povučete“ tekst unapred. Veći broj povećava "dubinu" slova, manji broj, naprotiv, smanjuje trodimenzionalnost. Primjer 3 koristi pet sjenki iste boje.

Primjer 3: Sjena za dodavanje trodimenzionalnosti

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Frižider sa deset komora

Za sve sjene postavljamo radijus zamućenja na nulu i istu boju. Sjene se razlikuju samo po vrijednostima pomaka.

Utiskivanje teksta

Za stvaranje efekta utiskivanja teksta ili, drugim riječima, reljefa, boja teksta mora odgovarati boji pozadine. Čini se da je jedan dio slova koji “štrči” iznad površine osvijetljen, dok je drugi dio u sjeni (sl. 5).

Rice. 5. Reljefni tekst

Da bismo dodali sličan efekat, potrebne su nam dvije sjene - bijelu sjenu pomjerimo ulijevo za jedan piksel, a tamno sivu dolje udesno (primjer 4).

Primjer 4: Reljefni tekst

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Reljefni tekst

Reljef najbolje izgleda na sivoj pozadini, tako da efekat nije prikladan za svaku shemu boja stranice. Usput, lako je pritisnuti umjesto ekstrudiranog teksta; samo zamijenite boje sjene.

Sjena teksta: #333 -1px -1px 0, #fff 1px 1px 0;

Sjaj

Sjaj oko teksta je ista senka, samo što je svetao i kontrastan. Stoga, da biste stvorili efekt sjaja, samo promijenite boju sjene i postavite željeni radijus zamućenja. Budući da bi sjaj oko teksta trebao biti ujednačen, pomak sjene bi trebao biti postavljen na nulu. Na sl. Na slici 6 prikazan je primjer sjaja u različitim bojama.

Rice. 6. Sjajni tekst

Primjer 5. Sjaj

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Svijetla strana

Tamna strana

Zamućenje

Sama senka je zamućena, pa ako ostavimo samo senku i sakrijemo sam tekst, dobićemo mutna slova (slika 7), a stepen zamućenja se lako može podesiti pomoću parametra text-shadow.

Rice. 7. Tekst sa zamućenjem

Da biste sakrili originalni tekst, samo postavite boju na transparentnu (primjer 6). Boja senke tada deluje kao boja teksta, a radijus zamućenja postavlja stepen zamućenja slova.

Primjer 6: Zamućenje teksta

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Zamućen tekst

Sjena i pseudo-klase

Sjena ne mora biti dodana direktno u tekst; svojstvo text-shadow se lijepo poigrava s :hover i :first-letter pseudoklasama. Zbog toga se uz tekst dobijaju zanimljivi efekti, kao što je konturirano prvo slovo pasusa ili sjaj veze kada pređete kursorom miša preko njega. Primjer 7 pokazuje takve tehnike.

Primjer 7: Korištenje pseudo-klasa

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Niche projekat usporava tradicionalni kanal, bez obzira na troškove. Tržišna struktura, odbacujući detalje, stabilizira odjel marketinga i prodaje, koristeći iskustvo prethodnih kampanja. Izgradnja brenda, naravno, spontano potiskuje konvergentni PR, osvajajući tržišni segment. Investicija sinhronizuje ulogu društvenog statusa, povećavajući konkurenciju. Brend prirodno određuje plan plasmana, koristeći iskustvo prethodnih kampanja.

Tipografija je omiljena igračka web dizajnera. CSS ima jedan veoma zanimljiv alat - text-shadow(sjena teksta), koji na prvi pogled izgleda prilično jednostavan, ali uz njegovu pomoć možete stvoriti nezaboravne efekte ako koristite domišljatost i maštu.

Shadow Basics

Nekretnina text-shadow vrlo jednostavan za korištenje. Podržavaju ga svi moderni pretraživači, pa čak i bez upotrebe prefiksa. Ali nema podrške u IE (čak ni u IE9). Možete koristiti alate kao što je Modernizr da pomognete izvlačenju CSS3 efekata čak i na starijim verzijama IE.

Sintaksa

Za kreiranje sjene teksta koristite sintaksu svojstva text-shadow koji je dat u nastavku. Postoje četiri parametra za definisanje: prva dva postavljaju položaj senke, treći postavlja nivo zamućenja, a četvrti određuje boju senke.

Sjena teksta: horizontal_offset vertical_offset boja zamućenja;

Ispod je primjer sjene teksta koja je pomaknuta dva piksela naniže i četiri piksela udesno, zamućena za tri piksela i postavljena na crnu pri 30% neprozirnosti.

Sjena teksta: 2px 4px 3px rgba(0,0,0,0.3);

Rezultat korištenja ovog svojstva izgledat će ovako:

Zašto se koristi rgba?

Ne morate koristiti rgba da navedete boju sjene kada definirate svojstvo. Međutim, rgba dodaje još jednu dimenziju kada definiše senku - nivo transparentnosti.

Ova metoda je mnogo jednostavnija od ostalih metoda određivanja boje. Ne morate se fokusirati na određivanje nijanse boje sjene, koja može biti samo malo tamnija ili svjetlija od boje pozadine. Uz rgba, možete jednostavno koristiti bijelu ili crnu boju i povećati njihovu neprozirnost kako biste postigli željenu boju pozadine prilikom miješanja boja.

Korištenje imovine text-shadow Možete kreirati različite efekte za tekst, ne ograničavajući se na jednostavne padajuće sjene. Na primjer, evo koda za stvaranje iluzije depresivnog teksta.

Prvo morate postaviti boju teksta malo tamniju od boje pozadine. A onda morate koristiti imovinu text-shadow bijele boje i povećane prozirnosti.

Boja pozadine je #222, a boja teksta je postavljena na 60% neprozirnosti. Bijela senka je pozicionirana malo dole i desno sa nivoom neprozirnosti od 10%.

Tijelo (pozadina: #222; ) #text h1 (boja: rgba(0,0,0,0.6); sjena teksta: 2px 2px 3px rgba(255,255,255,0.1); )

Nema potrebe za zamagljivanjem senke uopšte. Jasna sjena može dobro ići uz dizajn web stranice.

Sjena teksta: 6px 6px 0px rgba(0,0,0,0.2);

Prava zabava počinje kada odbacite ograničenje da imate samo jednu sjenu. Koristeći zarez za razdvajanje definicija, možete koristiti onoliko sjenki koliko vam je potrebno!

Text-shadow: shadow1, shadow2, shadow3;

Evo primjera korištenja dvije sjene. Prvi ima istu boju kao i pozadina.

Sjena teksta: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

Pomak na daljinu naniže

Jednom kada se naučite koristiti više sjenki, rezultati će postati sve dramatičniji. Vrlo je lako stvoriti 3D efekat za tekst.

Primjer koristi četiri sjene, sve pomaknute prema dolje na različitim udaljenostima i zamućene.

Sjena teksta: 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,1,0 );

Pomaknite se na malu udaljenost i jako zamutite

Evo još jedne inkarnacije iste ideje. Tri sjene su pomaknute na manju udaljenost i više su zamućene.

Sjena teksta: 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);

3D tekst Marka Dota

Efekat se koristi na web stranici MarkDotto.com. Koristi 12 različitih sjenki za stvaranje sjajnog 3D efekta.

Sjena teksta: 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);

Uvučen tekst Gordona Hola

Primijetite da sam u gornjem primjeru svoju tehniku ​​nazvao "brzi i prljavi" efekt visokog tiska. To je zato što postoji mnogo složeniji način za stvaranje nekog ozbiljno umetnutog teksta koji je mnogo vjerodostojniji.

Gordon koristi ozbiljan CSS vudu kako bi izvukao ne samo vanjsku senku već i pravu unutrašnju senku. Pogledajte njegov blog post za potpuno objašnjenje tehnike.

Boja pozadine: #666666; -webkit-background-clip: tekst; -moz-background-clip: tekst; background-clip: tekst; boja: transparentna; text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

Sjaj

Sjena teksta: 0px 0px 6px rgba(255,255,255,0.7);

Sjena teksta: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

Više izvora svjetlosti

Sjena teksta: 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);

Boja: rgba(0,0,0,0.6); text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

Zaključak

Kao i većina CSS efekata, senke je veoma lako implementirati. Ali kombinacija jednostavnih radnji može rezultirati nevjerojatnim efektima.

Drugi način da ukrasite web stranicu je da napravite tekst sa sjenom u CSS-u. Uz pravilnu upotrebu ovog stila, možete uspješno istaknuti naslov, pasus ili dio teksta. Možete podesiti boju sjene, pomak i zamućenje.

Možete postaviti sjenku teksta u CSS-u koristeći svojstvo text-shadow, koje podržavaju svi pretraživači osim Internet Explorer verzije 9 i ranije. Postoje i problemi sa Opera Mini - ovaj pretraživač samo djelimično podržava svojstvo. Ispod je primjer stila pisanja i vrijednosti svojstava:

H1 (sjena teksta: 3px 5px 6px #6C9; )

Kao što vidite, naveli smo čak četiri vrijednosti odvojene razmakom. Prođimo kroz to redom:

• 3px – prva vrijednost je odgovorna za pomak sjene duž X ose (desno, lijevo). Pozitivna vrijednost pomiče senku udesno, a negativna vrednost pomera senku ulevo.
• 5px – druga vrijednost je odgovorna za pomak sjene duž Y ose (dolje, gore). Pozitivna vrijednost pomiče senku dole, a negativna vrednost pomera senku gore.
• 6px – treća vrijednost je odgovorna za radijus zamućenja sjene. Ovaj parametar nije obavezan. Podrazumevano, zamućenje je 0 piksela, što čini senku jasnom i nezamućenom.
• #6c9 – četvrta vrijednost je odgovorna za boju sjene. Ovaj parametar nije obavezan. Prema zadanim postavkama, boja sjene je postavljena na istu boju kao i tekst na koji je stil primijenjen.

Kako izgleda senka u pretraživaču (snimak ekrana):

Snimak ekrana: tekst sa sjenom, CSS

Višestruke CSS sjene za tekst

Također je moguće koristiti više grupa vrijednosti za svojstvo text-shadow. To znači da možete postaviti više senki za jedan tekst. Da biste to učinili, morate napisati grupe vrijednosti odvojene zarezima.

H1 (sjena teksta: 3px 5px 6px #6C9, -6px -7px 6px #D9FFA7; )

Rezultat primjene ovog stila vidljiv je na snimku ekrana:

Snimak ekrana: Više senki za CSS tekst

Možete kreirati neke zaista lijepe stvari sa svojstvom CSS text-shadow. Možete eksperimentisati: postavite veliki broj različitih senki, podesite boju ne samo u heksadecimalnom, već iu RGBA formatu, koristeći alfa kanal za podešavanje transparentnosti. Evo šta se može dogoditi ako ovoj nekretnini posvetite dovoljno pažnje:

Snimak ekrana: 3D sjena teksta u CSS-u