Notranjost škatle. Notranje sence v CSS. Polmer raztezanja sence

Elementom lahko dodate senco in jo spremenite videz z uporabo lastnosti 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 sence. 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ši iPhone različice Safari za pravilno delovanje zahteva predpono -webkit- 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.

Bistveno pomemben je vrstni red snemanja. Prva vrednost je vedno odmik vzdolž osi X, druga - vzdolž osi Y.

Če odmik vzdolž ene od osi ni potreben, ga nastavite na nič:

Class(box-shadow: 0 8px;) – premakni senco samo vzdolž osi Y

Rezultat

Razred (box-shadow: 8px 8px;) – premik po obeh oseh

Rezultat

Negativna vrednost za osi box-shadow

Senca se bo premikala v nasprotno smer:

Class(box-shadow: -8px 8px;) – premakni senco z negativno vrednostjo vzdolž osi X

Rezultat

Polmer zameglitve sence

Tretji parameter lastnosti box-shadow. Če ni podana, je vrednost 0 in velikost sence je enaka velikosti elementa, na katerega je uporabljena.

Razred (box-shadow: 0 48px 0;) – senca podvaja dimenzije elementa, na katerega je uporabljena

Rezultat

Ko je vrednost večja od nič, robovi izgubijo definicijo, senca postane večja in vizualno svetlejša. Zameglitev se uporablja z vseh strani:

Razred (box-shadow: 0 0 8px;) – brez odmika, samo zameglitev

Rezultat

Razred (box-shadow: 0 8px 8px;) – zamik in zameglitev osi Y

Rezultat

Negativna vrednost se šteje za napako in senca sploh ne bo prikazana.

Polmer raztezanja sence

Četrti parameter lastnosti box-shadow. Spremeni velikost sence glede na element. Razteza se v vse smeri:

Razred (box-shadow: 0 0 0 8px;) – brez premika ali zamegljenosti, samo raztezanje

Rezultat

V tem primeru je senca 16 slikovnih pik večja od elementa po širini in višini: 8px levo + 8px desno in 8px zgoraj + 8px spodaj.

Negativna vrednost raztezanja sence v CSS

Senca se ne razteza, ampak se zoži z vseh strani za določeno vrednost:

Razred (box-shadow: 0 16px 0 -8px;) – zmanjša senco z negativno vrednostjo

Rezultat

Barva sence

Privzeto barva sence podvaja barvo pisave: kot v zgornjih primerih.

Barva sence je določena v katerem koli razpoložljivem formatu CSS:

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

Elementu dajte modro senco:

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

Rezultat

Notranja senca

Parameter vložek prikaže senco znotraj bloka.

Za razliko od zgoraj navedenih možnosti ni strogega vrstnega reda pisanja. Obe možnosti bosta dali enak rezultat:

Box-shadow: 0 8px #3a8fe7 inset; box-shadow: vstavljena 0 8px #3a8fe7;

Rezultat

Druga možnost je lažje razumljiva pri branju kode.

Več senc

Več senc je podanih ločenih z vejicami. Vrstni red prikaza od zgoraj navzdol:

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

Rezultat

Če zamenjate mesta, modra senca ne bo vidna:

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

Rezultat

Notranja in zunanja senca se nastavita istočasno:

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

Rezultat

Zaobljena senca

Če je elementu podana lastnost mejni polmer, bo imela senca zaobljene vogale.

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

Rezultat

Z nastavitvijo razteznosti sence povečamo njeno zaokroženost. Na primer, polmer obrobe je 8 slikovnih pik, razteg sence pa 4.

8+4=12px je polmer zaokroževanja sence.

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

Rezultat

Enako načelo velja za krčenje sence, ko je vrednost negativna.

8+(-4)=4px - dobimo dvakrat manjšo zaokroženost sence.

Če je stiskanje sence večje od polmera obrobe, bomo dobili senco s pravimi koti. Na primer, stiskanje je 16px.

8+(-16)=(-8), vendar filet ne more imeti negativne vrednosti in uporabljena bo ničla.

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

Rezultat

Lastnost CSS box-shadow Podpirajo ga vsi priljubljeni brskalniki razen Opera Mini.

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 enkrat 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 morate dodati malo več HTML oznaka in CSS. Drugi način je, da sliko nastavite za ozadje želeni blok:

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 namestite temno ozadje in svetla senca:

H1 (barva ozadja: #565656; barva: prozorna; senca besedila: 0px 2px 3px rgba(255,255,255,0.5); )

Takole se zgodi:

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:

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

Naprej lahko vidite že pripravljeni primeri 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) vstavljeno; ) .block:before, .block:after (vsebina:""; položaj:absolutno; z-index:-2; bottom:15px; levo:10px ; width:50%; height:20%; max-width:300px; box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); transform:rotate(-3deg); ) .block:after ( desno :10px; levo:samodejno; transformacija:zasukaj(3deg); )


.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; border:1px solid #efefef; border-radius:0 0 120px 120px / 0 0 6px 6px; ) .block:before, .block:after ( content:""; position:absolute ; z-indeks:-2; spodaj: 12 slikovnih pik; levo: 10 slikovnih pik; širina: 50 %; višina: 55 %; največja širina: 200 slikovnih pik; polje-senca: 0 8 slikovnih pik 12 slikovnih pik rgba (0, 0, 0, 0,5); transform:skew(-8deg) rotate(-3deg); ) .block:after (right:10px; left:auto; transform:skew(8deg) rotate(3deg); )

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 ; širina: 50 %; višina: 35 %; največja širina: 200 slikovnih pik; senca polja: -80 slikovnih pik 0 8 slikovnih pik rgba (0, 0, 0, 0,4); transformacija: poševnost (50 stopinj); izvor transformacije: 0 100 % ; ) .block:after ( display:none; )

senca CSS pri dvignjenem bloku. 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) vstavek; ) .block:before, .block:after (vsebina:""; položaj:absolutno; z-index:-2; )

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) vstavek; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( top:10px; bottom:10px ; levo: 0; desno: 50 %; box-shadow: 0 0 15px rgba(0,0,0,0.6); border-radius:10px / 100px; )


.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:10px; bottom:10px ; levo:0; desno:0; box-shadow:0 0 15px rgba(0,0,0,0.6); border-radius:10px / 100px; )

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) vstavek; ) .block:before, .block:after (vsebina:""; položaj:absolutno; z-indeks:-2; ) .block:before (zgoraj:50%; spodaj: 0px; levo:10px; desno:10px; box-shadow:0 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; desno:10px; box-shadow:0 0 15px rgba(0,0,0,0.6); border-radius:100px / 10px; )

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 0 40px rgba(0, 0, 0, 0.1) vložek; box-shadow:none; transform:rotate(-3deg); ) .block > :first-child:before ( content:""; position:absolute; z-indeks:-1; zgoraj:0px; spodaj:0; levo:0; desno:0px; ozadje:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba (0, 0, 0, 0.1) vstavljeno; ) .block:before, .block:after (vsebina:""; položaj:absolutno; z-indeks:-2; dno:15px; levo:10px; širina:50% ; višina: 20 %; največja širina: 300 slikovnih pik; senca polja: 0 15 slikovnih pik 10 slikovnih pik rgba (0, 0, 0, 0,7); transformacija: vrtenje (-3 stopinj); ) .block: po ( desno: 10 slikovnih pik; levo: samodejno; transformacija: vrtenje (3 stopinj); )

Block shadow je odličen tridimenzionalni učinek, ki daje blokom spletne strani realističnost in volumen. Ko sem začel študirati (pred približno 5-6 leti), nisem imel pojma o obstoju in pri ustvarjanju spletnega mesta sem moral narediti senco blokov sliko. Bilo je zelo neprijetno in ni se vedno izšlo tako, kot sem želel. Zahvaljujoč moči CSS, ki je olajšala delo spletnih oblikovalcev. Danes vam bom pokazal, kako ustvariti senco za bloke v CSS.

Če želite dodati senco v CSS, uporabite lastnost box-shadow .

1. premaknite senco vodoravno (do 100px v desno, do -100px v levo);
2. navpični premik (do 100px navzdol, do -100px navzgor);
3. zameglitev sence (0 - jasna senca, 100 - zelo zamegljena senca);
4. raztezanje sence (do 100px - raztezanje, do -100px - stiskanje);
5. barva sence;
6. vložek - senca je znotraj elementa, brez vložka bo senca navzven.

Box Shadow v CSS

Ko sem se začel učiti HTML (pred približno 5-6 leti), nisem imel pojma o obstoju CSS in pri ustvarjanju spletnega mesta sem moral narediti senco blokov v sliko.

Rezultat :

Tabela s sencami:

Koda primer:
box-shadow: 0px 13px 17px -6px #000000;
box-shadow: 10px -10px 0px -6px #000000;
box-shadow: 10px 13px 0px -6px #000000;
box-shadow: 1px 1px 32px -6px #000000;
box-shadow: -1px 23px 41px -25px #000000;
box-shadow: -1px 23px 41px -25px #4dc13c;
box-shadow: -10px -10px 40px -6px #000000 vložek;
box-shadow: 7px 10px 23px -8px #92a9e7;

S pomočjo sence lahko ustvarite tridimenzionalni blok:

Koda Primer
box-shadow: 1px 0px rgb(220,195,35), 1px 1px rgb(192,167,7), 2px 1px rgb(219,194,34), 2px 2px rgb(191,166,6), 3px 2px rgb(218,193,33), 3px 3px rgb(190,165,5), 4px 3px rgb(217,192,32), 4px 4px rgb(189,164,4), 5px 4px rgb(216,191,31), 5px 5px rgb(188,163,3), 6px 5px rgb(215,190, 30), 6px 6px rgb(187,162,2), 7px 6px rgb(214,189,29), 7px 7px rgb(186,161,1), 8px 7px rgb(213,188,28), 8px 8px rgb(185,160,0), 9px 8px rgb(212,187,27), 9px 9px rgb(184,159,0);
box-shadow: -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7), -2px 1px rgb(219,194,34), -2px 2px rgb(191,166,6), -3px 2px rgb(218,193) ,33), -3px 3px rgb(190,165,5), -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4), -5px 4px rgb(216,191,31), -5px 5px rgb(188,163) ,3), -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2), -7px 6px rgb(214,189,29), -7px 7px rgb(186,161,1), -8px 7px rgb(213,188) ,28), -8px 8px rgb(185,160,0), -9px 8px rgb(212,187,27), -9px 9px rgb(184,159,0);
box-shadow: -1px -0px rgb(220,195,35), -1px -1px rgb(192,167,7), -2px -1px rgb(219,194,34), -2px -2px rgb(191,166,6), -3px -2px rgb(218,193,33), -3px -3px rgb(190,165,5), -4px -3px rgb(217,192,32), -4px -4px rgb(189,164,4), -5px -4px rgb(216,191, 31), -5px -5px rgb(188,163,3), -6px -5px rgb(215,190,30), -6px -6px rgb(187,162,2), -7px -6px rgb(214,189,29), -7px - 7px rgb(186,161,1), -8px -7px rgb(213,188,28), -8px -8px rgb(185,160,0), -9px -8px rgb(212,187,27), -9px -9px rgb(184,159,0) );
box-shadow: 1px -0px rgb(220,195,35), 1px -1px rgb(192,167,7), 2px -1px rgb(219,194,34), 2px -2px rgb(191,166,6), 3px -2px rgb(218,193) ,33), 3px -3px rgb(190,165,5), 4px -3px rgb(217,192,32), 4px -4px rgb(189,164,4), 5px -4px rgb(216,191,31), 5px -5px rgb(188,163) ,3), 6px -5px rgb(215,190,30), 6px -6px rgb(187,162,2), 7px -6px rgb(214,189,29), 7px -7px rgb(186,161,1), 8px -7px rgb(213,188) ,28), 8px -8px rgb(185,160,0), 9px -8px rgb(212,187,27), 9px -9px rgb(184,159,0);

Blok1 ( širina: 70 %; največja širina: 550 slikovnih pik; rob: 10 slikovnih pik samodejno; oblazinjenje: 1em; senca okvirja: 0 1 slikovnih pik 4 slikovnih pik rgba (0, 0, 0, .3), -23 slikovnih pik 0 20 slikovnih pik -23 slikovnih pik rgba (0) , 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) vstavljeno; )

Rezultat :

Blok1 (širina: 30 %; največja širina: 550 slikovnih pik; rob: 2 em samodejno; oblazinjenje: 1 em; ozadje: #DADADA; okvirna senca: 6 slikovnih pik 6 slikovnih pik #BBBBBB, 12 slikovnih pik 12 slikovnih pik #919191; )

Rezultat :

Blok1 ( širina: 30 %; rob: 0 samodejno; oblazinjenje: 2em; senca polja: 0 0 0 1px #ccc, 0 -20px 0 -10px #00FF00, 20px 0 0 -10px #FF0000, 0 20px 0 -10px # FFFF00, -20px 0 0 -10px #FF3399; )

Rezultat :

S pomočjo sence lahko naredite čudovit okvir.

Lep okvir z uporabo lastnostiškatla- senca

Blok1 (širina: 20 %; največja širina: 250 slikovnih pik; rob: 0 samodejno; oblazinjenje: 1em; obroba: 2 slikovnih pik črtkana #999; okvirna senca: 0 0 0 1 slikovnih pik #999, vstavek 0 0 0 1 slikovnih pik #999; )
Rezultat
:




Blok1 (širina: 30 %; največja širina: 250 slikovnih pik; rob: 2em samodejno; oblazinjenje: 4em; ozadje: #dcc005; senca polja: 0 0 4em 4em #fff vstavljeni; )
Rezultat
:




Blok1 (max-width: 250px; margin: 0 auto; padding: 1em; border-radius: 10px; background: rgb(100,100,100) radial-gradient(krog pri 0 0, rgba(255,255,255,.65), rgba(255,255,255, .35)); box-shadow: vstavljeni rgba(0,0,0,.5) -3px -3px 8px, vstavljeni rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px; )
Rezultat
:





 
 
 Box Shadow v CSS
 
 
 
 

 

 


Spletna stran

 



 


Rezultat
:




To so tisti lepi učinki je mogoče doseči z uporabo senc v CSS.  Izmislite si nekaj novega in izvirnega, vse je v vaših rokah.  Imate znanje in sposobnosti. 
In v teh dneh bom objavil članek o tem, kako lahko ustvarjate brez uporabe Photoshopa.  Torej, bodite v središču dogajanja in se naročite na posodobitve mojega bloga.  Ne zamudite teme, ki vas zanima.  No, to je to, srečno!!!