Notranje sence v CSS. Notranje sence v CSS Shadow Stretch Radius
Navadne sence je enostavno implementirati z uporabo box-shadow ali text-shadow. Kaj pa, če morate narediti notranje sence? Ta članek opisuje, kako narediti te sence z le nekaj vrsticami kode.
Sintaksa
Najprej si poglejmo dva glavna načina implementacije senc v CSS.box-shadow
Oblikovanje box-shadow vsebuje več različnih pomenov:
Horizontalni odmik in navpični odmik- vodoravni oziroma navpični premik. Te vrednosti kažejo, v katero smer bo predmet metal svojo senco:
Radij zameglitve in polmer širjenja malo bolj zapleteno. Kaj je razlika? Poglejmo primer z dvema elementoma, kjer sta vrednosti polmer zameglitve razlikujejo se:
Rob sence je preprosto zabrisan. Z različnimi vrednostmi polmer širjenja vidimo naslednje:
V tem primeru vidimo, da je senca razpršena na velikem območju. Če ne podate vrednosti polmer zameglitve in polmer širjenja, potem bodo enaki 0.
tekst-senca
Sintaksa je zelo podobna box-shadow:
Pomeni so podobni, vendar ne širjenje-senca. Primer uporabe:
Vložek v box-shadow
Če želite "obrniti" senco znotraj predmeta, morate dodati vložek v CSS:
Ko razumete osnovno sintakso box-shadow, je zelo enostavno razumeti, kako implementirati notranje sence. Vrednosti so še vedno enake, lahko dodate barvo (RGB v hex):
Barva je v formatu RGB, vrednost alfa je odgovorna za preglednost sence:
Slike s sencami
Dodajanje notranje sence sliki je nekoliko težje kot dodajanje navadne sence div. Za začetek je tukaj običajna slikovna koda: 
Logično je domnevati, da lahko dodate senco, kot je ta:
Img (box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); )
Toda senca ni vidna:
Obstaja več načinov za rešitev tega problema, od katerih ima vsak svoje prednosti in slabosti. Poglejmo dva od njih. Prvi je, da sliko zavijete v običajno div:
Div (višina: 200 slikovnih pik; širina: 400 slikovnih pik; senca polja: vstavljena 0 slikovnih pik 0 slikovnih pik 10 slikovnih pik rgba(0,0,0,0.9); ) img (višina: 200 slikovnih pik; širina: 400 slikovnih pik; položaj: relativni; z-indeks: -2 ;)
Vse deluje, vendar moramo dodati malo dodatnih oznak HTML in CSS. Drugi način je, da sliko nastavite kot ozadje želenega bloka:
Div (višina: 200px; širina: 400px; ozadje: url(http://lorempixum.com/400/200/transport/2); box-shadow: vstavljeno 0px 0px 10px rgba(0,0,0,0.9); )
To se lahko zgodi pri uporabi notranjih senc:
Vložek v senco besedila
Če želite implementirati notranjo senco besedila, preprosto dodajte kodo vložek ne deluje:
Za rešitev najprej uporabite glavo h1 Nastavite temno ozadje in svetlo senco:
H1 (barva ozadja: #565656; barva: prozorna; senca besedila: 0px 2px 3px rgba(255,255,255,0.5); )
Zgodi se tole:
Dodajanje skrivne sestavine ozadje-posnetek ki odreže vse, kar sega čez besedilo (na temno ozadje):
H1 (barva-ozadje: #565656; barva: prozorna; senca besedila: 0px 2px 3px rgba(255,255,255,0.5); -webkit-posnetek-ozadje: besedilo; -moz-posnetek-ozadje: besedilo; posnetek ozadja: besedilo ;)
Izkazalo se je skoraj točno to, kar smo potrebovali. Sedaj le malo potemnimo besedilo (alfa) in rezultat je:
Senca pod elementom bloka na strani se običajno uporablja za ustvarjanje tridimenzionalnega učinka, za pritegnitev pozornosti na element ali kot del dizajna. Majhna senca pod elementi prav tako daje strani volumen in globino.
Če želite dodati senco, uporabite lastnost box-shadow, ki ima šest vrednosti, od katerih sta samo dve obvezni. Na sl. Slika 1 prikazuje lastnost box-shadow z vsemi možnimi vrednostmi, oštevilčenimi za njihovo identifikacijo.
riž. 1. Vrednosti lastnosti box-shadow
- ključna beseda inset nastavi senco znotraj elementa;
- premaknite senco vodoravno (5px - desno, -5px - levo);
- navpični premik (5px - dol, -5px - navzgor);
- polmer zameglitve sence (0 - ostra senca);
- raztezanje sence (5px - raztezanje, -5px - skrčenje);
- barva sence.
Določiti je treba samo vodoravni in navpični premik; vsi ostali parametri bodo privzeto prevzeti. V tem primeru bo senca ostra brez zamegljenosti ali črna.
S kombiniranjem različnih parametrov in njihovih vrednosti lahko dobite najrazličnejše vrste senc. V tabeli 1 prikazuje kodo in rezultat, do katerega vodi.
| Koda | Rezultat | Opis |
|---|---|---|
| polje-senca: 5px 5px; | Ostra senca na desni in spodaj. | |
| box-shadow: -5px -5px; | Ostra senca na levi in zgoraj. | |
| box-shadow: 0 0 5px; | Zamegljena senca okoli elementa. | |
| box-shadow: 0 0 5px 2px; | Razširite senco za 2 piksli. | |
| box-shadow: 0 0 5px 2px rdeča; | Rdeči sij okoli elementa. | |
| box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.5); | Prosojna senca. | |
| box-shadow: vložek 0 0 6px; | Senca v notranjosti. |
Kot je razvidno iz tabele, premika sence ni treba določiti v slikovnih pikah, čeprav je to priročno. Barvo sence je mogoče določiti v katerem koli razpoložljivem formatu; za pridobitev prosojne sence je primeren format RGBA; takšna senca bo videti dobro na katerem koli ozadju. Primer 1 prikazuje, kako to storiti.
Primer 1: Senca na sliki ozadja
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Ne nasprotujte sovražnikovim transparentom, ko so v popolnem redu; ne napadajte sovražnikovega tabora, ko je nepremagljiv; to je upravljanje sprememb.
Sun Tzu, prev. Nikolaj Konrad
Rezultat tega primera je prikazan na sl. 2. Senca sledi zaokrožitvi vogalov bloka.
riž. 2. Videz sence na sliki ozadja
Ko dodajate "široko" senco, se zavedajte, da lahko sega čez vidne meje okna brskalnika in tako povzroči pojav vodoravnega drsnega traku.
Sence je mogoče dodati tudi psevdoelementom; Na sl. Slika 3 prikazuje blok glave z dodano senco. Da se izognete črtam na stičišču, morate uporabiti psevdoelement ::after in mu dodati senco.
riž. 3. Blokirajte s senco
Primer 2 prikazuje izdelavo takega bloka.
Primer 2. Blok s senco
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Naslov
Element ima lahko več kot eno senco; njihovi parametri so v vrednosti lastnosti box-shadow navedeni ločeni z vejicami. Primer 3 prikazuje, kako dodati dvojno senco vsem slikam.
Primer 2. Blok s senco
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Rezultat tega primera je prikazan na sl. 4.
riž. 4. Dvojna senčna slika
Prva senca je prikazana na levi strani slike s polmerom zameglitve 20 slikovnih pik, njena velikost pa je zmanjšana za četrti parameter (-20 slikovnih pik). Parametri druge sence so navedeni za decimalno vejico; senca je prikazana desno od slike in je prav tako pomanjšana zaradi simetrije.
Navadne sence je enostavno implementirati z uporabo box-shadow ali text-shadow. Kaj pa, če morate narediti notranje sence? Ta članek opisuje, kako narediti te sence z le nekaj vrsticami kode.
Sintaksa
Najprej si poglejmo dva glavna načina implementacije senc v CSS.box-shadow
Oblikovanje box-shadow vsebuje več različnih pomenov:
Horizontalni odmik in navpični odmik- vodoravni oziroma navpični premik. Te vrednosti kažejo, v katero smer bo predmet metal svojo senco:
Radij zameglitve in polmer širjenja malo bolj zapleteno. Kaj je razlika? Poglejmo primer z dvema elementoma, kjer sta vrednosti polmer zameglitve razlikujejo se:
Rob sence je preprosto zabrisan. Z različnimi vrednostmi polmer širjenja vidimo naslednje:
V tem primeru vidimo, da je senca razpršena na velikem območju. Če ne podate vrednosti polmer zameglitve in polmer širjenja, potem bodo enaki 0.
tekst-senca
Sintaksa je zelo podobna box-shadow:
Pomeni so podobni, vendar ne širjenje-senca. Primer uporabe:
Vložek v box-shadow
Če želite "obrniti" senco znotraj predmeta, morate dodati vložek v CSS:
Ko razumete osnovno sintakso box-shadow, je zelo enostavno razumeti, kako implementirati notranje sence. Vrednosti so še vedno enake, lahko dodate barvo (RGB v hex):
Barva je v formatu RGB, vrednost alfa je odgovorna za preglednost sence:
Slike s sencami
Dodajanje notranje sence sliki je nekoliko težje kot dodajanje navadne sence div. Za začetek je tukaj običajna slikovna koda:
Logično je domnevati, da lahko dodate senco, kot je ta:
Img (box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); )
Toda senca ni vidna:
Obstaja več načinov za rešitev tega problema, od katerih ima vsak svoje prednosti in slabosti. Poglejmo dva od njih. Prvi je, da sliko zavijete v običajno div:
Div (višina: 200 slikovnih pik; širina: 400 slikovnih pik; senca polja: vstavljena 0 slikovnih pik 0 slikovnih pik 10 slikovnih pik rgba(0,0,0,0.9); ) img (višina: 200 slikovnih pik; širina: 400 slikovnih pik; položaj: relativni; z-indeks: -2 ;)
Vse deluje, vendar moramo dodati malo dodatnih oznak HTML in CSS. Drugi način je, da sliko nastavite kot ozadje želenega bloka:
Div (višina: 200px; širina: 400px; ozadje: url(http://lorempixum.com/400/200/transport/2); box-shadow: vstavljeno 0px 0px 10px rgba(0,0,0,0.9); )
To se lahko zgodi pri uporabi notranjih senc:
Vložek v senco besedila
Če želite implementirati notranjo senco besedila, preprosto dodajte kodo vložek ne deluje:
Za rešitev najprej uporabite glavo h1 Nastavite temno ozadje in svetlo senco:
H1 (barva ozadja: #565656; barva: prozorna; senca besedila: 0px 2px 3px rgba(255,255,255,0.5); )
Zgodi se tole:
Dodajanje skrivne sestavine ozadje-posnetek ki odreže vse, kar sega čez besedilo (na temno ozadje):
H1 (barva-ozadje: #565656; barva: prozorna; senca besedila: 0px 2px 3px rgba(255,255,255,0.5); -webkit-posnetek-ozadje: besedilo; -moz-posnetek-ozadje: besedilo; posnetek ozadja: besedilo ;)
Izkazalo se je skoraj točno to, kar smo potrebovali. Sedaj le malo potemnimo besedilo (alfa) in rezultat je:
Elementom lahko dodate senco in spremenite njen videz z lastnostjo CSS box-shadow. Ta slog vam omogoča, da uresničite zanimive učinke, na primer volumen in tridimenzionalnost bloka. Lastnost podpirajo vsi sodobni brskalniki. Izjemi sta IE8 in Opera Mini.
lastnost box-shadow: sintaksa
Ta slog je napisan na naslednji način:
Box-shadow: vložek 4px 4px 8px 5px #333333;
Razmislimo po vrstnem redu, za kaj je odgovoren vsak parameter (od leve proti desni):
- Ključna beseda vstavek: parameter, ki ga ni treba navesti; nariše senco znotraj element.
- X odmik: Določa stopnjo, do katere je senca vodoravno zamaknjena glede na element. Pozitivna vrednost pomeni premik v desno, negativna - v levo. Vrednost 0 pomeni, da senca ni zamaknjena.
- Y premik: Določa količino navpičnega premika sence. Pozitivna vrednost pomeni premik navzdol, negativna vrednost pomeni premik navzgor. Vrednost 0 je senca brez premika.
- Polmer zameglitve: To je stopnja zamegljenosti senc. Višja kot je vrednost, bolj je senca zamegljena. Če parameter ni podan, je privzeta vrednost 0. V tem primeru bo senca popolnoma jasna.
- Razširitev: izbirni parameter, odgovoren za raztezanje sence vzdolž obeh osi; višja kot je vrednost, večji je razteg. Razširitev deluje le, če je prisoten prejšnji parameter. Privzeta vrednost je 0.
- Barva sence: s tem parametrom je vse jasno - nastavi barvo sence elementa. Privzeta barva je črna.
Opomba. Brskalniki Android in starejše različice iPhone Safari zahtevajo predpono -webkit- za pravilno delovanje lastnosti CSS box-shadow.
Ta lastnost lahko sprejme več skupin vrednosti (naredi več senc hkrati). Če želite to narediti, boste morali navesti te skupine parametrov, ločene z vejicami. Na primer:
Box-shadow: 15px 15px 20px #8b0163, vložek 15px 15px 20px #630046;
Primeri box-shadow
Da bi vam pomagali bolje razumeti moč in lepoto lastnosti box-shadow CSS, vam bomo pokazali nekaj primerov, ki jih lahko varno uporabite v praksi. Ta lastnost lahko zelo spremeni navaden blok!
Svetla senca
Box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
Učinek papirja
Box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .6), 23px 0 20px -23px rgba(0, 0, 0, .6), vstavek 0 0 40px rgba(0, 0, 0, .1); 
Več plasti
Box-shadow: 6px 6px #ccc, 12px 12px #a3a3a3; 
Trojni okvir
Box-shadow: 0 0 0 7px rgb(118, 46, 177), 0 0 0 14px rgba(118, 46, 177, 0.6), 0 0 0 21px rgba(118, 46, 177, 0.4); 
Koti
Box-shadow: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385; 
Kot lahko vidite, lastnost box-shadow pušča veliko prostora za domišljijo. Bloke lahko preoblikujete, kot želite - glavna stvar je imeti občutek za sorazmernost! 😉
V naslednjem poglavju boste raziskali lastnosti širine in višine, ki določata velikost elementov.
Danes se bomo naučili narediti sence CSS brez slik. Ko končate to vadnico, ne boste več potrebovali generatorja senc CSS.
Glavna prednost senc, ustvarjenih s CSS3, je enostavnost implementacije in zmanjšanje števila zahtev do strežnika (ker ne uporabljamo več slik). Za izdelavo sence CSS potrebujemo oznako div in lastnost box-shadow CSS. Ne boste potrebovali dodatnih oznak, ker bomo ustvarili psevdo elemente :after in :before, ki jih bomo postavili za glavni objekt (div z razredom blok).
Oglejte si kodo HTML, za katero bomo ustvarili senco CSS3:
Vsebina
Nato si lahko ogledate že pripravljene primere in kodo, potrebno za njihovo implementacijo. Da bi zmanjšali besedilo na strani, bomo izpustili lastnosti CSS s predponami brskalnika. Celotno kodo si lahko ogledate s klikom na povezavo "Primer", ki ustreza primeru.
.block (position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset; .block:before, .block:after ( content:""; position:absolute; z-index:-2; bottom:15px; left:10px ; širina: 20 %; polje-senca: 15 pikslov rgba (0, 0, 0, 7); transformacija: vrtenje (-3 stopinje);
.block (position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) border:1px solid #efefef; border-radius:0 0 120px 120px / 0 0 6px 6px ) .block:before, .block:after ( content:""; position:absolute ; z-index:-2; height:55%; box-shadow:0 8px rgba(0, 0, 0.5); rotate(-3deg); desno: 10 slikovnih pik; samodejno preoblikovanje (8 stopinj) zasukanje (3 stopinje);
Z uporabo sence lahko daste perspektivo bloka. Glej primer.
.block (position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) vstavek; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before (levo:80px; bottom:5px ; width:50%; max-width:-80px rgba(0, 0, 0, 0.4); transform-origin: 100% ; .block:after (prikaz:none; )
Senca CSS za dvignjen blok. Glej primer.
.block (position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) vložek; senca polja: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0) , 0, 0, 0.1) vstavi;
Primer sence CSS3 za navpično prepognjen blok. Glej primer.
.block (position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) vložek; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( top:10px; bottom:10px ; levo: 50%; box-shadow: 0 15px rgba(0,0,0,0.6); border-radius:10px;
.block (position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) vložek; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( top:10px; bottom:10px levo:0; polje-senca:0 15px rgba(0,0,0,0,6);
Primer sence CSS3 za vodoravno prepognjen blok. Glej primer.
.block (position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) vstavi; 0px; left:10px; box-shadow: 0 15px rgba(0,0,0,0.6); border-radius:100px / 10px;
.block (position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) vstavek; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( top:0px; bottom:0px ;levo:10px;box-shadow:0 15px rgba(0,0,0,0.6);
Senca CSS3 za zasukan blok. Glej primer.
.block (position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 40px rgba(0, 0, 0, 0.1) box-shadow:none; transform:rotate(-3deg); :first-child:before ( content:""; position:absolute; z -index:-1; bottom:0px; box-shadow:0 1px rgba(0, 0, 0, 0.3), 0 40px rgba (0, 0, 0, 1) .block; :before, .block:after ( content:""; position:absolute; z-index:-2; bottom:15px; left:10px; width:50% ; height:20%; max-width:300px; box- shadow:0 15px rgba(0, 0, 0, 0,7); transform:rotate(-3deg);auto transform:rotate(3deg);