Neto 

Unutarnje sjene u CSS-u. Unutarnje sjene u CSS Html oznakama sjene oko slike

Redoslijed snimanja je fundamentalno važan. Prva vrijednost je uvijek pomak duž X osi, druga - duž Y osi.

Ako pomak nije potreban duž jedne od osi, postavite ga na nulu:

Class(box-shadow: 0 8px;) – pomakni sjenu samo duž Y osi

Proizlaziti

Class(box-shadow: 8px 8px;) – pomak po obje osi

Proizlaziti

Negativna vrijednost za osi okvir-sjena

Sjena će se kretati u suprotnom smjeru:

Class(box-shadow: -8px 8px;) – pomak sjene s negativnom vrijednošću duž X osi

Proizlaziti

Radijus zamućenja sjene

Treći parametar svojstva kutija-sjena. Ako nije navedeno, vrijednost je 0, a veličina sjene jednaka je veličini elementa na koji se primjenjuje.

Class(box-shadow: 0 48px 0;) – sjena duplicira dimenzije elementa na koji je primijenjena

Proizlaziti

Kada je vrijednost veća od nule, rubovi gube definiciju, sjena postaje veća i vizualno svjetlija. Zamućenje se primjenjuje sa svih strana:

Klasa (box-shadow: 0 0 8px;) – bez pomaka, samo zamućenje

Proizlaziti

Klasa (box-shadow: 0 8px 8px;) – pomak Y-osi i zamućenje

Proizlaziti

Negativna vrijednost smatra se pogreškom i sjena se uopće neće prikazati.

Radijus istezanja sjene

Četvrti parametar svojstva kutija-sjena. Mijenja veličinu sjene u odnosu na element. Proteže se u svim smjerovima:

Klasa (box-shadow: 0 0 0 8px;) – nema pomaka ili zamućenja, samo rastezanje

Proizlaziti

U ovom slučaju, sjena je 16 piksela veća od elementa u širini i visini: 8px lijevo + 8px desno i 8px gore + 8px dolje.

Negativna vrijednost istezanja sjene u CSS-u

Sjena se ne rasteže, već se sužava sa svih strana za određenu vrijednost:

Klasa (box-shadow: 0 16px 0 -8px;) – smanji sjenu s negativnom vrijednošću

Proizlaziti

Boja sjene

Prema zadanim postavkama, boja sjene duplicira boju fonta: kao u gornjim primjerima.

Boja sjene navedena je u bilo kojem dostupnom CSS formatu:

  • #ff0009
  • rgb(255, 0, 9)
  • hsl(358, 100%, 50%);

Dajte elementu plavu sjenu:

Klasa (box-shadow: 0 8px #3a8fe7;)

Proizlaziti

Unutarnja sjena

Parametar umetnuti prikazuje sjenu unutar bloka.

Za razliku od gore navedenih opcija, ne postoji striktan redoslijed pisanja. Obje opcije će dati isti rezultat:

Okvir-sjena: 0 8px #3a8fe7 umetnut; box-shadow: umetnuti 0 8px #3a8fe7;

Proizlaziti

Drugu je opciju lakše razumjeti prilikom čitanja koda.

Nekoliko sjena

Višestruke sjene navedene su odvojene zarezima. Redoslijed prikaza od vrha prema dolje:

Klasa (box-shadow: 0 8px #3a8fe7, 0 16px #3ae7af; )

Proizlaziti

Ako promijenite mjesto, plava sjena neće biti vidljiva:

Klasa (box-shadow: 0 16px #3ae7af, 0 8px #3a8fe7; )

Proizlaziti

Unutarnja i vanjska sjena postavljaju se istovremeno:

Klasa (box-shadow: 0 16px #3ae7af, umetnuta 0 8px #3a8fe7; )

Proizlaziti

Zaobljena sjena

Ako se elementu da svojstvo granični radijus, sjena će imati zaobljene kutove.

Klasa (box-shadow: 0 16px #3a8fe7; border-radius: 8px; )

Proizlaziti

Postavljanjem istezanja sjene povećavamo njezino zaokruživanje. Na primjer, radijus granice je 8 piksela, a rastezanje sjene je 4.

8+4=12px je radijus zaobljenja sjene.

Klasa (box-shadow: 0 16px 0 4px #3a8fe7; border-radius: 8px; )

Proizlaziti

Isti princip vrijedi za smanjivanje sjene kada je vrijednost negativna.

8+(-4)=4px - dobivamo duplo manje zaokruživanje sjene.

Ako je kompresija sjene veća od graničnog polumjera, dobit ćemo sjenu s pravim kutom. Na primjer, kompresija je 16px.

8+(-16)=(-8), ali filet ne može imati negativnu vrijednost i primijenit će se nula.

Klasa (box-shadow: 0 24px 0 -16px #3a8fe7; border-radius: 8px; )

Proizlaziti

CSS svojstvo kutija-sjena Podržavaju ga svi popularni preglednici osim Opera Mini.

Svojstvo box-shadow dodaje jednu ili više sjena elementu. Sjena je kopija elementa pomaknuta za navedenu udaljenost. Sjene mogu biti vanjske ili unutarnje, zamagljene ili ravne, a mogu pratiti obrise blokova sa zaobljenim kutovima. Pomoću ključne riječi inset stvaraju se sjene unutar elementa, čineći element vizualno voluminoznim ili udubljenim.

Kako napraviti sjenu okvira pomoću svojstva box-shadow

Podrška za preglednik

IE: 9.0
Rub: 12.0
Firefox: 4.0, 3.5 -moz-
Krom: 10.0, 4.0 -webkit-
Safari: 5.1, 3.1 -webkit-
Opera: 11.5
iOS Safari: 5.1, 3.1 -webkit-
Android preglednik: 4.0, 2.1 -webkit-

1. Sintaksa svojstva box-shadow

Svojstvo box-shadow pridružuje jednu ili više sjena kutiji. Svojstvo prihvaća ili vrijednost none, koja označava da nema sjena, ili popis sjena odvojenih zarezima poredanih od početka do kraja.

Svaka sjena je zasebna sjena, predstavljena s 2 do 4 duljine, izbornom bojom i izbornom umetnutom ključnom riječi. Dopuštene duljine 0 ; izostavljene boje zadane su vrijednosti svojstva boje.

Imovina se ne nasljeđuje.

Riža. 1. Sintaksa svojstva box-shadow
Vrijednosti:
x-pomak Postavlja horizontalni pomak sjene. Pozitivna vrijednost crta pomak sjene desno od teksta, negativna duljina crta sjenu lijevo.
y-pomak Postavlja vertikalni pomak sjene. Pozitivna vrijednost pomiče sjenu prema dolje, negativna vrijednost pomiče sjenu prema gore.
zamutiti Postavlja radijus zamućenja. Negativne vrijednosti nisu dopuštene. Ako je vrijednost zamućenja nula, onda je rub sjene oštar. Inače, što je vrijednost veća, to je rub sjene zamućeniji.
rastezanje Postavlja udaljenost za koju se sjena povećava. Pozitivne vrijednosti uzrokuju širenje sjene u svim smjerovima za navedeni radijus. Negativne vrijednosti uzrokuju smanjenje sjene. Za unutarnje sjene, širenje sjene znači sažimanje oblika perimetra sjene.
boja Postavlja sjene. Ako nema boje, korištena boja se uzima iz svojstva boje. Za Safari mora se navesti boja sjene.
umetnuti Mijenja bačenu sjenu bloka iz vanjske u unutarnju sjenu.
nikakav Zadana vrijednost znači da nema sjene.
početni Postavlja vrijednost svojstva na zadanu vrijednost.
naslijediti Nasljeđuje vrijednost svojstva od nadređenog elementa.

Efekti sjene primjenjuju se na sljedeći način: prva sjena je na vrhu, a ostale su iza. Sjene ne utječu na izgled i mogu preklapati druge elemente ili njihove sjene. Što se tiče konteksta slaganja i redoslijeda crtanja, vanjske sjene elementa crtaju se izravno ispod pozadine tog elementa, a unutarnje sjene elementa crtaju se izravno iznad pozadine tog elementa (ispod obruba i slike obruba, ako ih ima).

Ako element ima više okvira, svi oni dobivaju sjene, ali sjene se iscrtavaju samo tamo gdje će se iscrtati i granice; vidi box-decoration-break.

Sjene ne uzrokuju pomicanje niti povećavaju veličinu područja pomicanja.

2. Primjeri sjena blokova

2.1. Unutarnja sjena

.example-shadow-1 ( background: #e6e3df; text-align: center; ) .example-shadow-1 span ( margina: 50px; visina: 100px; width: 200px; display: inline-block; box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0,5), 1px 1px 5px rgba(255, 255, 255, 1);

2.2. Ravna sjena s jedne strane

ravan

ravan

.example-shadow-2 ( pozadina: bež; text-align: center; ) .example-shadow-2 a ( display: inline-block; border-radius: 5px; padding: 15px 35px; font-size: 22px; text -dekoracija: nema; pozadina: #55acee; ​​​​box-shadow: 0 .example-shadow-2 a:pozadina: #6FC6FF;

2.3. Sjena materijalnog dizajna

.example-shadow-3 ( background: #e8e8e8; text-align: center; ) .example-shadow-3 span ( background: white; display: inline-block; width: 200px; height: 100px; margin: 50px; box -sjena: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)

Objašnjenja:

  1. , - Svojstva CSS jezika koja se koriste za stvaranje sjena.
  2. , , — parametri svojstva sjene.
  3. , , , — CSS svojstva, odgovorna za promjenu veličine i lokacije elemenata.
  4. — oznaka, odgovorna za stvaranje veza.
  5. Selektori su svojevrsne poveznice uz pomoć kojih CSS određuje koji elementi trebaju primijeniti određene stilove.
  6. Hover je birač stanja.
  7. — svojstvo promjene animiranog objekta.

Sjene se često koriste za postizanje trodimenzionalnog učinka. Omogućuju vam da tekstovima i blokovima date jedinstveni stil, au kombinaciji s posebnim fontovima možete postići izvrstan učinak.

CSS nam nudi toliko prostora za maštu i eksperimentiranje da će vam trebati godine da ih sve isprobate.

U ovom ćemo članku detaljno opisati stvaranje sjena u CSS-u. Uz uobičajene vanjske sjene, pokazat ćemo vam kako izraditi unutarnje i državne sjene.

CSS - sjena okvira. box-shadow svojstvo


html( pozadina: #fff; ) tijelo (širina: 80%; margina: 0 automatski; boja pozadine: rgba(150,60,60,0.54) sjena okvira: -1px 5px 5px 5px rgba(77,63,63) ,0,88) )

html (

pozadina : #fff ;

tijelo (

širina: 80%;

margina: 0 auto;

box-shadow: -1px 5px 5px 5px rgba (77,63,63,0.88)

Alat nam omogućuje stvaranje jedne ili više sjena oko bloka, bilo kojom bojom.

U biti, što je sjena? Ovo je točna kopija područja elementa, koja ima određenu boju i položaj. Ovi se parametri mogu postaviti pomoću svojstva box-shadow.

Svojstva sjene koriste se ovim redoslijedom:

  1. Pomaknite se vodoravno.
  2. Kreći se okomito.
  3. Razina nejasnoće.
  4. Istezanje.
  5. Boja sjene.

Ovo je redoslijed kojim treba navesti parametre sjene. Glavna stvar je ne brkati vrijednost, budući da su prva 4 postavljena na isti način, koristeći numeričke vrijednosti - , , i tako dalje.

Prvi parametar, koji se zove — pomiče sjenu vodoravno u odnosu na blok. Prihvaća sve vrijednosti, uključujući negativne.

Negativne vrijednosti pomiču sjenu ulijevo, a pozitivne vrijednosti pomiču sjenu udesno. Vrijednost parametra može biti jednaka 0 kada se zamućuju sjene duž okomite osi.

Sljedeća po redu je imovina . Odgovoran za okomito pomicanje sjene. Također prihvaća sve vrijednosti - pozitivne i negativne. Negativne vrijednosti pomiču sjenu gore, a pozitivne vrijednosti pomiču sjenu prema dolje.

Ovaj se parametar može postaviti na 0. Obično se koristi za horizontalno zamućenje sjene.

Pažnja! Preporučujemo da vrijednost navedete u pikselima. Možete koristiti druge vrijednosti - , , % i drugi, ali to se ne preporučuje. Sve ove vrijednosti su prilično velike za stvaranje sjena. Njihovim određivanjem možete pretjerati s veličinama.

3 vrijednost - ili zamutiti. Nije potrebno unijeti ovu vrijednost bez navođenja, sjene će i dalje raditi.

Navedena vrijednost određuje radijus duž kojeg će sjena biti zamućena. Negativne vrijednosti nisu naznačene.

Ovdje se mogu koristiti i veće vrijednosti. Jako zamućenje pomoći će u stvaranju šarenog efekta, ali samo u nekim situacijama.

Pretposljednja vrijednost, koja je odgovorna za rastezanje sjene. Ovo također nije obavezno, ali može dodati malo boje vašoj sjeni.

Širenje se događa zbog rastezanja središnjeg čvrstog dijela sjene koji se nalazi između zamućenih rubova.

Ovaj parametar može prihvatiti bilo koje vrijednosti, pozitivne i negativne. Pozitivne vrijednosti razvlače sjenu, dok je negativne smanjuju.

I posljednji parametar - . Također ga nije potrebno specificirati, jer sjena okvira prema zadanim postavkama ima vlastitu boju - crnu.

Za promjenu boje prikladan je bilo koji sustav boja - kao i standardne boje.

Pažnja! Ako želite da svojstvo radi u Safariju, tada ovaj parametar mora biti naveden, čak i ako koristite standardnu ​​crnu boju.

Unutarnja sjena - CSS


html( pozadina: #fff; ) tijelo (širina: 80%; margina: 0 auto; boja pozadine: rgba(150,60,60,0.54) sjena okvira: -1px 5px 5px 5px rgba(77,63,63) ,0.88) umetak;

html (

pozadina : #fff ;

tijelo (

širina: 80%;

margina: 0 auto;

boja pozadine: rgba (150,60,60,0.54)

box-shadow : -1px 5px 5px 5px rgba (77,63,63,0.88 ) umetak ;

Dakle, pogledajmo prvi primjer korištenja sjena. Ovdje ćemo pogledati stvaranje unutarnje sjene za blok tijela.

Za početak otvorite naš HTML dokument i ispunite ga. Ne morate navesti nikakve oznake, nemojte ispunjavati sadržaj, glavna stvar je stvoriti oznaku .

Otvorite naš CSS dokument i napišite oznaku , to će biti naš glavni izbornik.

Zatim otvorite vitičaste zagrade i napišite svojstvo . Postavite lokaciju, zamutite, rastegnite. Već znate kako postaviti ove vrijednosti. Nakon ovoga, postavili smo boju sjene, učinili smo je bijelom, ali možete je postaviti po svom ukusu.

Sada ono najvažnije. Kako biste stvorili unutarnju sjenu bloka u CSS-u, trebate navesti umetnutu vrijednost. Možete je odrediti odmah nakon definiranja boje.

Kao rezultat toga, završili smo s ovim blokom:

HTML/CSS - sjena teksta


html( pozadina: #fff; ) tijelo (širina: 80%; margina: 0 automatski; boja pozadine: rgba(150,60,60,0.54) sjena okvira: -1px 5px 5px 5px rgba(77,63,63) ,0.88) umetnuti; ) div( margina: 150px; box-shadow: -1px 5px 5px 5px rgba(77,63,63,0.88); font-size: 25px; )

html (

pozadina : #fff ;

tijelo (

širina: 80%;

margina: 0 auto;

boja pozadine: rgba (150,60,60,0.54)

5px rgba(77,63,63,0.88);

veličina fonta: 25px;

Stvoreno na sličan način, ali umjesto box-shadowa korištenjem svojstva . Parametri svojstva su sljedećim redoslijedom.

  1. Horizontalni pomak.
  2. Vertikalni pomak.
  3. Radijus zamućenja. Nije potrebno.
  4. Boja.

Kao što vidite, u ovoj nekretnini nema mogućnosti rastezanja. Veličina sjene uvijek će biti identična veličini teksta; to se ne može ispraviti.

Vrlo je prikladno nanositi sjene jednu na drugu. Da biste to učinili, morate navesti nekoliko skupina parametara

Prva sjena će se nalaziti bliže tekstu, a druga iznad njega. Podsjeća na rad sa svojstvima obrisa i obruba, ali ovdje možete stvoriti 2, 3 ili više sjena.

Hover Shadows - CSS

Sada pogledajmo stvaranje sjena za određeno stanje. U našem primjeru koristit ćemo gumb.

Kako biste stvorili sjenu za gumb, prvo ga morate postaviti. Otvorite oznaku a, zapišite klasu gumba za nju i bilo koju tekstualnu vrijednost za bolji prikaz.

Prvo, postavimo položaj pomoću svojstva margine i povećajmo gumb na određenu veličinu. Da biste ga povećali, možete koristiti svojstva širine i visine ili koristiti svojstvo padding.

Sada postavljamo boju pozadine, tekst i okvir. Naš gumb je spreman, počnimo stvarati sjenu.

Prvo, stvorimo običnu sjenu, male veličine, koristeći box-shadow. Bit će vidljiv prema zadanim postavkama, bez zadržavanja pokazivača iznad gumba.


Napravimo najjednostavniji učinak - povećajte sjenu. Možete ga učiniti zamućenim ili ga rastegnuti tako da odgovara vašem ukusu.

Za najbolji učinak, postavimo svojstvo prijelaza za običnu vezu i postavimo vrijeme na 0,5 s.

Sada imamo sjajan gumb s prekrasnom sjenom koja će se glatko proširiti kada lebdite.


Zaključak

U ovom smo članku naučili o svim osnovnim načinima stvaranja sjena. Raspravljali smo o svim svojstvima i parametrima sjena.

Sve elemente koji su prikazani na snimkama zaslona možete pronaći u izvornoj mapi. Ako želite, možete ih sami istražiti i eksperimentirati s vrijednostima. Možda ćeš ti to učiniti mnogo bolje nego mi.

Pozdrav, dragi čitatelji. Danas ćemo raditi s vama prekrasna sjena za blokove pomoću CSS-a. Mislim da će vam ovo biti vrlo korisno, pogotovo ako izrađujete predloške. I blokovi sa sjenama izgledaju vrlo atraktivno i moderno.

Podrška za preglednik

U osnovi svi moderni preglednici podržavaju efekte sjene:

  • Internet Explorer 9.0 i noviji;
  • Firefox 3.5 i noviji;
  • Chrome 1 i noviji;
  • Safari 3 i noviji;
  • Opera 10.5 i novije.

Također bih želio spomenuti jednu važnu točku: za neke preglednike koristit ćemo određene prefikse. Koristi se za Firefox -moz-, za Chrome i Safari trebate koristiti prefiks -webkit.

Pa, sad prijeđimo na najzanimljiviji dio. Pogledajmo sve sjene zasebno, bit će 8 efekata.

Efekt sjene 1

U ovom primjeru, sjena bloka je na dnu.

HTML

Učinak 1

CSS

poravnanje teksta: središte; položaj: relativno; gore:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*========= ================ ========== * Učinak 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;

Efekt sjene 2

U ovom primjeru sjena od bloka ide lijevo i desno, ali nema je u sredini. Ispostavilo se da je to vrlo zanimljiv učinak.

HTML

Učinak 2

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinak 2 * == ===================================== =========================*/ .effect2 ( položaj: relativan; .effect2:prije, .effect2:poslije ( z-index: -1 ; pozicija: ""; lijevo: 50%; maksimalna širina: #777; 777;moz-box-shadow: 0 10px : rotate(-3deg); -ms-transform: rotate(-3deg); -transformacija: rotacija (3deg); -transformacija: rotacija (3deg); desno: 10px; : auto )

Efekt sjene 3

Ovdje je sjena od bloka samo s lijeve strane.

HTML

Učinak 3

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinak 3 * == ===================================== =========================*/ .effect3 ( pozicija: relativna; .effect3:prije ( z-index: -1; pozicija: apsolutna; sadržaj: 15px; širina: 80%; pozadina: 0 10px -moz; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg) ; -moz-transform: rotate(-3deg);

Efekt sjene 4

Sjena na desnoj strani.

HTML

Učinak 4

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinak 4 * == ===================================== =========================*/ .effect4 ( pozicija: relativna; .effect4:after ( z-index: -1; pozicija: apsolutna; sadržaj: 15px; lijevo: 50%; pozadina: 0 10px ; -moz-box-shadow: 0 15px rotate(3deg); -moz-transform: rotate(3deg);

Efekt sjene 5

U ovom slučaju, sjena s obje strane se jače pomaknula prema dolje.

HTML

Učinak 5

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinak 5 * == ===================================== =========================*/ .effect5 ( položaj: relativan; .effect5:prije, .effect5:poslije ( z-index: -1 ; pozicija: ""; lijevo: 50%; max. širina: #777; 777;moz-box-shadow: 0 35px : rotate(-8deg); -moz-transform: rotate(-8deg); -transformacija: rotacija(8deg); -transformacija: rotacija(8deg); desno: 10px; : auto )

Efekt sjene 6

Ovdje je učinak zakrivljenih sjena na dnu bloka.

HTML

Učinak 6

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinak 6 * == ===================================== =========================*/ .effect6 ( position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) umetnuto; 0 0 40px rgba(0, 0, 0, 0.1) umetnuto polje: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) umetnuto; .effect6:before, .effect6:after ( content:""; position:apsolute; z -index:-1; webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0,0,0,0.8); shadow:0 20px rgba(0,0,0,0.8); bottom:10px; -moz-border-radius:after6:right:auto; webkit-transformacija :koso(8deg) rotacija(3deg); -moz-transformacija:koso(8deg) rotacija(3deg); -o-transformacija:koso(8deg) rotacija(3deg); transformacija:koso(8deg) rotacija(3deg); )

Efekt sjene 7

Isti efekt je samo sjena ispod i iznad bloka.

HTML

Učinak 7

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinak 7 * == ===================================== =========================*/ .effect7 ( position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) umetnuto; 0 0 40px rgba(0, 0, 0, 0.1) umetnuto polje: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) umetnuto; .effect7:before, .effect7:after ( content:""; position:apsolute; z -index:-1; webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0,0,0,0.8); shadow:0 20px rgba(0,0,0,0.8); bottom:10px; -moz-border-radius:10px; after (right:10px; left: -webkit-transform: skew(8deg) rotate(3deg); -moz-transform:ew(8deg) rotate(3deg); -o-transformacija:koso(8deg) rotacija(3deg); transformacija:koso(8deg) rotacija(3deg); )

Efekt sjene 8

Učinak zakrivljenih sjena na stranama bloka.

HTML

Učinak 8

CSS

.box h3( text-align:center; position:relative; top:80px; ) .box ( width:70%; height:200px; background:#FFF; margin:40px auto; ) /*====== ==================================================== ========= * Učinak 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) umetnuto; 0 0 40px rgba(0, 0, 0, 0.1) umetnuto polje: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0 , 0, 0, 0.1) umetnuto; .effect8:before, .effect8:after ( content:""; position:apsolute; z -index:-1; webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0,0,0,0.8); shadow:0 20px rgba(0,0,0,0.8); bottom:0; -moz-border-radius:100px / 10px; nakon (right:10px; left:auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform:kew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg) ); -o-transformacija:koso(8deg) rotacija(3deg); transformacija:koso(8deg) rotacija(3deg); )

To je sve, dragi prijatelji. Ako vam nešto nije jasno, svakako pitajte u komentarima. Vidimo se uskoro.

Isto kao ažuriranje 3, ali s modernim css pravilima (=less) tako da posebno pozicioniranje na pseudo-elementu nije potrebno.

#box (boja pozadine: #3D6AA2; širina: 160px; visina: 90px; pozicija: apsolutna; vrh: calc(10% - 10px); lijevo: calc(50% - 80px); ) .box-shadow:after ( sadržaj:""; širina:100%; sjena okvira: 0px 8px #000000;

AŽURIRANJE 3

#kutija (boja pozadine: #3D6AA2; širina: 160px; visina: 90px; margina-top: -45px; margin-lijevo: -80px; položaj: apsolutni; vrh: 50%; lijevo: 50%; ) .box- shadow:after ( sadržaj: ""; širina: 150px; visina: 1px; margin-gor: 88px; margin-left: -75px; display: block; position: absolute; left: 50%; z-index: -1; -webkit-box-shadow: 0px 0px 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 izbornom opcijom CSS box tag, kao što su svi drugi upravo naveli. Evo demo:

Webkit-box-shadow: 0 4px 4px -2px #000000; -moz-box-shadow: 0 4px 4px -2px #000000; okvir-sjena: 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 širenje oblika sjene u smjeru duž navedenog radijusa. Negativne vrijednosti uzrokuju slaganje oblika sjene.

AŽURIRAJ

Ono što sam napravio je stvaranje "elementa 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 (width: 84px; position: relative; ) #element (background-color: #3D668F; height: 54px; width: 100%; position: relative; z-index: 10; ) #shadow ( background-color: # 3D668F; margin-left: -40px; z-index: 0px 4px #000000;

Izvorni odgovor

Da, možete to učiniti s istom sintaksom koju ste unijeli. Prva vrijednost kontrolira vodoravni položaj, a druga vrijednost kontrolira okomiti položaj. Dakle, samo postavite prvu vrijednost na 0px, a drugu na bilo koji pomak koji želite napraviti kako slijedi.