Typografia je moja obľúbená hračka, pokiaľ ide o webdizajn. Samozrejme, s jeho pomocou môžete upútať pozornosť osoby len miernou zmenou štýlu alebo veľkosti písma. Veľmi jednoduché a veľmi efektívne, na túto tému bolo napísaných veľa kníh a veľa kópií bolo rozbitých v sporoch. Dnes nebudem radiť o typografii všeobecne - nemám dostatočnú kvalifikáciu, ale ako navrhnúť text vašej webovej stránky je vždy vítané. Dnes vám teda ukážem niekoľko spôsobov, ako využiť vlastnosť CSS3. textový tieň, veľmi jednoduché, no v správnych rukách dokáže zázraky.

Základná syntax text-shadow

Táto nehnuteľnosť CSS3 Funguje vo všetkých najnovších prehliadačoch bez predpôn dodávateľov, ako sú -moz a -webkit. Dokonca aj IE sa dá naučiť porozumieť tejto vlastnosti; musíte použiť Modernizr alebo analógy.

Text-shadow: x-offset y-offset rozostrenie farby;

To je celá základná syntax. Prvá hodnota je horizontálny posun, druhá je vertikálny posun, rozostrenie tieňa a farba tieňa. Pozrime sa na príklad:

Text-shadow: 2px 4px 3px rgba(0,0,0,0,3);

Tieň sme posunuli, rozmazali o 3 pixely a priradili čiernej farbe s priehľadnosťou 30 %. Prečo používam alfa kanál alebo transparentnosť? To vám dáva väčšiu voľnosť vo vašich činnostiach; môžete ho trochu zosvetliť alebo stmaviť jednoduchou zmenou hodnoty priehľadnosti bez toho, aby ste sa museli starať o výber farby. Ukazuje sa to celkom rýchlo, odporúčam.

Depresívne písmená

telo ( pozadie: #222; ) #text h1 ( farba: rgba(0,0,0,0,6); tieň textu: 2px 2px 3px rgba(255,255,255,0,1); )

Princíp fungovania je tu tento: pozadie je o niečo svetlejšie ako písmená, svetlý tieň s miernou priehľadnosťou. Výsledok je na obrázku, vyskúšajte.

Tvrdý tieň

text-shadow: 6px 6px 0px rgba(0,0,0,0,2);

V súčasnosti je v móde retro štýl a tam sa používa tieň bez rozmazania. No, sme na to pripravení

Dvojitý tieň

text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0,15);

A tu sa využíva ďalšia záludná vlastnosť nehnuteľnosti textový tieň, selektory môžu byť uvedené oddelené čiarkami, čím sa vytvorí toľko tieňov, koľko je potrebné. Prvému tieňu je možné priradiť farbu podobnú pozadiu, potom bude efekt ako na obrázku.

Dole a preč

text-shadow: 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. );

Text je objemný a zdá sa, že visí nad pozadím, však? Tu používame 4 tiene s rôznou úrovňou rozostrenia a umiestnenia. Vo všeobecnosti platí, že čím viac tieňov je použitých, tým je efekt realistickejší, zohľadnite to vo svojich projektoch.

Malý 3D text

text-shadow: 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);

Podobne ako v predchádzajúcom príklade, tri tiene, ale umiestnené bližšie, preto efekt trojrozmernosti a váhy textu.

3D text od Marka Dotta

text-shadow: 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);

Našiel som prácu tohto dizajnéra online a nemohol som to nechať ujsť. Pôsobivý realizmus.

Odsadený text od Gordona Halla

farba pozadia: #666666; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; farba: transparentná; text-shadow: rgba(255,255,255,0,5) 0px 3px 3px;

Ďalší príklad pôsobivej práce s nehnuteľnosťou textový tieň. Ale princíp je rovnaký, ako som uviedol vyššie. Trochu svetlejšie pozadie, svetlý tieň pod písmenami a tmavý hore. Vyrobené jednoducho, ale veľmi cool.

Lesk text

text-shadow: 0px 0px 6px rgba(255,255,255,0,7);

Aj tu je všetko jednoduché - nehýbeme tieňom, rozmazávame ho silnejšie a robíme ho bielym. To je celý lesk.

Retro štýl

text-shadow: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

Vyššie som hovoril o retro štýle, toto je z tej istej opery. Teraz je to také módne, viacero jasných tieňov. Použite podľa vlastného uváženia

Viaceré svetelné zdroje

text-shadow: 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);

Tu je efekt viacerých svetelných zdrojov, ktoré vytvárajú tiene vo všetkých smeroch.

Zvýšený text

farba: 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);

Depresívny text tam už bol, ale teraz je zvýšený. Celkom jednoduchý efekt, ale napríklad v titulkoch vyzerá veľmi pekne. Použite, vyskúšajte

Na záver chcem povedať - Vlastnosť CSS3 text-shadow veľmi jednoduché, ako už môžete vidieť. Ale jeho správne použitie a s trochou fantázie dokáže zázraky.
Experimentujte, pekný deň

Aj ten najzelenší dizajnér vie robiť tiene vo Photoshope. Tiene dodávajú dizajnu rozmer a sú teraz veľmi obľúbené. Výnimkou nie sú ani tiene pre texty, položky menu a nadpisy. Stačí pripomenúť dizajn rozhraní od Apple

Bude užitočné mať zručnosti v práci s textovými tieňmi vo svojom arzenáli techník.

Úloha

Vytvorte tieň pre text pomocou CSS bez použitia obrázkov. Čo tým dosiahneme?

• flexibilita - nie sú potrebné žiadne obrázky, text sa ľahko mení
• rýchlosť – menej obrázkov – menšia váha stránky, menej hovorov na server
• SEO - text je optimalizovaný lepšie ako obrázky a je spoľahlivejší ako použitie techniky nahradenia textu obrázkom

Tiene textu pre bežné prehliadače

Normálne prehliadače zahŕňajú všetky moderné prehliadače, ktoré viac-menej držia krok s odporúčaniami W3C. V tomto prípade tieto prehliadače rozumejú vlastnosti CSS3 text-shadow, ktorá bola odporúčaná už v roku 2003.

Tu je zoznam prehliadačov, ktoré podporujú vlastnosť text-shadow:

• Safari 3.1 (Mac/Win) - podporuje, nepodporuje viaceré tiene
• Safari 4 (Mac/Win) – plne podporované
• Opera 9.5+ (Mac/Win/Lin) – plne podporuje
• Firefox 3.1/3.5 (Mac/Win/Lin) – plne podporuje
• Google Chrome 2 (Win) – plne podporovaný
• Shiira (Mac) - podporuje, nepodporuje viaceré tiene
• Konqueror (Lin/Mac/Win) - plne podporuje
• iCab (Mac) - podporuje, nepodporuje viacnásobné tiene
• Safari na iPhone – podporované, viaceré tiene nie sú podporované
• Nokia Symbian-Smartphone (Series 60) - podporuje
• Opera Mini 4.1 - podporuje, nepodporuje rozostrenie tieňov

Pre tieto prehliadače stačí jeden riadok CSS na tieňovanie textu:

H1 (text-shadow: 0px 1px 3px #000; )

Dostávame tento efektný nadpis:

Pomocou tieňa textu môžete dosiahnuť množstvo zaujímavých efektov.

Rozmazaný text

H1 ( farba: #fff; pozadie: #666; tieň textu: 0px 0px 3px #fff; )

Duplicitný text

H1 (text-shadow: 0px 20px #000; )

Viacnásobné tiene vám umožňujú dosiahnuť niekoľko ďalších efektov:

Zapustený text

H1 ( pozadie: #ccc; farba: #ccc; tieň textu: -1px -1px #666, 1px 1px #FFF; font-family: serif; )

Zvýšený text

H1 ( pozadie: #999; farba: #999; tieň textu: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; font-family: serif; )

(IE vám nedovolí vychutnať si tu krásu, pretože nepodporuje text-shadow). Pomocou text-shadow môžete vymyslieť množstvo rôznych efektov, jediným praktickým obmedzením je vaša predstavivosť.

Teraz o smutnej veci - čo robiť s „obľúbeným“ IE všetkých?

Tiene textu v IE

Hoci IE do verzie 8 nerozumie textovému tieňu, má množstvo vlastných „zvončekov a píšťaliek“. Ide najmä o filter dropShadow() na vytváranie tieňov. Aby sa tiene objavili, prvok musí mať nastavené rozloženie. Môžete nainštalovať niekoľkými spôsobmi:

• nastavením vlastností prvku: block + height() alebo width())
• dávajúci prvok : absolútny
• zadaním: vľavo/vpravo
• nastavenie zoomu: 1

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

Zdalo sa, že by sa dalo kričať „Hurá!!!“ a užívajte si život, ale pozrite sa, ako tento filter funguje v skutočnosti:

Takto bude text vyzerať, ak naň použijete filter dropShadow

Pre tých, ktorí nerozumejú, tu sú nevýhody tohto filtra:

• tieň vyzerá hrozne: hranatý, bez plynulého prechodu do pozadia s priesvitnosťou
• štýl písma je zdeformovaný
• tieň je prakticky nemožné nastaviť (môžete ovládať iba polohu tieňa) - to sa dá čiastočne obísť použitím tieňového filtra namiesto dropShadow, ale kritické prvé dve nevýhody zostávajú
• povinná prítomnosť rozloženia trochu obmedzuje vývojára

Tento výsledok je v reálnych projektoch neprijateľný. Nie je jasné, kto a ako prevzal takúto prácu od vývojárov.

Kilian Valkhof navrhol použiť tieňovú emuláciu:

1. neaplikujte filter priamo na text
2. namiesto dropShadow a shadow použite kombináciu filtrov žiara a rozostrenie

Vyhnete sa tak skresleniu textu a tieň bude flexibilnejší.

Testovacia hlavičkaТестовый заголовок

H1 ( text-shadow: 3px 3px 3px #cccccc; pozícia: relatívna; zoom: 1; farba: #000; ) rozpätie h1 ( pozícia: absolútna; vľavo: -3px; hore: -3px; z-index: -1; filter: progid:DXImageTransform.Microsoft.Glow(Color=#cccccc,Sila=1) progid:DXImageTransform.Microsoft.blur(pixelradius=3, enabled="true") ; priblíženie: 1; )

Ale aj s týmto prístupom stále existuje niekoľko nevýhod:

• nesémantický kód je prvok navyše a ani pri duplikácii textu to nebude mať najlepší vplyv na logickú štruktúru obsahu a SEO optimalizáciu. Tento problém je možné vyriešiť pomocou javascriptu, ktorý pri načítaní stránky vloží ďalší prvok pre IE
• nezodpovedá zobrazeniu v iných prehliadačoch (ktoré rozumejú text-shadow) - filtre umožňujú emulovať tieň s minimálnymi nastaveniami. Nie vždy je možné dosiahnuť podobnosť tieňov s inými prehliadačmi
• menšia flexibilita - filtre nebudú poskytovať všetky možnosti tieňovania textu, napríklad nebude možné implementovať viacero tieňov

Na vytvorenie tieňov pre IE môžete použiť javascript (nie je to prvýkrát, čo javascript zachránil deň)

Textové tiene pomocou javascriptu

Zo skriptov, ktoré som testoval, som si vybral plugin jquery „Drop Shadow“. Jeho výhody:

• emuluje tiene vložením viacerých kontajnerov, t.j. bez použitia filtrov pre IE. Vďaka tomu je možné vytvoriť tiene v IE čo najbližšie k iným prehliadačom + nie je potrebné sa starať o rozloženie pre IE
• vytvára tiene nielen pre IE, čo sa niekedy môže hodiť
• skript je ľahký - 4 kB (ak odstránite komentáre z kódu) a ak použijete kompresiu, bude to ešte menej. Existujú požiadavky na písanie skriptu - prítomnosť skriptu jquery.dimensions.js, ale stále nerozumiem, prečo je to potrebné. Tiene sa vytvárajú, odstraňujú, definujú pomocou id a bez neho.
• jednoduché a jasné použitie
• S určitým úspechom môžete emulovať viacero tieňov

nedostatky:

• nemôžete inicializovať skript podľa ID prvku
• ak je prvku priradené pozadie, tieň sa nevytvorí pre text, ale pre prvok ako celok
• Povinné zahrnutie knižnice jquery (ktorá má viac ako 50 Kb). Ale popularita jquery prakticky eliminuje túto nevýhodu
• Podľa popisu skriptu je potrebné aj pripojenie jquery.dimensions.js (ďalšie 2Kb). Ale nerozumiem, prečo je táto knižnica potrebná, zdá sa, že všetko funguje dobre aj bez nej

Pomocou doplnku Drop Shadow

Syntax:

JQuery(selektor).dropShadow(možnosti); // vytvorenie tieňa na prvku jQuery(selector).redrawShadow(); // prekreslenie tieňa jQuery(selector).removeShadow(); // odstránenie tieňa jQuery(selector).shadowId(); // vráti id tieňa prvku

Vľavo: [celé číslo] (predvolené = 4) hore: [celé číslo] (predvolené = 4) rozmazanie: [celé číslo] (predvolené = 2) nepriehľadnosť: [zlomkové číslo] (predvolené = 0,5) farba: [reťazec] (predvolené = " black") swap: [boolean] (predvolené = false)

Ľavé a horné parametre sú súradnice začiatku tieňa vzhľadom na ľavý horný roh štítku (alebo objektu). Kladné hodnoty posúvajú tieň doprava a nadol, záporné hodnoty posúvajú tieň doľava a nahor.

Vlad Merževič

Kedysi existovala určitá móda pre text s tieňmi a podobný efekt možno nájsť takmer na každej webovej stránke. V grafickom editore je pridanie tieňa jednoduché, vyzerá to skvele, tu je text s tieňom a vložený na webové stránky, bez ohľadu na štýl stránky a zmysel dizajnéra pre proporcie. Keď väčšina prehliadačov začala podporovať vlastnosť štýlu text-shadow, móda už prešla a teraz je text s tieňom pomerne zriedkavý. Text-shadow má však množstvo iných implicitných použití, o ktorých len málokto tuší. Pomocou tejto vlastnosti môžete vytvárať obrysový text, „vytláčať“ ho, vytvárať žiaru, rozmazávať a oveľa viac.

Použitie tieňa textu

Štyri parametre sú zapísané ako hodnoty: farba tieňa, horizontálne a vertikálne posunutie a polomer rozostrenia tieňa (obr. 1).

Ryža. 1. Parametre tieňa textu

Farba môže byť napísaná na začiatku alebo na konci všetkých parametrov v akomkoľvek vhodnom formáte CSS. Takže môžete vytvoriť priesvitný tieň pomocou formátu rgba. Pozitívne hodnoty posunu vrhajú tieň doprava a nadol, zatiaľ čo záporné hodnoty posunu vrhajú tieň doľava a nahor. Ak chcete mať okolo textu tieň, stačí nastaviť hodnoty posunu na nulu. Polomer rozostrenia určuje, aký ostrý bude tieň. Čím väčší je polomer rozmazania, tým jemnejší tieň vyzerá.

Veľkou výhodou text-shadow je možnosť pridať niekoľko rôznych tieňov naraz s uvedením ich parametrov oddelených čiarkami. Táto funkcia vám v podstate umožňuje vytvárať rôzne efekty.

Bohužiaľ, IE pred verziou 10.0 nepodporuje textový tieň, takže v tomto prehliadači neuvidíme žiadnu krásu.

Obrysový text je charakteristický tým, že každé písmeno je ohraničené čiarou, ktorej farba sa líši od farby textu (obr. 2). Tento efekt vyzerá najlepšie s veľkým písmom, ako sú nadpisy. V prípade hlavného textu použitie obrysu iba zhoršuje čitateľnosť.

Ryža. 2. Obrysový text

Obrys je možné vytvoriť dvoma spôsobmi. V prvej metóde sme nastavili nulový posun tieňa a malý polomer rozmazania, doslova 1-2 pixely (príklad 1). Zvýšením hodnoty rozostrenia sa obrys zmení na žiaru okolo textu, čo je iný efekt.

Príklad 1: Obrysový text

Obrysový text

Obrys vytvorený touto metódou je znázornený na obr. 1. Obrys sa ukáže byť mierne rozmazaný, takže pre tých, ktorí chcú získať jasnú čiaru, je určená druhá metóda. Spočíva v použití štyroch ostrých tieňov rovnakej farby, ktoré sú posunuté do rôznych uhlov o jeden pixel (príklad 2).

Príklad 2. Štyri tiene pre obrys

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Obrysový text

Vzhľad takéhoto obrysu je znázornený na obr. 3. Je badateľné, že kontúra je výraznejšia.

Ryža. 3. Kontúrujte štyrmi tieňmi

Ak chcete pridať 3D textový efekt znázornený na obr. 4 sa súčasne aplikuje niekoľko tieňov, ktoré sú voči sebe posunuté o jeden pixel horizontálne a vertikálne.

Ryža. 4. 3D text

Osobne mi tento typ textu pripomína retro štýl písma a opäť sa hodí skôr do nadpisov ako do tela webovej stránky.

Počet tieňov závisí od toho, ako veľmi chcete text „potiahnuť“ dopredu. Väčšie číslo zväčšuje „hĺbku“ písmen, menšie číslo naopak trojrozmernosť znižuje. Príklad 3 používa päť tieňov rovnakej farby.

Príklad 3: Tieň na pridanie trojrozmernosti

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Desaťkomorová chladnička

Pre všetky tiene nastavíme polomer rozostrenia na nulu a rovnakú farbu. Tiene sa líšia iba hodnotami odsadenia.

Razba textu

Na vytvorenie efektu razenia textu alebo, inými slovami, reliéfu, musí farba textu zodpovedať farbe pozadia. Jedna časť písmen „vyčnievajúcich“ nad povrch sa zdá byť osvetlená, zatiaľ čo druhá časť je v tieni (obr. 5).

Ryža. 5. Reliéfny text

Na pridanie podobného efektu potrebujeme dva tiene - biely tieň posunieme doľava o jeden pixel a tmavosivý nadol doprava (príklad 4).

Príklad 4: Reliéfny text

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Reliéfny text

Reliéf vyzerá najlepšie na sivom pozadí, takže efekt nie je vhodný pre každú farebnú schému lokality. Mimochodom, je ľahké stlačiť namiesto vytlačeného textu; stačí vymeniť farby tieňov.

Text-shadow: #333 -1px -1px 0, #fff 1px 1px 0;

Žiariť

Žiara okolo textu je rovnaký tieň, len je jasný a kontrastný. Ak teda chcete vytvoriť efekt žiary, stačí zmeniť farbu tieňa a nastaviť požadovaný polomer rozmazania. Keďže žiara okolo textu by mala byť rovnomerná, odsadenie tieňa by malo byť nastavené na nulu. Na obr. Obrázok 6 ukazuje príklad žiarenia v rôznych farbách.

Ryža. 6. Žiarivý text

Príklad 5. Žiarenie

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Svetlá stránka

Temná strana

Rozmazať

Samotný tieň je rozmazaný, takže ak necháme len tieň a skryjeme samotný text, vzniknú nám rozmazané písmená (obr. 7), pričom miera rozmazania sa dá jednoducho upraviť pomocou parametra text-shadow.

Ryža. 7. Text s rozostrením

Ak chcete skryť pôvodný text, stačí nastaviť farbu na priehľadnú (príklad 6). Farba tieňa potom funguje ako farba textu a polomer rozostrenia nastavuje stupeň rozmazania písmen.

Príklad 6: Rozmazanie textu

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Rozmazaný text

Tieňové a pseudotriedy

Tieň sa nemusí pridávať priamo do textu, vlastnosť text-shadow sa pekne hrá s pseudotriedami :hover a :first-letter. Vďaka tomu sa s textom získajú zaujímavé efekty, ako napríklad tvarované prvé písmeno odseku alebo žiara odkazu, keď naň umiestnite kurzor myši. Príklad 7 ukazuje takéto techniky.

Príklad 7: Použitie Pseudotried

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Špeciálny projekt spomaľuje tradičný kanál bez ohľadu na náklady. Štruktúra trhu, odhodenie detailov, stabilizuje marketingové a obchodné oddelenie, využívajúc skúsenosti z predchádzajúcich kampaní. Budovanie značky, samozrejme, spontánne vytláča konvergentné PR, čím získava trhový segment. Investície synchronizujú rolu sociálneho postavenia, čím sa zvyšuje konkurencia. Značka prirodzene určuje plán umiestnenia, využívajúc skúsenosti z predchádzajúcich kampaní.

Ďalším spôsobom, ako ozdobiť webovú stránku, je vytvoriť text s tieňom v CSS. Pri správnom použití tohto štýlu môžete úspešne zvýrazniť nadpis, odsek alebo časť textu. Môžete upraviť farbu tieňa, odsadenie a rozmazanie.

V CSS môžete nastaviť tieň textu pomocou vlastnosti text-shadow, ktorú podporujú všetky prehliadače okrem Internet Explorera verzie 9 a staršej. Problémy sú aj s Opera Mini – tento prehliadač túto vlastnosť podporuje len čiastočne. Nižšie je uvedený príklad štýlu písania a hodnôt vlastností:

H1 (text-shadow: 3px 5px 6px #6C9; )

Ako vidíte, zadali sme až štyri hodnoty oddelené medzerou. Poďme si to prejsť v poradí:

• 3px – prvá hodnota je zodpovedná za posun tieňa pozdĺž osi X (vpravo, vľavo). Kladná hodnota posúva tieň doprava a záporná hodnota posúva tieň doľava.
• 5px – druhá hodnota je zodpovedná za posun tieňa pozdĺž osi Y (dole, hore). Kladná hodnota posúva tieň nadol a záporná hodnota posúva tieň nahor.
• 6px – tretia hodnota je zodpovedná za polomer rozostrenia tieňov. Tento parameter je voliteľný. V predvolenom nastavení je rozostrenie 0 pixelov, vďaka čomu je tieň jasný a nerozmazaný.
• #6c9 – štvrtá hodnota je zodpovedná za farbu tieňa. Tento parameter je voliteľný. Štandardne je farba tieňa nastavená na rovnakú farbu ako text, na ktorý sa štýl použije.

Ako vyzerá tieň v prehliadači (snímka obrazovky):

Snímka obrazovky: text s tieňom, CSS

Viacero tieňov CSS pre text

Pre vlastnosť text-shadow je tiež možné použiť viacero skupín hodnôt. To znamená, že pre jeden text môžete nastaviť viacero tieňov. Aby ste to dosiahli, musíte napísať skupiny hodnôt oddelené čiarkami.

H1 (text-shadow: 3px 5px 6px #6C9, -6px -7px 6px #D9FFA7; )

Výsledok použitia tohto štýlu je viditeľný na snímke obrazovky:

Snímka obrazovky: Viaceré tiene pre text CSS

Pomocou vlastnosti CSS text-shadow môžete vytvoriť naozaj krásne veci. Môžete experimentovať: nastavte veľké množstvo rôznych tieňov, nastavte farbu nielen v hexadecimálnom, ale aj vo formáte RGBA, pomocou alfa kanála upravte priehľadnosť. Toto sa môže stať, ak tejto vlastnosti venujete dostatočnú pozornosť:

Snímka obrazovky: 3D textový tieň v CSS

Typografia je obľúbenou hračkou webových dizajnérov. CSS má jeden veľmi zaujímavý nástroj - textový tieň(textový tieň), ktorý sa na prvý pohľad javí ako celkom jednoduchý, no s jeho pomocou môžete vytvoriť nezabudnuteľné efekty, ak použijete vynaliezavosť a fantáziu.

Základy tieňov

Nehnuteľnosť textový tieň veľmi jednoduché použitie. Podporujú ho všetky moderné prehliadače a dokonca aj bez použitia predpôn. Ale v IE nie je žiadna podpora (ani v IE9). Môžete použiť nástroje ako Modernizr, ktoré vám pomôžu vytiahnuť efekty CSS3 aj na starších verziách IE.

Syntax

Ak chcete vytvoriť tieň textu, použite syntax vlastnosti textový tieň ktorý je uvedený nižšie. Je potrebné definovať štyri parametre: prvé dva nastavujú polohu tieňa, tretí nastavuje úroveň rozmazania a štvrtý určuje farbu tieňa.

Text-shadow: horizontal_offset vertical_offset blur color;

Nižšie je uvedený príklad tieňa textu, ktorý je posunutý o dva pixely nadol a štyri pixely doprava, rozmazaný o tri pixely a nastavený na čiernu farbu pri 30 % nepriehľadnosti.

Text-shadow: 2px 4px 3px rgba(0,0,0,0,3);

Výsledok použitia tejto vlastnosti bude vyzerať takto:

Prečo sa používa rgba?

Pri definovaní vlastnosti nemusíte použiť rgba na určenie farby tieňa. Rgba však pri definovaní tieňa pridáva ďalší rozmer – úroveň priehľadnosti.

Táto metóda je oveľa jednoduchšia ako iné metódy určovania farby. Nemusíte sa sústrediť na určenie odtieňa farby tieňa, ktorý môže byť len o niečo tmavší alebo svetlejší ako farba pozadia. S rgba môžete jednoducho použiť bielu alebo čiernu farbu a zvýšiť ich nepriehľadnosť, aby ste pri miešaní farieb dosiahli požadovanú farbu pozadia.

Používanie majetku textový tieň Pre text môžete vytvárať rôzne efekty, neobmedzujúce sa len na jednoduché vrhnuté tiene. Tu je napríklad kód na vytvorenie ilúzie depresívneho textu.

Najprv musíte nastaviť farbu textu o niečo tmavšiu ako je farba pozadia. A potom musíte nehnuteľnosť používať textový tieň s bielou farbou a zvýšenou priehľadnosťou.

Farba pozadia je #222 a farba textu je nastavená na 60% nepriehľadnosť. Biely tieň je umiestnený mierne nadol a doprava s úrovňou nepriehľadnosti 10 %.

Telo ( pozadie: #222; ) #text h1 ( farba: rgba(0,0,0,0,6); tieň textu: 2px 2px 3px rgba(255,255,255,0,1); )

Vôbec nie je potrebné tieň rozmazávať. Jasný tieň sa môže dobre hodiť k dizajnu webovej stránky.

Text-shadow: 6px 6px 0px rgba(0,0,0,0,2);

Skutočná zábava začína, keď zahodíte obmedzenie mať iba jeden tieň. Použitím čiarky na oddelenie definícií môžete použiť toľko tieňov, koľko potrebujete!

Text-shadow: shadow1, shadow2, shadow3;

Tu je príklad použitia dvoch tieňov. Prvý má rovnakú farbu ako pozadie.

Text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0,15);

Dlhý posun smerom nadol

Akonáhle sa naučíte používať viacero tieňov, výsledky budú čoraz dramatickejšie. Je veľmi jednoduché vytvoriť 3D efekt pre text.

Príklad používa štyri tiene, všetky posunuté nadol v rôznych vzdialenostiach a rozmazané.

Text-shadow: 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. );

Posuňte sa o malú vzdialenosť nadol a silno rozmažte

Tu je ďalšia inkarnácia rovnakej myšlienky. Tri tiene sú posunuté o menšiu vzdialenosť a sú viac rozmazané.

Text-shadow: 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 text od Marka Dotta

Efekt sa používa na webovej stránke MarkDotto.com. Používa 12 rôznych tieňov na vytvorenie skvelého 3D efektu.

Text-shadow: 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);

Odsadený text od Gordona Halla

Všimnite si, že vo vyššie uvedenom príklade som svoju techniku ​​nazval „rýchly a špinavý“ efekt kníhtlače. Je to preto, že existuje oveľa zložitejší spôsob, ako vytvoriť skutočne vložený text, ktorý je oveľa dôveryhodnejší.

Gordon používa vážne CSS voodoo, aby stiahol nielen vonkajší tieň, ale aj skutočný vnútorný tieň. Úplné vysvetlenie tejto techniky nájdete v jeho blogovom príspevku.

Farba pozadia: #666666; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; farba: transparentná; text-shadow: rgba(255,255,255,0,5) 0px 3px 3px;

Žiariť

Text-shadow: 0px 0px 6px rgba(255,255,255,0,7);

Text-shadow: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

Viaceré svetelné zdroje

Text-shadow: 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);

Farba: 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);

Záver

Ako väčšina CSS efektov, aj tiene sa dajú veľmi ľahko implementovať. Ale kombinácia jednoduchých akcií môže viesť k úžasným efektom.