Tudi najbolj zeleni oblikovalec ve, kako narediti sence v Photoshopu. Sence dodajo dimenzijo oblikovanju in so zdaj zelo priljubljene. Sence za besedila, elemente menija in naslove niso izjema. Dovolj je, da se spomnimo zasnove vmesnikov iz jabolka

Koristno bo imeti veščine dela z besedilnimi sencami v svojem arzenalu tehnik.

Naloga

Naredite senco za besedilo s pomočjo CSS, brez uporabe slik. Kaj bomo s tem dosegli?

• prilagodljivost - slike niso potrebne, besedilo je enostavno spremeniti
• hitrost - manj slik - manjša teža strani, manj klicev na strežnik
• SEO - besedilo je optimizirano bolje kot slike in bolj zanesljivo kot uporaba tehnike zamenjave besedila s sliko

Sence besedila za običajne brskalnike

Običajni brskalniki vključujejo vse sodobne brskalnike, ki bolj ali manj sledijo priporočilom W3C. V tem primeru ti brskalniki razumejo lastnost text-shadow CSS3, ki je bila priporočena že leta 2003.

Torej, tukaj je seznam brskalnikov, ki podpirajo lastnost text-shadow:

• Safari 3.1 (Mac/Win) - podpira, ne podpira več senc
• Safari 4 (Mac/Win) - v celoti podprt
• Opera 9.5+ (Mac/Win/Lin) - v celoti podpira
• Firefox 3.1/3.5 (Mac/Win/Lin) - v celoti podpira
• Google Chrome 2 (Win) - v celoti podprt
• Shiira (Mac) - podpira, ne podpira več senc
• Konqueror (Lin/Mac/Win) - v celoti podpira
• iCab (Mac) - podpira, ne podpira več senc
• Safari na iPhone - podprto, več senc ni podprto
• Pametni telefoni Nokia Symbian (serija 60) - podpira
• Opera Mini 4.1 - podpira, ne podpira zamegljenosti senc

Za te brskalnike je ena vrstica CSS dovolj za senčenje besedila:

H1 (senca besedila: 0px 1px 3px #000;)

Dobimo ta čudovit naslov:

S senco besedila lahko dosežete vrsto zanimivih učinkov.

Zamegljeno besedilo

H1 (barva: #fff; ozadje: #666; senca besedila: 0px 0px 3px #fff; )

Podvojeno besedilo

H1 (senca besedila: 0px 20px #000;)

Več senc vam omogoča, da dosežete več učinkov:

Vdolbino besedilo

H1 (ozadje: #ccc; barva: #ccc; senca besedila: -1px -1px #666, 1px 1px #FFF; družina pisav: serif; )

Dvignjeno besedilo

H1 (ozadje: #999; barva: #999; senca besedila: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; družina pisav: serif; )

(IE vam ne bo dovolil, da uživate v lepoti tukaj, ker ne podpira text-shadow). S senco besedila lahko ustvarite veliko različnih učinkov, edina praktična omejitev je vaša domišljija.

Zdaj pa o žalostnem - kaj storiti z "najljubšim" IE?

Sence besedila v IE

Čeprav IE do različice 8 ne razume text-shadowa, ima veliko lastnih "zvončkov in piščalk". Zlasti obstaja filter dropShadow() za ustvarjanje senc. Da se pojavijo sence, mora imeti element nastavljeno postavitev. Namestitev lahko izvedete na več načinov:

• z nastavitvijo lastnosti elementa: blok + višina() ali širina())
• podajanje elementa : absolutno
• z določitvijo: levo/desno
• nastavitev povečave: 1

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

Zdelo se je, da bi lahko zavpil "Ura!!!" in uživajte v življenju, ampak poglejte, kako ta filter deluje v resnici:

Tako bo prikazano besedilo, če nanj uporabite filter dropShadow

Za tiste, ki ne razumejo, so slabosti tega filtra:

• senca izgleda grozno: kotna, brez gladkega prehoda v ozadje s prosojnostjo
• slog pisave je popačen
• sence je praktično nemogoče prilagoditi (nadzirate lahko samo položaj sence) - temu se lahko delno izognete z uporabo senčnega filtra namesto dropShadow, vendar kritični prvi dve pomanjkljivosti ostajata
• obvezna prisotnost postavitve nekoliko omejuje razvijalca

Ta rezultat ni sprejemljiv v realnih projektih. Ni jasno, kdo in kako je prevzel takšno delo od razvijalcev.

Kilian Valkhof je predlagal uporabo emulacije senc:

1. filtra ne uporabite neposredno na besedilu
2. uporabite kombinacijo filtrov za sij in zamegljenost namesto dropShadow in shadow

Tako se boste izognili popačenju besedila in naredili senco bolj prožno.

Testna glavaТестовый заголовок

H1 (senca besedila: 3px 3px 3px #cccccc; položaj: relativno; povečava: 1; barva: #000; ) razpon h1 (položaj: absolutno; levo: -3px; zgoraj: -3px; z-indeks: -1; filter: progid:DXImageTransform.Microsoft.Glow(Color=#cccccc,Strength=1) progid:DXImageTransform.Microsoft.blur(pixelradius=3, enabled="true") ; povečava: 1; )

Toda tudi pri tem pristopu še vedno obstajajo številne pomanjkljivosti:

• nesemantična koda je dodaten element in tudi s podvajanjem besedila ne bo najbolje vplivala na logično strukturo vsebine in SEO optimizacijo. To težavo je mogoče rešiti z javascriptom, ki bo vstavil dodaten element za IE, ko se stran naloži
• ne ustreza prikazu v drugih brskalnikih (ki razumejo besedilno senco) - filtri vam omogočajo posnemanje sence z minimalnimi nastavitvami. Ni vedno mogoče doseči podobnosti senc z drugimi brskalniki
• manjša prilagodljivost - filtri ne bodo zagotavljali vseh zmožnosti sence besedila, na primer ne bo mogoče implementirati več senc

Če želite ustvariti sence za IE, lahko uporabite javascript (ni prvič, da je javascript rešil dan)

Sence besedila z uporabo javascripta

Izmed skriptov, ki sem jih preizkusil, sem izbral vtičnik jquery "Drop Shadow". Njegove prednosti:

• emulira sence tako, da vstavi več vsebnikov, tj. brez uporabe filtrov za IE. To omogoča, da so sence v IE čim bolj podobne drugim brskalnikom + ni vam treba skrbeti za postavitev za IE
• ustvarja sence ne samo za IE, kar je včasih lahko koristno
• skript je lahek - 4Kb (če odstranite komentarje iz kode), če pa uporabite stiskanje, bo še manj. Pri pisanju skripta obstajajo zahteve - prisotnost skripta jquery.dimensions.js, vendar še vedno ne razumem, zakaj je to potrebno. Sence se ustvarjajo, brišejo, definirajo z id-jem in brez njega.
• enostaven in jasen za uporabo
• Z nekaj uspeha lahko posnemate več senc

Napake:

• ne morete inicializirati skripta z ID-jem elementa
• če ima element ozadje, se senca ne bo ustvarila za besedilo, ampak za element kot celoto
• Obvezna vključitev knjižnice jquery (ki je večja od 50 Kb). Toda priljubljenost jquery praktično odpravi to pomanjkljivost
• Po opisu skripte je potrebna tudi povezava jquery.dimensions.js (še 2Kb). Ampak ne razumem, zakaj je ta knjižnica potrebna, zdi se, da brez nje vse deluje dobro

Uporaba vtičnika Drop Shadow

Sintaksa:

JQuery(izbirnik).dropShadow(možnosti); // ustvarjanje sence na elementu jQuery(selector).redrawShadow(); // ponovno risanje sence jQuery(selector).removeShadow(); // odstranjevanje sence jQuery(selector).shadowId(); // vrne ID sence elementa

Levo: [celo število] (privzeto = 4) zgoraj: [celo število] (privzeto = 4) zamegljenost: [celo število] (privzeto = 2) motnost: [delno število] (privzeto = 0,5) barva: [niz] (privzeto = " black") zamenjava: [boolean] (privzeto = false)

Levi in ​​zgornji parameter sta koordinati začetka sence glede na zgornji levi kot oznake (ali predmeta). Pozitivne vrednosti premaknejo senco v desno in navzdol, negativne vrednosti premaknejo senco v levo in navzgor.

Lastnost CSS text-shadow je odgovorna za nastavitev sence besedila. Zelo podobno lastnosti box-shadow.

Sintaksa sence besedila CSS

text-shadow : barva X Y R ;

• X - premik sence glede na besedilo vzdolž osi X (najpogosteje nastavljeno v slikovnih pikah px);
• Y - premik sence glede na besedilo vzdolž osi Y (najpogosteje nastavljeno v slikovnih pikah px);
• R - radij sence (najpogosteje naveden v slikovnih pikah px);
• barva - barva (lahko se določi v kateri koli obliki, glejte html imena barv)

Sintaksa text-shadow omogoča določanje več senc, ločenih z vejicami. Na primer

text-shadow : X1 Y1 R1 barva1 , X2 Y2 R2 barva2 , ...;

Prioriteta sence (katera je višja, katera nižja) je odvisna od specifične različice CSS. V CSS3 je prva senca na seznamu postavljena na sam vrh, zadnja na seznamu pa na čisto dno. V CSS2 je ravno nasprotno.

Primeri: kako narediti senco za besedilo v html

Primer št. 1. Preprosta senca za besedilo v html

Spodaj je najpreprostejši primer s senco besedila. Tukaj smo uporabili oba odmika (X in Y) in naredili tudi polmer zameglitve.

Текст с тенью

Текст с тенью

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

Oris besedila

Kontura, izdelana s to metodo, je prikazana na sl. 1. Obris se izkaže za rahlo zamegljen, zato je za tiste, ki želijo dobiti jasno črto, namenjena druga metoda. Sestoji iz uporabe štirih ostrih senc iste barve, ki so premaknjene v različne kote za en piksel (primer 2).

Primer 2. Štiri sence za obris

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Oris besedila

Videz takšne konture je prikazan na sl. 3. Opazno je, da je kontura bolj izrazita.

riž. 3. Kontura s štirimi sencami

Če želite dodati učinek 3D besedila, prikazan na sl. 4 se hkrati uporablja več senc, ki se med seboj premaknejo za en piksel vodoravno in navpično.

riž. 4. 3D besedilo

Osebno me ta vrsta besedila spominja na črke v retro slogu in je še enkrat najbolj primerna za naslove in ne za telo spletne strani.

Število senc je odvisno od tega, koliko želite "potegniti" besedilo naprej. Večje število poveča "globino" črk, manjše število, nasprotno, zmanjša tridimenzionalnost. Primer 3 uporablja pet senc iste barve.

Primer 3: Senca za dodajanje tridimenzionalnosti

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Desetkomorni hladilnik

Za vse sence nastavimo polmer zameglitve na nič in enako barvo. Sence se razlikujejo le po vrednostih odmika.

Vtiskovanje besedila

Za ustvarjanje učinka reliefa besedila ali, z drugimi besedami, reliefa, se mora barva besedila ujemati z barvo ozadja. En del črk, ki »štrli« nad površino, se zdi osvetljen, drugi del pa je v senci (slika 5).

riž. 5. Reliefno besedilo

Za podoben učinek potrebujemo dve senci - belo senco premaknemo za en piksel navzgor v levo, temno sivo pa navzdol v desno (primer 4).

Primer 4: Reliefno besedilo

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Reliefno besedilo

Relief najbolje izgleda na sivi podlagi, zato učinek ni primeren za vsako barvno shemo mesta. Mimogrede, enostavno je dobiti stisnjeno namesto ekstrudirano besedilo; samo zamenjajte barve senc.

Senca besedila: #333 -1px -1px 0, #fff 1px 1px 0;

Sijaj

Sijaj okoli besedila je enaka senca, le da je svetel in kontrasten. Če želite ustvariti učinek sijaja, samo spremenite barvo sence in nastavite želeni polmer zamegljenosti. Ker mora biti sij okoli besedila enakomeren, mora biti odmik sence nastavljen na nič. Na sl. Slika 6 prikazuje primer svetenja v različnih barvah.

riž. 6. Svetleče besedilo

Primer 5. Sijaj

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Svetla stran

Temna stran

Zameglitev

Sama senca je zamegljena, tako da, če pustimo samo senco in skrijemo samo besedilo, dobimo zamegljene črke (slika 7), stopnjo zamegljenosti pa lahko enostavno prilagodimo s parametrom text-shadow.

riž. 7. Besedilo z zameglitvijo

Če želite skriti izvirno besedilo, nastavite barvo na prozorno (primer 6). Barva sence nato deluje kot barva besedila, polmer zameglitve pa nastavi stopnjo zameglitve črk.

Primer 6: zameglitev besedila

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Zamegljeno besedilo

Senčni in psevdorazredi

Sence ni treba dodati neposredno v besedilo; lastnost text-shadow se lepo ujema s psevdorazredoma :hover in :first-letter. Zaradi tega se z besedilom dobijo zanimivi učinki, kot je konturirana prva črka odstavka ali sijaj povezave, ko nad njo premaknete kazalec miške. Primer 7 prikazuje takšne tehnike.

Primer 7: Uporaba psevdorazredov

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Nišni projekt upočasni tradicionalni kanal, ne glede na stroške. Tržna struktura, brez podrobnosti, stabilizira marketinško-prodajni oddelek z uporabo izkušenj prejšnjih kampanj. Gradnja blagovne znamke seveda spontano odrine konvergentni PR in osvoji tržni segment. Naložbe sinhronizirajo družbeni status vloge in povečujejo konkurenco. Blagovna znamka seveda določa umestitveni načrt, pri čemer uporablja izkušnje prejšnjih kampanj.

Tipografija je najljubša igrača spletnih oblikovalcev. CSS ima eno zelo zanimivo orodje - tekst-senca(senčenje besedila), ki se na prvi pogled zdi povsem preprosto, vendar z iznajdljivostjo in domišljijo lahko z njegovo pomočjo ustvarite nepozabne učinke.

Osnove senc

Lastnina tekst-senca zelo enostaven za uporabo. Podpirajo ga vsi sodobni brskalniki in tudi brez uporabe predpon. Toda v IE ni podpore (tudi v IE9). Z orodji, kot je Modernizr, lahko pomagate izvleči učinke CSS3 tudi v starejših različicah IE.

Sintaksa

Če želite ustvariti senco besedila, uporabite sintakso lastnosti tekst-senca ki je podan spodaj. Določiti je treba štiri parametre: prva dva določata položaj sence, tretji določa stopnjo zamegljenosti, četrti pa določa barvo sence.

Text-shadow: horizontal_offset vertical_offset barva zameglitve;

Spodaj je primer sence besedila, ki je zamaknjena za dve slikovni piki navzdol in štiri slikovne pike v desno, zamegljena za tri slikovne pike in nastavljena na črno pri 30-odstotni motnosti.

Senca besedila: 2px 4px 3px rgba(0,0,0,0.3);

Rezultat uporabe te lastnosti bo videti takole:

Zakaj se uporablja rgba?

Za določitev barve sence pri definiranju lastnosti vam ni treba uporabiti rgba. Vendar pa rgba pri definiranju sence doda še eno dimenzijo - raven prosojnosti.

Ta metoda je veliko enostavnejša od drugih metod določanja barve. Ni vam treba osredotočati na določanje odtenka barve sence, ki je lahko le nekoliko temnejša ali svetlejša od barve ozadja. Z rgba lahko preprosto uporabite belo ali črno in povečate njuno motnost, da dosežete želeno barvo ozadja pri mešanju barv.

Uporaba lastnine tekst-senca Za besedilo lahko ustvarite različne učinke, ki niso omejeni na preproste padajoče sence. Tukaj je na primer koda za ustvarjanje iluzije depresivnega besedila.

Najprej morate nastaviti barvo besedila nekoliko temnejšo od barve ozadja. In potem morate lastnino uporabiti tekst-senca z belo barvo in povečano prosojnostjo.

Barva ozadja je #222, barva besedila pa je nastavljena na 60 % motnosti. Bela senca je postavljena rahlo navzdol in v desno s stopnjo motnosti 10%.

Telo (ozadje: #222;) #besedilo h1 (barva: rgba(0,0,0,0.6); senca besedila: 2px 2px 3px rgba(255,255,255,0.1); )

Sploh ni treba zamegliti sence. Jasna senca se lahko dobro poda k oblikovanju spletnega mesta.

Senca besedila: 6px 6px 0px rgba(0,0,0,0.2);

Prava zabava se začne, ko zavržeš omejitev, da imaš samo eno senco. Z uporabo vejice za ločevanje definicij lahko uporabite toliko senc, kot jih potrebujete!

Text-shadow: senca1, senca2, senca3;

Tukaj je primer uporabe dveh senc. Prvi ima enako barvo kot ozadje.

Senca besedila: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

Premik navzdol na dolge razdalje

Ko se enkrat naučite uporabljati več senc, bodo rezultati postajali vedno bolj dramatični. Zelo enostavno je ustvariti 3D učinek za besedilo.

Primer uporablja štiri sence, vse pomaknjene navzdol na različne razdalje in zamegljene.

Senca besedila: 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) );

Premaknite se malo navzdol in močno zameglite

Tukaj je še ena inkarnacija iste ideje. Tri sence so premaknjene na manjšo razdaljo in so bolj zamegljene.

Senca besedila: 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 besedilo Marka Dottoja

Učinek je uporabljen na spletni strani MarkDotto.com. Uporablja 12 različnih senc za ustvarjanje odličnega 3D učinka.

Senca besedila: 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);

Zamaknjeno besedilo Gordona Halla

Upoštevajte, da sem v zgornjem primeru svojo tehniko poimenoval "hiter in umazan" učinek visokega tiska. To je zato, ker obstaja veliko bolj zapleten način za ustvarjanje resno vstavljenega besedila, ki je veliko bolj verodostojno.

Gordon uporablja nekaj resnega vuduja CSS, da odstrani ne samo zunanjo senco, ampak tudi pravo notranjo senco. Oglejte si njegovo objavo v blogu za popolno razlago tehnike.

Barva ozadja: #666666; -webkit-background-clip: besedilo; -moz-background-clip: besedilo; ozadje-posnetek: besedilo; barva: prozorna; senca besedila: rgba(255,255,255,0.5) 0px 3px 3px;

Sijaj

Senca besedila: 0px 0px 6px rgba(255,255,255,0.7);

Senca besedila: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

Več virov svetlobe

Senca besedila: 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);

Barva: rgba(0,0,0,0.6); senca besedila: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

Zaključek

Tako kot večino učinkov CSS je tudi sence zelo enostavno implementirati. Toda kombinacija preprostih dejanj lahko povzroči osupljive učinke.

Drug način za okrasitev spletne strani je ustvarjanje besedila s senco v CSS. S pravilno uporabo tega sloga lahko uspešno označite naslov, odstavek ali del besedila. Prilagodite lahko barvo sence, odmik in zameglitev.

V CSS lahko nastavite senco besedila z lastnostjo text-shadow, ki jo podpirajo vsi brskalniki razen Internet Explorerja različice 9 in starejših. Težave so tudi z Opera Mini - ta brskalnik le delno podpira lastnost. Spodaj je primer pisnega sloga in vrednosti lastnosti:

H1 (senca besedila: 3px 5px 6px #6C9; )

Kot lahko vidite, smo določili kar štiri vrednosti, ločene s presledkom. Pojdimo skozi to po vrsti:

• 3px – prva vrednost je odgovorna za odmik sence vzdolž osi X (desno, levo). Pozitivna vrednost premakne senco v desno, negativna vrednost pa v levo.
• 5px – druga vrednost je odgovorna za odmik sence vzdolž osi Y (dol, gor). Pozitivna vrednost premakne senco navzdol, negativna vrednost pa navzgor.
• 6px – tretja vrednost je odgovorna za polmer zameglitve sence. Ta parameter ni obvezen. Privzeto je zameglitev 0 slikovnih pik, zaradi česar je senca jasna in nezamegljena.
• #6c9 – četrta vrednost je odgovorna za barvo sence. Ta parameter ni obvezen. Privzeto je barva sence nastavljena na isto barvo kot besedilo, na katerega je uporabljen slog.

Kako izgleda senca v brskalniku (posnetek zaslona):

Posnetek zaslona: besedilo s senco, CSS

Več senc CSS za besedilo

Za lastnost text-shadow je mogoče uporabiti tudi več skupin vrednosti. To pomeni, da lahko nastavite več senc za eno besedilo. Če želite to narediti, morate napisati skupine vrednosti, ločene z vejicami.

H1 (senca besedila: 3px 5px 6px #6C9, -6px -7px 6px #D9FFA7; )

Rezultat uporabe tega sloga je viden na posnetku zaslona:

Posnetek zaslona: več senc za besedilo CSS

Z lastnostjo CSS text-shadow lahko ustvarite nekaj res čudovitih stvari. Lahko eksperimentirate: nastavite veliko število različnih senc, nastavite barvo ne le v šestnajstiški obliki, temveč tudi v formatu RGBA, z alfa kanalom prilagodite prosojnost. To se lahko zgodi, če tej lastnosti posvetite dovolj pozornosti:

Posnetek zaslona: senca 3D besedila v CSS