Čak i najzeleniji dizajner zna napraviti sjene u Photoshopu. Sjene dodaju dimenziju dizajnu i sada su vrlo popularne. Sjene za tekstove, stavke izbornika i naslove nisu iznimka. Dovoljno je prisjetiti se dizajna sučelja iz Applea

Bit će korisno imati vještine rada s tekstualnim sjenama u svom arsenalu tehnika.

Zadatak

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

• fleksibilnost - slike nisu potrebne, tekst se lako mijenja
• brzina - manje slika - manja težina stranice, manje poziva poslužitelju
• SEO - tekst je optimiziran bolje od slika, te je pouzdaniji od korištenja tehnike zamjene teksta slikom

Sjene teksta za normalne preglednike

Normalni preglednici uključuju sve moderne preglednike koji više ili manje slijede preporuke W3C-a. U ovom slučaju, ovi preglednici razumiju CSS3 svojstvo text-shadow, koje je preporučeno još 2003. godine.

Dakle, ovdje je popis preglednika koji podržavaju svojstvo text-shadow:

• Safari 3.1 (Mac/Win) - podržava, ne podržava višestruke sjene
• 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) - potpuno podržava
• Google Chrome 2 (Win) - potpuno podržan
• Shiira (Mac) - podržava, ne podržava višestruke sjene
• Konqueror (Lin/Mac/Win) - u potpunosti podržava
• iCab (Mac) - podržava, ne podržava višestruke sjene
• Safari na iPhoneu - podržano, višestruke sjene nisu podržane
• Nokia Symbian pametni telefoni (serija 60) - podržava
• Opera Mini 4.1 - podržava, ne podržava zamućivanje sjene

Za ove preglednike dovoljan je jedan redak CSS-a da zasjeni tekst:

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

Dobili smo ovaj otmjeni naslov:

Pomoću sjene teksta možete postići razne zanimljive efekte.

Zamagljen tekst

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

Duplicirani tekst

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

Višestruke sjene omogućuju vam postizanje još nekoliko učinaka:

Udubljeni tekst

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

Izdignuti tekst

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

(IE vam neće dopustiti da ovdje uživate u ljepoti, jer ne podržava text-shadow). Možete smisliti mnogo različitih efekata pomoću tekstualne sjene, jedino praktično ograničenje je vaša mašta.

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

Sjene teksta u IE

Iako IE do verzije 8 ne razumije text-shadow, ima dosta vlastitih "zvona i zviždaljki". Konkretno, postoji filter dropShadow() za stvaranje sjena. Da bi se pojavile sjene, element mora imati postavljen raspored. Možete instalirati na nekoliko načina:

• postavljanjem svojstava elementa: block + height() ili width())
• dajući element : apsolut
• određivanjem: lijevo/desno
• podešavanje zuma: 1

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

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

Ovako će tekst izgledati ako na njega primijenite dropShadow filter

Za one koji ne razumiju, evo nedostataka ovog filtera:

• sjena izgleda užasno: kutna, bez glatkog prijelaza u pozadinu s prozirnošću
• stil fonta je iskrivljen
• sjenu je praktički nemoguće prilagoditi (možete kontrolirati samo položaj sjene) - to se može djelomično zaobići upotrebom filtra sjene umjesto dropShadowa, ali kritična prva dva nedostatka ostaju
• obvezna prisutnost izgleda donekle ograničava programera

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

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

1. nemojte primjenjivati ​​filtar izravno na tekst
2. koristite kombinaciju filtara sjaja i zamućenja umjesto dropShadowa i sjene

Time ćete izbjeći izobličenje teksta i učiniti sjenu fleksibilnijom.

Ispitno zaglavljeТестовый заголовок

H1 (text-shadow: 3px 3px 3px #cccccc; položaj: relativan; zum: 1; boja: #000; ) h1 raspon (položaj: apsolutni; lijevo: -3px; gore: -3px; z-indeks: -1; filter: progid:DXImageTransform.Microsoft.Glow(Color=#cccccc,Strength=1) progid:DXImageTransform.Microsoft.blur(pixelradius=3, enabled="true") ; zumiranje: 1; )

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

• nesemantički kod je dodatni element, a čak ni s dupliciranjem teksta neće najbolje utjecati na logičku strukturu sadržaja i SEO optimizaciju. Ovaj problem se može riješiti pomoću javascripta, koji će umetnuti dodatni element za IE kada se stranica učita
• ne odgovara prikazu u drugim preglednicima (koji razumiju tekstualnu sjenu) - filtri vam omogućuju emulaciju sjene s minimalnim postavkama. Nije uvijek moguće postići sličnost sjena s drugim preglednicima
• manja fleksibilnost - filtri neće pružiti sve mogućnosti tekstualne sjene, na primjer, neće biti moguće implementirati višestruke sjene

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

Sjene teksta pomoću javascripta

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

• emulira sjene umetanjem više spremnika, tj. bez korištenja filtera za IE. To omogućuje da sjene u IE budu što sličnije drugim preglednicima + nema potrebe da brinete o izgledu za IE
• stvara sjene 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 - prisutnost skripte jquery.dimensions.js, ali još uvijek ne razumijem zašto je potrebna. Sjene se stvaraju, brišu, definiraju ID-om i bez njega.
• jednostavan i jasan za korištenje
• Možete emulirati više sjena s određenim uspjehom

Mane:

• ne možete inicijalizirati skriptu ID-om elementa
• ako je elementu dana pozadina, sjena se neće stvoriti za tekst, već za element kao cjelinu
• Obavezno uključivanje jquery biblioteke (koja je veća od 50 Kb). Ali popularnost jqueryja praktički eliminira ovaj nedostatak
• Prema opisu skripte, također je potrebna veza jquery.dimensions.js (još 2Kb). Ali ne razumijem zašto je ova biblioteka potrebna, čini se da sve dobro radi bez nje

Korištenje dodatka Drop Shadow

Sintaksa:

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

Lijevo: [cijeli broj] (zadano = 4) gore: [cijeli broj] (zadano = 4) zamućenje: [cijeli broj] (zadano = 2) neprozirnost: [frakcijski broj] (zadano = 0,5) boja: [niz] (zadano = " crno") zamjena: [boolean] (zadano = netočno)

Lijevi i gornji parametri su koordinate početka sjene u odnosu na gornji lijevi kut oznake (ili objekta). Pozitivne vrijednosti pomiču sjenu udesno i dolje, negativne vrijednosti pomiču sjenu ulijevo i gore.

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

CSS tekst-sjena sintaksa

text-shadow : X Y R boja ;

• X - pomak sjene u odnosu na tekst duž X osi (najčešće se postavlja u px pikselima);
• Y - pomak sjene u odnosu na tekst duž Y osi (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 tekstualne sjene dopušta navođenje više sjena, odvojenih zarezima. Na primjer

tekst-sjena : X1 Y1 R1 boja1 , X2 Y2 R2 boja2 , ...;

Prioritet sjene (što je više, što niže) ovisi o specifičnoj verziji CSS-a. U CSS3, prva sjena na listi je postavljena na sam vrh, posljednja na listi je postavljena na samo dno. U CSS2 je suprotno.

Primjeri: kako napraviti sjenu za tekst u html-u

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

Ispod je najjednostavniji primjer sa sjenom teksta. Ovdje smo primijenili oba pomaka (X i Y) i 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. Контурный текст

Struktura teksta

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

Struktura teksta

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

Riža. 3. Kontura s četiri sjene

Za dodavanje efekta 3D teksta prikazanog na sl. 4, istovremeno se primjenjuje nekoliko sjena, koje su pomaknute jedna u odnosu na drugu za jedan piksel vodoravno i okomito.

Riža. 4. 3D tekst

Osobno me ova vrsta teksta podsjeća na retro stil slova i, opet, najprikladnija je za naslove, a ne za tijelo web stranice.

Broj sjena ovisi o tome koliko želite "povući" tekst naprijed. Veći broj povećava "dubinu" slova, manji broj, naprotiv, smanjuje trodimenzionalnost. Primjer 3 koristi pet sjena iste boje.

Primjer 3: Sjena za dodavanje trodimenzionalnosti

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Hladnjak sa deset komora

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

Utiskivanje teksta

Da biste stvorili učinak reljefa teksta ili, drugim riječima, reljefa, boja teksta mora odgovarati boji pozadine. Jedan dio slova koji “strši” iznad površine izgleda kao da je osvijetljen, dok je drugi dio u sjeni (sl. 5).

Riža. 5. Reljefni tekst

Da bismo dodali sličan efekt, potrebne su nam dvije sjene - bijelu sjenu pomaknemo gore 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 efekt nije prikladan za svaku shemu boja web mjesta. Usput, lako je dobiti pritisnuti umjesto ekstrudirani tekst; samo zamijenite boje sjene.

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

Sjaj

Sjaj oko teksta je ista sjena, samo je svijetla i kontrastna. Dakle, 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 trebao bi biti postavljen na nulu. Na sl. Slika 6 prikazuje primjer svijetljenja u različitim bojama.

Riža. 6. Sjajni tekst

Primjer 5. Sjaj

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Svijetla strana

Tamna strana

Zamutiti

Sama sjena je zamućena, pa ako ostavimo samo sjenu i sakrijemo sam tekst, dobit ćemo zamućena slova (slika 7), a stupanj zamućenja se lako podešava pomoću parametra text-shadow.

Riža. 7. Tekst sa zamućenjem

Da biste sakrili izvorni tekst, samo postavite boju na prozirnu (primjer 6). Boja sjene tada djeluje kao boja teksta, a radijus zamućenja postavlja stupanj zamućenja slova.

Primjer 6: Zamućivanje teksta

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Zamagljen tekst

Sjene i pseudo-klase

Sjena se ne mora dodati izravno u tekst; svojstvo text-shadow dobro se poigrava s pseudoklasama :hover i :first-letter. Zbog toga se s tekstom postižu zanimljivi efekti, kao što je konturirano prvo slovo odlomka ili sjaj poveznice kada iznad nje prijeđete pokazivačem miša. Primjer 7 prikazuje takve tehnike.

Primjer 7: Korištenje pseudo-klasa

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Nišni projekt usporava tradicionalni kanal, bez obzira na troškove. Struktura tržišta, 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. Ulaganje sinkronizira društveni status uloge, 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 vrlo zanimljiv alat - tekst-sjena(sjena teksta), koji se na prvi pogled čini prilično jednostavnim, ali uz njegovu pomoć možete stvoriti nezaboravne efekte ako koristite domišljatost i maštu.

Osnove sjene

Vlasništvo tekst-sjena vrlo jednostavan za korištenje. Podržavaju ga svi moderni preglednici, čak i bez upotrebe prefiksa. Ali nema podrške u IE (čak ni u IE9). Možete koristiti alate kao što je Modernizr za pomoć pri izvlačenju CSS3 efekata čak i na starijim verzijama IE-a.

Sintaksa

Za stvaranje sjene teksta upotrijebite sintaksu svojstva tekst-sjena koji je dat u nastavku. Postoje četiri parametra za definiranje: prva dva postavljaju položaj sjene, treći postavlja razinu zamućenja, a četvrti određuje boju sjene.

Text-shadow: horizontal_offset vertical_offset boja zamućenja;

Ispod je primjer sjene teksta koja je pomaknuta dva piksela prema dolje i četiri piksela udesno, zamućena za tri piksela i postavljena na crno na 30% neprozirnosti.

Tekst-sjena: 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 za određivanje boje sjene prilikom definiranja svojstva. Međutim, rgba dodaje još jednu dimenziju pri definiranju sjene - razinu transparentnosti.

Ova metoda je puno jednostavnija od drugih metoda određivanja boje. Ne morate se usredotočiti 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 i povećati njihovu neprozirnost kako biste postigli željenu boju pozadine prilikom miješanja boja.

Korištenje imovine tekst-sjena Možete stvoriti različite efekte za tekst, ne ograničavajući se na jednostavne sjene. Na primjer, ovdje je kod za stvaranje iluzije depresivnog teksta.

Prvo morate postaviti boju teksta malo tamniju od boje pozadine. A onda trebate koristiti nekretninu tekst-sjena bijele boje i povećane prozirnosti.

Boja pozadine je #222, a boja teksta postavljena je na 60% neprozirnosti. Bijela sjena je postavljena malo prema dolje i udesno s razinom neprozirnosti od 10%.

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

Uopće nije potrebno zamutiti sjenu. Jasna sjena može dobro pristajati uz dizajn web stranice.

Tekst-sjena: 6px 6px 0px rgba(0,0,0,0.2);

Prava zabava počinje kada odbacite ograničenje posjedovanja samo jedne sjene. Korištenjem zareza za odvajanje definicija, možete koristiti onoliko sjena koliko vam je potrebno!

Tekst-sjena: sjena1, sjena2, sjena3;

Evo primjera korištenja dviju sjena. Prvi ima istu boju kao i pozadina.

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

Pomak prema dolje na velikoj udaljenosti

Nakon što se naučite koristiti višestruke sjene, rezultati će postajati sve dramatičniji. Vrlo je jednostavno stvoriti 3D efekt 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,0,0,0.1) );

Pomaknite se malo prema dolje i snažno zamutite

Evo još jedne inkarnacije iste ideje. Tri sjene pomaknute su 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 Mark Dotto

Efekt se koristi na web stranici MarkDotto.com. Koristi 12 različitih sjena 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čeni tekst Gordona Halla

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

Gordon koristi ozbiljan CSS vudu kako bi izvukao ne samo vanjsku sjenu, već i pravu unutarnju sjenu. Pogledajte njegov post na blogu za potpuno objašnjenje tehnike.

Boja pozadine: #666666; -webkit-background-clip: tekst; -moz-background-clip: tekst; pozadina-isječak: tekst; boja: prozirna; tekst-sjena: rgba(255,255,255,0.5) 0px 3px 3px;

Sjaj

Tekst-sjena: 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); tekst-sjena: 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, sjene je vrlo lako implementirati. Ali kombinacija jednostavnih radnji može rezultirati nevjerojatnim učincima.

Još jedan način da ukrasite web stranicu je da napravite tekst sa sjenom u CSS-u. Ispravnom upotrebom ovog stila možete uspješno istaknuti naslov, odlomak ili dio teksta. Možete prilagoditi boju sjene, pomak i zamućenje.

Sjenku teksta možete postaviti u CSS-u koristeći svojstvo text-shadow, koje podržavaju svi preglednici osim Internet Explorera verzije 9 i starijih. Također postoje problemi s Opera Mini - ovaj preglednik samo djelomič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 osi (desno, lijevo). Pozitivna vrijednost pomiče sjenu udesno, a negativna vrijednost pomiče sjenu ulijevo.
• 5px – druga vrijednost je odgovorna za pomak sjene duž Y osi (dolje, gore). Pozitivna vrijednost pomiče sjenu prema dolje, a negativna vrijednost pomiče sjenu prema gore.
• 6px – treća vrijednost je odgovorna za radijus zamućenja sjene. Ovaj parametar nije obavezan. Prema zadanim postavkama, zamućenje je 0 piksela, što čini sjenu jasnom i nezamućenom.
• #6c9 – četvrta vrijednost je odgovorna za boju sjene. Ovaj parametar nije obavezan. Prema zadanim postavkama, boja sjene postavljena je na istu boju kao i tekst na koji se primjenjuje stil.

Kako sjena izgleda u pregledniku (snimka zaslona):

Snimka zaslona: 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 sjena za jedan tekst. Da biste to učinili, morate napisati grupe vrijednosti odvojene zarezima.

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

Rezultat primjene ovog stila vidljiv je na snimci zaslona:

Snimka zaslona: Višestruke sjene za CSS tekst

Možete stvoriti stvarno lijepe stvari sa svojstvom CSS text-shadow. Možete eksperimentirati: postaviti veliki broj različitih sjena, postaviti boju ne samo u heksadecimalnom, već iu RGBA formatu, koristeći alfa kanal za podešavanje prozirnosti. Evo što se može dogoditi ako ovoj nekretnini posvetite dovoljno pažnje:

Snimak zaslona: 3D sjena teksta u CSS-u