Isto kao ažuriranje 3, ali s modernim css pravilima (= manje) tako da nije potrebno posebno pozicioniranje na pseudo-elementu.
#box (boja pozadine: # 3D6AA2; širina: 160px; visina: 90px; pozicija: apsolutna; vrh: izračunati (10% - 10px); lijevo: izračunati (50% - 80px);) .box-shadow: poslije ( sadržaj: ""; položaj: apsolutna; širina: 100%; dno: 1px; z-indeks: -1; transformacija: razmjer (.9); sjena okvira: 0px 0px 8px 2px # 000000;)
AŽURIRANJE 3
#box (boja pozadine: # 3D6AA2; širina: 160px; visina: 90px; margin-top: -45px; margin-left: -80px; pozicija: apsolutna; vrh: 50%; lijevo: 50%;) .box- sjena: poslije (sadržaj: ""; širina: 150px; visina: 1px; margin-top: 88px; margin-left: -75px; prikaz: blok; položaj: apsolutna; lijevo: 50%; z-indeks: -1; -webkit-box-shadow: 0px 0px 8px 2px # 000000; -moz-box-shadow: 0px 0px 8px 2px # 000000; box-shadow: 0px 0px 8px 2px # 000000;)
AŽURIRANJE 2
Očigledno to možete učiniti samo s dodatnim parametrom css oznake okvira kao što su svi ostali upravo naveli. Evo demo:
Webkit-box-shadow: 0 4px 4px -2px # 000000; -moz-box-shadow: 0 4px 4px -2px # 000000; box-shadow: 0 4px 4px -2px # 000000;
Ovo bi bilo najbolje rješenje. Dodatni parametar koji se dodaje opisan je kao:
Četvrta duljina je udaljenost širenja. Pozitivne vrijednosti uzrokuju da se oblik sjene širi smjerom duž navedenog radijusa. Negativne vrijednosti uzrokuju slaganje oblika sjene.
AŽURIRANJE
Ono što sam napravio je da sam stvorio "element sjene" koji bi se sakrio iza stvarnog elementa koji biste željeli imati u sjeni. Napravio sam širinu "elementa sjene" točno manju od stvarnog elementa, 2 puta veću od navedene sjene; onda sam ga ispravno poravnao.
#wrapper (širina: 84px; položaj: relativna;) #element (boja pozadine: # 3D668F; visina: 54px; širina: 100%; položaj: relativna; z-indeks: 10;) #shadow (boja pozadine: # 3D668F; visina: 8px; širina: 80px; margina-lijevo: -40px; pozicija: apsolutna; dno: 0px; lijevo: 50%; z-index: 5; -webkit-box-shadow: 0px 2px 4px # 000000; - moz-box-shadow: 0px 2px 4px # 000000; box-shadow: 0px 2px 4px # 000000;)
Originalni odgovor
Da, možete to učiniti s istom sintaksom koju ste naveli. Prva vrijednost kontrolira horizontalno pozicioniranje, a druga vrijednost kontrolira okomito pozicioniranje. Dakle, samo postavite prvu vrijednost na 0px, a drugu na proizvoljan pomak koji želite učiniti ovako.
Normalne sjene lako je implementirati pomoću sjene okvira ili sjene teksta. Ali što ako trebate napraviti unutarnje sjene? Ovaj članak opisuje kako napraviti ove sjene sa samo nekoliko redaka koda.
Sintaksa
Prvo, pogledajmo dva glavna načina implementacije padajućih sjena u CSS.kutija-sjena
Oblikovati kutija-sjena sadrži nekoliko različitih vrijednosti:
Horizontalni pomak i vertikalni pomak- horizontalni i vertikalni pomak. Ove vrijednosti pokazuju u kojem smjeru će objekt baciti sjenu:
Radijus zamućenja i radijus širenja malo kompliciranije. Koja je razlika između njih? Pogledajmo primjer s dva elementa, gdje su vrijednosti polumjer zamućenja razlikuju se:
Rub sjene je jednostavno zamagljen. S drugačijom vrijednošću radijus širenja vidimo sljedeće:
U ovom slučaju vidimo da je sjena raspršena na velikom području. Ako ne navedete vrijednosti polumjer zamućenja i radijus širenja, tada će biti jednaki 0.
tekst-sjena
Sintaksa je vrlo slična kutija-sjena:
Vrijednosti su iste, samo ne širi-sjena... Primjer upotrebe:
Umetak u sjeni kutije
Da biste "okrenuli" sjenu unutar objekta, trebate dodati umetnuti u CSS-u:
Nakon što shvatite osnovnu sintaksu box-shadow, vrlo je lako razumjeti principe implementacije unutarnjih sjena. Vrijednosti su iste, možete dodati boju (RGB u hex):
Boja je u RGB formatu, alfa vrijednost je odgovorna za prozirnost sjene:
Slike sa sjenama
Dodavanje unutarnje sjene slici je malo teže nego običnoj. razd... Za početak, evo uobičajenog koda slike: 
Logično je pretpostaviti da možete dodati sjenu ovako:
Img (sjena okvira: umetnuti 0px 0px 10px rgba (0,0,0,0.5);)
Ali sjena se ne vidi:
Postoji nekoliko načina za rješavanje ovog problema, svaki ima svoje prednosti i nedostatke. Razmotrimo dva od njih. Prvi je zamotati sliku u običnu razd:
Div (visina: 200px; širina: 400px; sjena okvira: umetnuti 0px 0px 10px rgba (0,0,0,0.9);) img (visina: 200px; širina: 400px; pozicija: relativna; z-indeks: -2 ;)
Sve radi, ali morate dodati malo dodatne HTML i CSS oznake. Drugi način je postaviti sliku kao pozadinu željenog bloka:
Div (visina: 200px; širina: 400px; pozadina: url (http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba (0,0,0,0.9); )
Evo što možete dobiti kada koristite unutarnje sjene:
Umetak u sjeni teksta
Za implementaciju unutarnje sjene teksta, jednostavan dodatak kodu umetnuti Ne radi:
Za rješavanje najprije primijenite naslov h1 postavite tamnu pozadinu i svijetlu sjenu:
H1 (boja pozadine: # 565656; boja: transparentna; sjena teksta: 0px 2px 3px rgba (255,255,255,0,5);)
Evo što se događa:
Dodavanje tajnog sastojka pozadinski isječak koji izrezuje sve izvan teksta (na tamnu pozadinu):
H1 (boja pozadine: # 565656; boja: prozirna; sjena teksta: 0px 2px 3px rgba (255,255,255,0,5); -webkit-background-clip: tekst; -moz-background-clip: tekst; background-clip: tekst ;)
Ispalo je gotovo ono što nam treba. Sada samo malo potamnite tekst (alfa) i rezultat:
kratke informacije
CSS verzije
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Opis
Dodaje pad sjene elementu. Dopušteno je koristiti nekoliko sjena, navodeći njihove parametre odvojene zarezima, pri preklapanju sjena prva sjena na popisu bit će viša, posljednja ispod. Ako je radijus zaokruživanja postavljen za element kroz svojstvo border-radius, tada će i sjena imati zaobljene kutove. Dodavanje sjene povećava širinu elementa, pa se u pregledniku može pojaviti vodoravna traka za pomicanje.
Sintaksa
box-shadow: nema |<тень> [,<тень>]*
gdje<тень>:
umetnuti<сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>
Vrijednosti
none Poništava dodavanje sjene. umetnuti Sjena je nacrtana unutar elementa. Izborni parametar. x-offset Horizontalni pomak sjene u odnosu na element. Pozitivna vrijednost za ovaj parametar postavlja pomak sjene udesno, negativna - ulijevo. Obavezni parametar. y-offset Vertikalni pomak sjene u odnosu na element. Pozitivna vrijednost pomiče sjenu prema dolje, negativna vrijednost prema gore. Obavezni parametar. blur Određuje polumjer zamućenja sjene. Što je ova vrijednost veća, to je sjena više zaglađena, postaje šira i svjetlija. Ako ovaj parametar nije naveden, zadana je vrijednost 0, čime je sjena čista, a ne mutna. Rastegni Pozitivna vrijednost rasteže sjenu, negativna je smanjuje. Ako ovaj parametar nije naveden, zadana vrijednost je 0 i sjena će biti iste veličine kao i element. boja Boja sjene u bilo kojem dostupnom CSS formatu, prema zadanim postavkama sjena je crna. Izborni parametar.Dopušteno je navesti nekoliko sjena, odvajajući njihove parametre zarezom. Uzima se u obzir sljedeći redoslijed: prva sjena na popisu nalazi se na samom vrhu, posljednja na popisu - na samom dnu.
HTML5 CSS3 IE Cr Op Sa Fx
Rezultat primjera prikazan je na sl. jedan.
Riža. 1. Prikaz sjene u pregledniku Safari
Preglednici
Safari do 5.1, Chrome do 10.0, Android do 4.0 i iOS Safari do 5.0 podržavaju svojstvo -webkit-box-shadow.
Firefox prije 4.0 podržava svojstvo -moz-box-shadow.
Internet Explorer prije verzije 9.0 ne podržava svojstvo box-shadow; umjesto toga možete koristiti nestandardno svojstvo filtera:
Filtar: progid: DXImageTransform.Microsoft.dropshadow (offX = 5, offY = 5, boja = # 000000);
Ovdje: offX - horizontalni pomak sjene; offY - okomiti pomak sjene; boja - boja sjene.
Primjenom filtra sjene stvara se oštra, oštra sjena, tako da možete koristiti filtar sjene za efekt zamućenja.
Filtar: progid: DXImageTransform.Microsoft.shadow (smjer = 120, boja = # 000000, snaga = 10);
Ovdje: smjer - kut smjera sjene od 0 do 360 °; boja - boja sjene; jačina - pomak sjene u pikselima.
CSS svojstvo box-shadow omogućuje vam postavljanje sjene za html element. Dizajneri web stranica ga često koriste kako bi nekako ukrasili i istaknuli okvire tekstom, slikama i učinili sadržaj čitljivijim.
CSS sintaksa box-shadow
... kutija-sjena: X Y R1 R2 boja; ...
- X - pomak duž osi X (horizontalno)
- Y - pomak duž Y osi (okomito)
- R1 - zamućenje (što je veća vrijednost, to je glatkiji prijelaz)
- R2 - radijus rastezanja (ako je pozitivan, onda se rasteže, negativan - komprimira)
- boja - boja (može se postaviti u bilo kojem formatu: #RGB, naziv boje)
- umetnuti - ako je ova vrijednost prisutna, sjena će se nalaziti unutar bloka (elementa)
Primjer 1: HTML okvir sa sjenom okvira bez pomaka
Ispod je najjednostavnija upotreba CSS svojstva box-shadow na html stranici, kada se ravnomjerno obavija oko cijelog okvira bez pomaka.
Primjer #1. Okvir sa sjenom
Primjer #1. Okvir sa sjenom
Primjer 2. HTML okvir s ofset box-sjenom
Gotovo isti primjer kao i prvi, ali s pomakom okvira.
Primjer br. 2. Offset Shadow Frame
Stranica se pretvara u sljedeću
Primjer br. 2. Offset Shadow Frame
Primjer br. 3. Sjaj obruba HTML-a
Implementacija sjene kao sjaja
Primjer br. 3. Sjaj
Stranica se pretvara u sljedeću
Primjer br. 3. Sjaj
Primjer 4. Unutarnji sjaj html obruba
Sjaj koji je usmjeren prema unutrašnjosti bloka i ni na koji način ne prelazi njegove granice. Učinak se stvara kroz inset atribut.
Primjer br. 4. Unutrašnji sjaj
Stranica se pretvara u sljedeću
Primjer br. 4. Unutrašnji sjaj
Primjer 5. Kombiniranje sjena u html-u
Efekt sjene može se kombinirati sa zarezima. U ovom slučaju nastaju vrlo zanimljivi rezultati. Na primjer, možete napraviti višebojni 3D okvir.
Primjer br. 5. Miješanje sjena
Stranica se pretvara u sljedeću
Primjer br. 5. Miješanje sjena
Napomena: stariji pregledniciIE prije verzije 9 ne podržava box-shadow. Prefiksi preglednika za box-shadow
- -webkit-box-shadow - za Chrome do 10, Safari do 5.1, Android do 4 i iOS do 5
- -moz-box-shadow - za Firefox do verzije 4.0
Normalne sjene lako je implementirati pomoću sjene okvira ili sjene teksta. Ali što ako trebate napraviti unutarnje sjene? Ovaj članak opisuje kako napraviti ove sjene sa samo nekoliko redaka koda.
Sintaksa
Prvo, pogledajmo dva glavna načina implementacije padajućih sjena u CSS.kutija-sjena
Oblikovati kutija-sjena sadrži nekoliko različitih vrijednosti:
Horizontalni pomak i vertikalni pomak- horizontalni i vertikalni pomak. Ove vrijednosti pokazuju u kojem smjeru će objekt baciti sjenu:
Radijus zamućenja i radijus širenja malo kompliciranije. Koja je razlika između njih? Pogledajmo primjer s dva elementa, gdje su vrijednosti polumjer zamućenja razlikuju se:
Rub sjene je jednostavno zamagljen. S drugačijom vrijednošću radijus širenja vidimo sljedeće:
U ovom slučaju vidimo da je sjena raspršena na velikom području. Ako ne navedete vrijednosti polumjer zamućenja i radijus širenja, tada će biti jednaki 0.
tekst-sjena
Sintaksa je vrlo slična kutija-sjena:
Vrijednosti su iste, samo ne širi-sjena... Primjer upotrebe:
Umetak u sjeni kutije
Da biste "okrenuli" sjenu unutar objekta, trebate dodati umetnuti u CSS-u:
Nakon što shvatite osnovnu sintaksu box-shadow, vrlo je lako razumjeti principe implementacije unutarnjih sjena. Vrijednosti su iste, možete dodati boju (RGB u hex):
Boja je u RGB formatu, alfa vrijednost je odgovorna za prozirnost sjene:
Slike sa sjenama
Dodavanje unutarnje sjene slici je malo teže nego običnoj. razd... Za početak, evo uobičajenog koda slike:
Logično je pretpostaviti da možete dodati sjenu ovako:
Img (sjena okvira: umetnuti 0px 0px 10px rgba (0,0,0,0.5);)
Ali sjena se ne vidi:
Postoji nekoliko načina za rješavanje ovog problema, svaki ima svoje prednosti i nedostatke. Razmotrimo dva od njih. Prvi je zamotati sliku u običnu razd:
Div (visina: 200px; širina: 400px; sjena okvira: umetnuti 0px 0px 10px rgba (0,0,0,0.9);) img (visina: 200px; širina: 400px; pozicija: relativna; z-indeks: -2 ;)
Sve radi, ali morate dodati malo dodatne HTML i CSS oznake. Drugi način je postaviti sliku kao pozadinu željenog bloka:
Div (visina: 200px; širina: 400px; pozadina: url (http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba (0,0,0,0.9); )
Evo što možete dobiti kada koristite unutarnje sjene:
Umetak u sjeni teksta
Za implementaciju unutarnje sjene teksta, jednostavan dodatak kodu umetnuti Ne radi:
Za rješavanje najprije primijenite naslov h1 postavite tamnu pozadinu i svijetlu sjenu:
H1 (boja pozadine: # 565656; boja: transparentna; sjena teksta: 0px 2px 3px rgba (255,255,255,0,5);)
Evo što se događa:
Dodavanje tajnog sastojka pozadinski isječak koji izrezuje sve izvan teksta (na tamnu pozadinu):
H1 (boja pozadine: # 565656; boja: prozirna; sjena teksta: 0px 2px 3px rgba (255,255,255,0,5); -webkit-background-clip: tekst; -moz-background-clip: tekst; background-clip: tekst ;)
Ispalo je gotovo ono što nam treba. Sada samo malo potamnite tekst (alfa) i rezultat:
