vysvetlenia:
, - vlastnosti jazyka CSS, slúžiace na vytváranie tieňov. , , — parametre vlastností tieňa. , , , - CSS vlastnosti, zodpovedné za zmenu veľkosti a umiestnenia prvkov. - Značka je zodpovedná za vytváranie odkazov.
- Selektory sú akési prepojenia, pomocou ktorých CSS určuje, na ktoré prvky sa majú aplikovať určité štýly.
- Hover je volič stavu.
— vlastnosť zmeny animovaného objektu.
Na získanie efektu trojrozmernosti sa často používajú tiene. Umožňujú vám dať textom a blokom jedinečný štýl a v kombinácii so špeciálnymi fontami môžete dosiahnuť skvelý efekt.
CSS nám ponúka toľko priestoru pre fantáziu a experimentovanie, že by vám trvalo roky, kým by ste ich všetky vyskúšali.
V tomto článku si podrobne popíšeme vytváranie tieňov v CSS. Okrem zvyčajných vonkajších tieňov vám ukážeme, ako vytvárať vnútorné tiene a stavové tiene.
CSS - box shadow. vlastnosť box-shadow
html( pozadie: #fff; ) body( šírka: 80 %; okraj: 0 auto; farba pozadia: rgba(150,60,60,0,54) box-shadow: -1px 5px 5px 5px rgba(77,63,63 ,0,88) ) Nástroj nám umožňuje vytvoriť jeden alebo viac tieňov okolo bloku s ľubovoľnou farbou.
V podstate, čo je tieň? Toto je presná kópia oblasti prvku, ktorá má určitú farbu a polohu. Tieto možnosti je možné nastaviť pomocou vlastnosti box-shadow.
Vlastnosti tieňa sa používajú v tomto poradí:
- Pohybujte sa vodorovne.
- Pohybujte sa vertikálne.
- Úroveň rozmazania.
- Strečing.
- Farba tieňa.
V tomto poradí musíte zadať parametre tieňa. Hlavnou vecou nie je zamieňať si hodnotu, pretože prvé 4 sú nastavené rovnakým spôsobom pomocou číselných hodnôt -
Prvý parameter, ktorý je tzv
Záporné hodnoty posúvajú tieň doľava, kladné hodnoty ho posúvajú doprava. Hodnota parametra sa môže rovnať 0, keď sú tiene rozmazané pozdĺž zvislej osi.
Ďalšia v poradí je nehnuteľnosť
Parameter je možné nastaviť na 0. Zvyčajne sa používa na horizontálne rozmazanie tieňov.
Pozor! Odporúčame vám zadať hodnotu v pixeloch. Môžete použiť iné hodnoty - ,
3 hodnota -
Daná hodnota určuje polomer, pozdĺž ktorého bude tieň rozmazaný. Záporné hodnoty nie sú špecifikované.
Tu je možné použiť aj väčšie hodnoty. Výrazné rozostrenie pomôže vytvoriť farebný efekt, ale len v niektorých situáciách.
Predposledná hodnota, ktorá je zodpovedná za roztiahnutie tieňa. Je to tiež voliteľné, ale môže pridať farbu do vášho tieňa.
Rozšírenie nastáva v dôsledku natiahnutia centrálnej pevnej časti tieňa, ktorá sa nachádza medzi rozmazanými okrajmi.
Tento parameter akceptuje akúkoľvek hodnotu, kladnú aj zápornú. Kladné hodnoty rozširujú tieň, zatiaľ čo záporné hodnoty ho zmenšujú.
A posledný parameter je
Na zmenu farby je vhodný akýkoľvek farebný systém – aj štandardné farby.
Pozor! Ak chcete, aby vlastnosť fungovala v Safari, musíte toto nastavenie zadať, aj keď používate predvolenú čiernu farbu.
Vnútorný tieň – CSS
html( pozadie: #fff; ) body( šírka: 80 %; okraj: 0 auto; farba pozadia: rgba(150,60,60,0,54) box-shadow: -1px 5px 5px 5px rgba(77,63,63 ,0,88) vložka; ) Poďme sa teda pozrieť na prvý príklad nanášania tieňov. Tu sa pozrieme na vytvorenie vnútorného tieňa pre telesný blok.
Ak chcete začať, otvorte náš dokument HTML a vyplňte ho. Nemôžete zadať žiadne značky, nevypĺňajte obsah, hlavnou vecou je vytvoriť značku
.Otvorte náš CSS dokument, napíšte značku
, bude to náš hlavný selektor.Ďalej otvorte zložené zátvorky a napíšte vlastnosť
Teraz to najdôležitejšie. Ak chcete vytvoriť tieň vnútorného rámčeka v CSS, musíte nastaviť hodnotu inset. Môžete ho určiť ihneď po definovaní farby.
V dôsledku toho sme dostali nasledujúci blok:
HTML/CSS - Textový tieň
html( pozadie: #fff; ) body( šírka: 80 %; okraj: 0 auto; farba pozadia: rgba(150,60,60,0,54) box-shadow: -1px 5px 5px 5px rgba(77,63,63 ,0,88) inset; ) div( margin: 150px; box-shadow: -1px 5px 5px 5px rgba(77,63,63,0,88); font-size: 25px; ) 
Vytvára sa podobným spôsobom, ale namiesto box-shadow je použitá vlastnosť
- Horizontálny posun.
- Vertikálny posun.
- Polomer rozmazania. Nie je to potrebné.
- Farba.
Ako vidíte, v tejto vlastnosti nie je žiadny parameter roztiahnutia. Veľkosť tieňa bude vždy identická s veľkosťou textu, nedá sa to nijako opraviť.
Je veľmi vhodné ukladať tiene na seba. Ak to chcete urobiť, musíte uviesť niekoľko skupín parametrov.
Prvý tieň bude umiestnený bližšie k textu a druhý nad ním. Podobne ako pri práci s vlastnosťami obrysu a okraja, ale tu môžete vytvoriť 2, 3 alebo viac tieňov.
Hover Shadows - CSS
Teraz sa pozrime na vytváranie tieňov pre konkrétny stav. V našom príklade sa použije tlačidlo.
Ak chcete vytvoriť tieň pre tlačidlo, musíte ho najskôr umiestniť. Otvoríme značku a, napíšeme pre ňu triedu tlačidla a ľubovoľnú textovú hodnotu pre lepšie zobrazenie.
Najprv nastavíme umiestnenie pomocou vlastnosti margin a zväčšíme tlačidlo na určitú veľkosť. Na jej zvýšenie môžete použiť vlastnosti width a height, alebo môžete použiť vlastnosť padding.
Teraz nastavíme farbu pozadia, text a rám. Naše tlačidlo je pripravené, začnime vytvárať tieň.
Najprv vytvoríme obyčajný tieň malej veľkosti pomocou box-shadow. V predvolenom nastavení bude viditeľné bez toho, aby ste na tlačidlo umiestnili kurzor myši.
Urobme najjednoduchší efekt - zväčšiť tieň. Môžete to rozmazať alebo zmeniť úsek podľa svojich predstáv.
Pre najlepší efekt nastavte vlastnosť prechodu pre normálny odkaz, nastavte čas na 0,5s.
Teraz tu máme pekné tlačidlo s pekným tieňom, ktorý sa bude plynulo rozširovať pri prechode myšou.
Záver
V tomto článku sme sa oboznámili so všetkými základnými spôsobmi vytvárania tieňov. Analyzovali sme všetky vlastnosti a parametre tieňov.
Všetky prvky, ktoré boli prezentované na snímkach obrazovky, nájdete v zdrojovom priečinku. Ak chcete, môžete si ich sami preštudovať a experimentovať s hodnotami. Možno vám to pôjde oveľa lepšie ako nám.
Tieň pod prvkom na úrovni bloku na stránke sa zvyčajne používa na vytvorenie trojrozmerného efektu, upútanie pozornosti na prvok alebo ako súčasť dizajnu. Malý tieň pod prvkami tiež dodáva stránke objem a hĺbku.
Na pridanie tieňa sa používa vlastnosť box-shadow, ktorá má šesť hodnôt, z ktorých sú povinné len dve. Na obr. Obrázok 1 zobrazuje vlastnosť box-shadow so všetkými možnými hodnotami, ktoré sú očíslované na ich identifikáciu.
Ryža. 1. Hodnoty vlastnosti box-shadow
- kľúčové slovo inset nastavuje tieň vo vnútri prvku;
- posun tieňa vodorovne (5px - doprava, -5px - doľava);
- vertikálny posun (5px - dole, -5px - hore);
- polomer rozostrenia tieňa (0 - ostrý tieň);
- roztiahnutie tieňa (5px - roztiahnutie, -5px - zmenšenie);
- farba tieňa.
Uistite sa, že ste zadali iba horizontálny a vertikálny posun, všetky ostatné parametre sa berú štandardne. V tomto prípade bude tieň ostrý bez rozmazania a čiernej.
Vďaka kombináciám rôznych parametrov a ich hodnôt je možné získať širokú škálu typov tieňov. V tabuľke. 1 zobrazuje kód a výsledok, ku ktorému vedie.
| Kód | Výsledok | Popis |
|---|---|---|
| box-shadow: 5px 5px; | Ostrý tieň vpravo a dole. | |
| box-shadow: -5px -5px; | Ostrý tieň vľavo a hore. | |
| box-shadow: 0 0 5px | Rozmazaný tieň okolo prvku. | |
| box-shadow: 0 0 5px 2px; | Rozšírenie tieňa o 2 pixely. | |
| box-shadow: 0 0 5px 2px červená; | Červená žiara okolo prvku. | |
| box-shadow: 0,4em 0,4em 5px rgba(122,122,122,0,5); | Priesvitný tieň. | |
| box-shadow: inset 0 0 6px; | Tieň vo vnútri. |
Ako vidíte z tabuľky, posun tieňa nemusí byť špecifikovaný v pixeloch, aj keď je to vhodné. Farbu tieňa je možné špecifikovať v akomkoľvek dostupnom formáte, napríklad ak chcete získať priesvitný tieň, je vhodný formát RGBA, takýto tieň bude vyzerať dobre na akomkoľvek pozadí. Príklad 1 ukazuje, ako to urobiť.
Príklad 1: Tieň na obrázku na pozadí
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Nechoďte proti zástavám nepriateľa, keď sú v dokonalom poriadku; neútočiť na tábor nepriateľa, keď je nedobytný; toto je manažment zmien.
Sun Tzu, prekl. Mikuláš Konrád
Výsledok tohto príkladu je znázornený na obr. 2. Tieň zopakuje zaoblenie rohov bloku.
Ryža. 2. Pohľad na tieň na obrázku pozadia
Pri pridávaní „širokého“ tieňa si uvedomte, že môže presahovať viditeľné okno prehliadača a výsledkom je vodorovný posúvač.
K pseudoprvkom je možné pridať aj tieň, niekedy sa to vyžaduje pri komplexnom rozložení. Na obr. 3 znázorňuje blok s nadpisom, ku ktorému bol pridaný tieň. Aby na križovatke neboli žiadne čiary, musíte použiť pseudoprvok ::after a pridať k nemu tieň.
Ryža. 3. Blok s tieňom
Príklad 2 ukazuje vytvorenie takéhoto bloku.
Príklad 2. Krabica s tieňom
HTML5 CSS3 IE 9+ Cr Op Sa Fx
hlavička
Element môže mať nie jeden tieň, ale hneď niekoľko, ich parametre sú uvedené oddelené čiarkami v hodnote vlastnosti box-shadow. Príklad 3 ukazuje, ako pridať dvojitý tieň ku všetkým obrázkom.
Príklad 2. Krabica s tieňom
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Výsledok tohto príkladu je znázornený na obr. štyri.
Ryža. 4. Obrázok s dvojitým tieňom
Prvý tieň je vykreslený naľavo od obrázka s polomerom rozostrenia 20px, zmenšený o štvrtý parameter (-20px). Parametre druhého tieňa sú uvedené za čiarkou, tieň je zobrazený napravo od obrázka a je tiež zmenšený kvôli symetrii.
S príchodom štandardu CSS 3 bola predstavená vlastnosť box-shadow, ktorá je široko používaná medzi webovými vývojármi, pretože uľahčuje pridanie jedného alebo viacerých tieňov do rámčeka prvku, aby sa dosiahol požadovaný vizuálny efekt.
V predchádzajúcom článku sme sa pozreli na vlastnosť border-radius, pomocou ktorej môžete získať tieň zaoblené rohy. Analogicky s textovým tieňom (text-shadow) môžete vytvoriť viacero tieňov, na ktoré sa aplikujú os z spredu dozadu (s prvým tieňom navrchu).
Pozrime sa bližšie na syntax tejto modernej vlastnosti:
Zvážte v poradí možné hodnoty táto nehnuteľnosť:
| Význam | Popis |
|---|---|
| žiadny | Tieň sa nezobrazuje. Toto je predvolená hodnota. |
| vložka | Voliteľná hodnota. Ak táto hodnota nie je špecifikovaná (predvolená), tieň bude na vonkajšej strane prvku a vytvorí efekt vydutia prvku. S kľúčovým slovom (value) inset padne tieň do prvku a vytvorí odsadený efekt. Inými slovami, ide o zmenu z vonkajšieho tieňa na vnútorný. |
| h-tieň | Požadovaná hodnota. Určuje umiestnenie vodorovného tieňa. Záporné hodnoty sú povolené. |
| v-tieň | Požadovaná hodnota. Určuje umiestnenie vertikálneho tieňa. Záporné hodnoty sú povolené. |
| blur-radius | Voliteľná hodnota. Nastavuje polomer rozostrenia. Čím väčšia je táto hodnota, tým väčšie je rozmazanie, zatiaľ čo tieň sa zväčší a zosvetlí. Ak hodnota nie je nastavená, potom bude hodnota 0 (ostré - zreteľné tiene). Záporné hodnoty nie sú povolené. |
| polomer šírenia | Voliteľná hodnota. Veľkosť tieňa (polomer roztiahnutia tieňa). Kladné hodnoty rozšíria tieň, zatiaľ čo záporné hodnoty ho zmenšia. Ak hodnota nie je nastavená, potom bude hodnota 0 (tieň zodpovedá veľkosti prvku). |
| farba | Voliteľná hodnota. Určuje farbu tieňa (HEX, RGB, RGBA, HSL, HSLA, "Preddefinované farby"). Predvolená hodnota je čierna. |
Hlavné body, ktoré musíte pochopiť, aby ste vytvorili tiene prvkov, sú:
Chcem vás upozorniť na skutočnosť, že vlastnosť box-shadow v súčasnosti podporujú všetky moderné prehliadače:
| Nehnuteľnosť | Opera | IExplorer | hrana |
|||
|---|---|---|---|---|---|---|
| krabicový tieň | 10.0 4.0 -webkit- | 4.0 3.5 -moz- | 10.5 | 5.1 3.1 -webkit- | 9.0 | 12.0 |
Ak chcete rozšíriť podporu pre niektoré prehliadače vrátane mobilných IOS 3.2 – 4.3 a Android 2.1 – 3, potom sa odporúča použiť predpony výrobcu a použiť nasledujúcu syntax (v príkladoch článku sa použije iba syntax pre moderné prehliadače):
-webkit-box-shadow : hodnota ; /* Safari 3.1 – 4, IOS 3.2 – 4.3 a Android 2.1 – 3 */-moz-box-shadow : hodnota ; /* Firefox 3.5 - 3.6 */ box-shadow : value ; /* tabuľka hore */Prejdime k praxi a začnime jednoduchý príklad, v ktorom k prvkom pridáme jeden tieň:
Výsledok nášho príkladu:
Použitie viacerých tieňov
V nasledujúcom príklade zvážte zaujímavý efekt miešanie farieb, ktoré možno získať pri použití viacerých tieňov:
- Dva bloky s pevnou šírkou a výškou (15 em a 10 em ), pridané čalúnenie na všetkých stranách (2 em ) a nastavené boxy na blokové lemovanie, aby bolo možné ich zarovnať.
- Pre najprv blok s triedou .test sme naznačili štyri tiene s rôznymi horizontálnymi a vertikálnymi hodnotami tieňov, takže prvok má na všetkých stranách rôzne tiene. Polomer rozmazania pre všetky tiene nastavený na jeden. Farba každého tieňa je iná a nastavuje sa pomocou preddefinovaných farieb.
- Pre druhý blok s triedou .test2 sme naznačili štyri tiene s rôznymi horizontálnymi a vertikálnymi hodnotami tieňov. Polomer rozostrenia pre všetky tiene bol nastavený na jednu, pričom roztiahnutie tieňa bolo nastavené na zápor, čo spôsobilo zmenšenie samotného tieňa. Farba každého tieňa je iná a špecifikovaná pomocou systému RGBA.
Výsledok nášho príkladu:
Použitie tieňov pre obrázky
Posledný príklad tohto článku sa zameria na použitie tieňov pre obrázky. Okamžite chcem upriamiť vašu pozornosť na skutočnosť, že priamo špecifikujete tieň pre HTML prvok nebude fungovať, ale máme možnosť zadať obrázok ako pozadie pre prvok, ktorý nás zaujíma, a už pre tento prvok nastaviť tieň, ktorý potrebujeme.
Na prácu s obrázkami na pozadí sa pozrieme podrobne v článku tutoriálu „ “, ale teraz, aby sme ukončili štúdium používania tieňov, sa toho dotkneme povrchne a ako pozadie použijeme obrázok. prvok v nasledujúcom príklade:
- Dva bloky s pevnou šírkou a výškou (237px a 232px ), pridané vypchávky na všetky strany (2em ) a nastavené polia tak, aby boli vložené, aby sa mohli zarovnať. Veľkosť bloku sme nastavili na 237 x 232 pixlov, aby sa zmestili na veľkosť obrázka, takže v tejto fáze tréningu nemusíme upravovať veľkosť obrázka tak, aby sa zmestil do prvku a ovplyvňovať tie vlastnosti CSS, ktoré sa plánujú študovať v neskoršej fáze. (v článku s návodom „“).
- Pre najprv blok s triedou .test sme naznačili nulová hodnota horizontálne a vertikálne tiene, ale polomer rozostrenia sme nastavili na 50px a rozšírili sme ho nastavením polomeru roztiahnutia na 10px . Farba tieňa bola špecifikovaná vopred definovanou farbou (fialová). Okrem toho sme uviedli v inzeráte kľúčové slovo vložiť , čo spôsobí, že tieň spadne do prvku. Inými slovami, vytvorili sme vnútorný tieň prvku.
- Pre druhý blok s triedou .test2 horizontálne a vertikálne tiene sme nastavili na nulu, ale polomer rozostrenia sme nastavili na 50px a rozšírili sme ho o polomer roztiahnutia 10px . Farba tieňa určená v režime RGBA.
Výsledok nášho príkladu:
Ryža. 98 Príklad tieňa obrázka CSS (vlastnosť box-shadow)
Otázky a úlohy k téme
Skôr než prejdete na ďalšiu tému, dokončite praktickú úlohu:
Ak máte ťažkosti robiť praktická úloha, Príklad môžete vždy otvoriť v samostatnom okne a prezrieť si stránku, aby ste videli, aké CSS bolo použité.
2016-2020 Denis Bolshakov, môžete na stránku posielať pripomienky a návrhy na adresu [email protected]
Typografia je obľúbenou hračkou webových dizajnérov. CSS má vo svojom zložení jeden veľmi zaujímavý nástroj - textový tieň(textový tieň), ktorý sa na prvý pohľad zdá byť dostatočne jednoduchý, ale dá sa použiť na vytvorenie nezabudnuteľných efektov, ak použijete vynaliezavosť a predstavivosť.
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 (dokonca ani IE9). Môžete použiť nástroje ako Modernizr, ktoré vám pomôžu vytiahnuť efekty CSS3 aj v starších verziách IE.
Syntax
Syntax vlastnosti sa používa na vytvorenie tieňa textu 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 čierny 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 na nastavenie farby tieňa použiť rgba. Avšak rgba pridáva do definície tieňa ď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 definovanie odtieňa farby tieňa, ktorý môže byť len o niečo tmavší alebo svetlejší ako farba pozadia. Pomocou rgba môžete jednoducho použiť biele alebo čierne farby a zvýšiť ich priehľadnosť, aby ste pri miešaní farieb dosiahli požadovaný odtieň pozadia.
Užívanie nehnuteľnosti textový tieň môžete vytvárať rôzne efekty pre text, neobmedzujúce sa len na jednoduché vrhnuté tiene. Tu je napríklad kód na vytvorenie ilúzie odsadeného 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 má krytie 60 %. Biely tieň je umiestnený mierne nadol a doprava s nepriehľadnosťou 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ň môže dobre ladiť s dizajnom 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 chcete!
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);
Pohyb dole na veľkú vzdialenosť
Keď si osvojíte používanie viacerých tieňov, výsledok bude čoraz výraznejší. 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. );
Posun nadol o malú vzdialenosť a silné rozmazanie
Tu je ďalšia implementácia rovnakej myšlienky. Tri tiene sú posunuté o menšiu vzdialenosť a 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 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);
Reliéfny 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ť nejaký vážne vložený text, ktorý je oveľa dôveryhodnejší.
Gordon používa na ťahanie nejaké vážne CSS voodoo vypnuté nie len 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: priehľadná text-shadow: rgba(255,255,255,0,5) 0px 3px 3px;
žiara
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 efekty, tiene sa realizujú veľmi jednoducho. Ale kombinácia jednoduchých akcií môže viesť k úžasným efektom.
Dobrý deň milí čitatelia. Dnes to urobíme pekný tieň pre bloky Pomocník CSS . Myslím, že to bude pre vás veľmi užitočné, najmä ak robíte šablóny. A bloky s tieňom vyzerajú veľmi atraktívne a moderne.
Podpora prehliadača
V podstate všetko moderné prehliadače podpora tieňových efektov:
- Internet Explorer 9.0 a novší;
- Firefox 3.5 a vyšší;
- Chrome 1 a vyššie;
- Safari 3 a vyššie;
- Opera 10.5 a vyššia.
Chcel by som tiež spomenúť jeden nie nepodstatný bod: pre niektoré prehliadače budeme používať nejaké predpony. Pre Firefox sa používa -moz-, pre Chrome a Safari musíte použiť predponu - webkit.
Teraz prejdime k najzaujímavejšej časti. Pozrime sa na všetky tiene samostatne, bude ich 8 efektov.
tieňový efekt 1
AT tento príklad blokový tieň je v spodnej časti.
HTML
Účinok 1
css
text-align:center; poloha:relatívna; top:80px; ) .box ( šírka: 70 %; výška: 200 pixelov; pozadie: # FFF; okraj: 40 pixelov automaticky; ) /*======================== ========================== * Účinok 1 * ===================== ===========================*/ .effect1( -webkit-box-shadow: 0 10px 6px -6px #777; -moz- box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777; )tieňový efekt 2
V tomto príklade ide tieň z bloku doľava a doprava, ale v strede nie je žiadny. Ukazuje sa veľmi zaujímavý efekt.
HTML
Účinok 2
css
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ============================================ * Účinok 2 * == = ===========================================*/ .efekt2 ( pozícia: relatívna ; ) .effect2:before, .effect2:after ( z-index: -1; pozícia: absolútna; obsah: ""; dole: 15px; vľavo: 10px; šírka: 50%; hore: 80%; max -šírka: 300px; pozadie: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform : rotation( -3 stupne); -moz-transform: otočiť (-3 stupne); -o-transformovať: otočiť (-3 stupne); -ms-transform: otočiť (-3 stupne); transformovať: otočiť (-3 stupne); ) . efekt2:po ( -webkit-transform: otočiť (3 stupne); -moz-transformovať: otočiť (3 stupne); -o-transformovať: otočiť (3 stupne); -ms-transform: otočiť (3 stupne); transformovať: otočiť (3 stupne) ; vpravo: 10px; vľavo: auto; )tieňový efekt 3
Tu je blokový tieň iba vľavo.
HTML
Účinok 3
css
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ============================================ * Účinok 3 * == = ===========================================*/ .efekt3 ( pozícia: relatívna ; ) .effect3:before ( z-index: -1; pozícia: absolútna; obsah: ""; dole: 15px; vľavo: 10px; šírka: 50%; hore: 80%; max-width:300px; pozadie: # 777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotation(-3deg ); - moz-transform: otočiť (-3°); -o-transformovať: otočiť (-3°); -ms-transformovať: otočiť (-3°); transformovať: otočiť (-3°); )tieňový efekt 4
Tieň na pravej strane.
HTML
Účinok 4
css
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ============================================ * Účinok 4 * == = ===========================================*/ .efekt4 ( pozícia: relatívna ; ) .effect4:after ( z-index: -1; pozícia: absolútna; obsah: ""; dole: 15px; vpravo: 10px; vľavo: auto; šírka: 50%; hore: 80%; max- šírka:300px ; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotation(3deg ); -moz-transform: otočiť (3 stupne); -o-transformovať: otočiť (3 stupne); -ms-transform: otočiť (3 stupne); transformovať: otočiť (3 stupne); )Efekt tieňa 5
V tomto prípade sa tieň na oboch stranách posunul nadol výraznejšie.
HTML
Účinok 5
css
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ============================================ * Účinok 5 * == = ===========================================*/ .efekt5 ( pozícia: relatívna ; ) .effect5:before, .effect5:after ( z-index: -1; pozícia: absolútna; obsah: ""; dole: 25px; vľavo: 10px; šírka: 50%; hore: 80%; max -šírka: 300px; pozadie: #777; -webkit-box-shadow: 0 35px 20px #777; -moz-box-shadow: 0 35px 20px #777; box-shadow: 0 35px 20px #777; -webkit-transform : rotation( -8 stupňov); -moz-transform: otočiť (-8 stupňov); -o-transformovať: otočiť (-8 stupňov); -ms-transform: otočiť (-8 stupňov); transformovať: otočiť (-8 stupňov); ) . effect5:after ( -webkit-transform: otočiť(8°); -moz-transformovať: otočiť (8°); -o-transformovať: otočiť (8°); -ms-transform: otočiť (8°); transformovať: otočiť (8°) ; vpravo: 10px; vľavo: auto; )tieňový efekt 6
Tu je efekt zakrivených tieňov na spodnej časti bloku.
HTML
Účinok 6
css
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ============================================ * Účinok 6 * == = ===========================================*/ .efekt6 (pozícia:relatívna ; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) inset; -moz-box-shadow:0 1px 4px rgba(0 , 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) inset; ) .effect6:before, .effect6:after ( content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0) ,0,8); -moz-box-shadow:0 0 20px rgba(0,0,0,0,8); box-shadow:0 0 20px rgba(0,0,0,0,8); hore: 50 % ; dole: 0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect6:after ( right:10px; left:auto; -webkit-transform :skew( 8°) otočiť (3°); -moz-transform:skew(8°) otáčať (3°); -ms-transform:skew(8°) otočiť (3 stupne); -o-transformácia: zošikmenie (8 stupňov) otočenie (3 stupne); transform:skew(8deg) rotation(3deg); )Efekt tieňa 7
Rovnaký efekt je len tieň na hornej a spodnej časti bloku.
HTML
Účinok 7
css
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ============================================ * Efekt 7 * == = ===========================================*/ .efekt7 (pozícia:relatívna ; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) inset; -moz-box-shadow:0 1px 4px rgba(0 , 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) inset; ) .effect7:before, .effect7:after ( content:""; position:absolútna; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0) ,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:0; bottom:0 ; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect7:after ( right:10px; left:auto; -webkit-transform: skew(8deg) ) otočiť (3 stupne); -moz-transform:skew(8 stupňov) otočiť (3 stupne); -ms-transform:skew(8deg) r otate(3deg); -o-transformácia: zošikmenie (8 stupňov) otočenie (3 stupne); transform:skew(8deg) rotation(3deg); )Efekt tieňa 8
Efekt zakrivených tieňov po stranách bloku.
HTML
Účinok 8
css
.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ============================================ * Efekt 8 * == = ===========================================*/ .effect8 ( position:relative ; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) inset; -moz-box-shadow:0 1px 4px rgba(0 , 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0, 0, 0, 0,1) inset; ) .effect8:before, .effect8:after ( content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0, 0,0) ,0,8); -moz-box-shadow:0 0 20px rgba(0,0,0,0,8); box-shadow:0 0 20px rgba(0,0,0,0,8); top:10px; bottom:10px ; left:0; right:0; -moz-border-radius:100px / 10px; border-radius:100px / 10px; ) .effect8:after ( right:10px; left:auto; -webkit-transform: skew(8deg) ) otočiť (3 stupne); -moz-transform:skosiť(8 stupňov) otočiť (3 stupne); -ms-transformovať:skosiť(8 stupňov) r otate(3deg); -o-transformácia: zošikmenie (8 stupňov) otočenie (3 stupne); transform:skew(8deg) rotation(3deg); )To je všetko milí priatelia. Ak niečomu nerozumiete, určite sa opýtajte v komentároch. Do skorého videnia.