CSS3: Hvordan implementere boksen-skyggeegenskapen

Fortsetter vi i vår CSS3-serie vil dette segmentet fokusere på boksen-skyggeegenskapen, som kan implementeres i dag for visning i flere moderne nettlesere. Fullstendige detaljer om W3C bakgrunn og grenser Kandidatens anbefaling finner du i avsnitt 7.2 for boksen-skyggeegenskapen.

Alle demonstrasjoner og eksempler i dette segmentet på boksen-skyggeegenskapen vil bruke HTML-skjeden som vises nedenfor:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam condimentum. Praesent euismod auctor dui.

Box-shadow

Skyggeegenskapen har eksistert siden CSS2; Imidlertid kan nå skyggeegenskapene brukes på grenser, bilder og tekst med både indre og ytre slippskygger, og tillater spesifikasjoner for farge, størrelse, uskarphet og forskyvningsverdier. For ytterligere å definere skyggestyleringsalternativene med CSS3, kan boksen-skyggeegenskapen tillate en komma-separert liste over skyggeverdier som er definert av et uttrykk på 2 til 4 lengder spesifisert i følgende rekkefølge: horisontale og vertikale forskyvninger, uskarphet avstand, spredt avstand, en valgfri fargeverdi, og til slutt, en valgfri innsatt søkeordverdi for å skape en indre skygge i motsetning til standard ytre skygge.

CSS3 tar skyggeegenskapen utover sin tidligere støtte utelukkende i Safari-nettleseren for å inkludere de respektive prefikser for Mozilla Firefox og Chrome, Safari og Konqueror ved å bruke -moz- og -webkit- .

Syntaks for CSS3-boksskyggen er skrevet i formen:

 boks-skygge: Xpx Ypx Bpx Lpx #abc; 
  • Xpx = x-akset horisontal forskyvning
  • Ypx = y-aksen vertikal forskyvning
  • Bpx = uskarphet effekt
  • Lpx = spredningslengde
  • #abc = farge

Komponenter av boksen-skyggeegenskapen blir dekodet av nettlesere på følgende måte:

  • Den første lengden for den horisontale forskyvningen vil kaste skyggen til høyre for boksen med en positiv verdi, og en negativ verdi vil kaste skyggen til venstre for boksen.
  • Den andre lengden er for den vertikale forskyvningen, og en positiv verdi vil kaste skyggen under boksen mens en negativ verdi kaster skyggen over boksen.
  • Den tredje lengden er uskarphetseffekten, og når den er satt til 0 vil det være et skarpt resultat, mens en høyere verdi gir mer uskarphetstil. Negative verdier er ikke tillatt.
  • En fjerde lengde er spredningsavstanden der positive verdier får skyggeformen til å ekspandere i alle retninger med den spesifiserte radius, og negative verdier får skyggeformen til å trekke seg sammen.
  • Fargen er den definerte fargen på skyggeformen.
  • Nøkkelordet "innsatt" resulterer i en indre skygge der boksen vil vises som om den er skåret ut av lerretet og forskjøvet bak den.

Diagrammet nedenfor, levert av W3C Bakgrunner og grenser kandidatanbefaling, viser effekten av spredning og uskarphet på skyggen:

Figur A

Å bruke lignende verdier definert i W3C-eksemplet ovenfor og bruke lignende styling på HTML-eksemplet ovenfor gir et lignende resultat som vist i CSS3-koden og resulterende visning vist nedenfor.

 .skygge { 
 bredde: 400 piksler; 
 høyde: 120 x; 
 kant: 12px solid blå; 
 bakgrunnsfarge: oransje; 
 kant-øverst-venstre-radius: 60px 90px; 
 grense-nede til høyre-radius: 60px 90px; 
 kasseskygge: 25x 30px 15px 1px rgba (0, 0, 0, 0, 4), 
 12px 12px 0px 8px rgba (0, 0, 0, 0, 4) innsatt; 
 -moz-box-skygge: 25px 30px 15px 1px rgba (0, 0, 0, 0, 4), 
 12px 12px 0px 8px rgba (0, 0, 0, 0, 4) innsatt; 
 -webkit-box-skygge: 25px 30px 15px 1px rgba (0, 0, 0, 0, 4), 
 12px 12px 0px 8px rgba (0, 0, 0, 0, 4) innsatt; 
 polstring: 5px 20px; 
 } 

Her er resultatet gjengitt i Chrome 14.0.835:

Figur B

Følgende demonstrasjoner vil fremheve egenskapskomponentene i boksen-skygge og flere alternativer for deres bruk. Eksemplene på CSS3-stilegenskaper som er oppført nedenfor, definerer en skyggeboks med en 10-x 10-x-boks-skygge med en 8-x x skygge-støpt lengde og en nedre høyre-radius på 35px:

 .skygge { 
 kant: 10px solid # 708090; 
 box-skygge: 10px 10px 8px # d3d3d3; 
 -moz-box-skygge: 10px 10px 8px # d3d3d3; 
 -moz-border-radius-bottomright: 35px; 
 -webkit-box-skygge: 10px 10px 8px # d3d3d3; 
 -webkit-border-bottom-right-radius: 35px; 
 bredde: 400 piksler; polstring: 10px 10px; 
 } 

Dette resulterer i følgende bilde som gjengitt i Chrome 14.0.835:

Figur C

En lignende CSS3-konstruksjon kan brukes ved å inkorporere Mozilla -moz- prefikset for kortere radius- korthoregelen, som ble diskutert i det forrige CSS3-segmentet. Dette eksemplet spesifiserer radius øverst til venstre og høyre nederst til høyre på 35px hver, men i kombinasjon med de ovennevnte stylingegenskapene er dette bare kompatibelt i Firefox; legg merke til at moz-border-radius-bottomright er kommentert:

 .skygge { 
 kant: 10px solid # 708090; 
 box-skygge: 10px 10px 8px # d3d3d3; 
 -moz-border-radius: 35px 0px 35px 0px ; 
 -moz-box-skygge: 10px 10px 8px # d3d3d3; 
 / * -moz-border-radius-bottomright: 35px; * / 
 -webkit-box-skygge: 10px 10px 8px # d3d3d3; 
 -webkit-border-bottom-right-radius: 35px; 
 bredde: 400 piksler; polstring: 10px 10px; 
 } 

Nedenfor er resultatet i Firefox 6.0.2:

Figur D

I tillegg kan det samme sluttresultatet oppnås med det tilsatte CSS3 -webkit- prefikset for Chrome, Safari og Konqueror med følgende stylingegenskaper for grensen øverst til venstre-radius lagt til som fremhevet nedenfor:

.skygge {

kant: 10px solid # 708090;

box-skygge: 10px 10px 8px # d3d3d3;

-moz-border-radius: 35px 0px 35px 0px;

-moz-box-skygge: 10px 10px 8px # d3d3d3;

/ * -moz-border-radius-bottomright: 35px; * /

-webkit-box-skygge: 10px 10px 8px # d3d3d3;

-webkit-border-bottom-right-radius: 35px;

-webkit-border-top-left-radius: 35px;

bredde: 400 piksler; polstring: 10px 10px;

}

Her er resultatet som gjengitt i Chrome 14.0.835:

Figur E

Eksempler på boksskygge-offset

Nå vil jeg gi deg noen eksempler som deler ned skyggen til motsatte motregninger. Du vil se uskarphet og spredning vises individuelt for å vise frem deres separate effekter når de brukes med CSS3-boksskyggeegenskapene.

Eksempel 1 viser en skyggeforskyvning til venstre og øverst med -6px:

 .shadow_1 { 
 kant: 10px solid # 708090; 
 -moz-box-skygge: -6px -6px # d3d3d3; 
 -webkit-box-skygge: -6px -6px # d3d3d3; 
 boks-skygge: -6px -6px # d3d3d3; 
 bredde: 500 piksler; 
 polstring: 10px 10px; 
 } 

Merk: Alle eksempler vises i Chrome 14.0.835.

Figur F

Eksempel 2 viser samme skyggeforskyvning til venstre med en uskarphet avstand på 6px lagt til:

 .shadow_2 { 
 kant: 10px solid # 708090; 
 -moz-box-skygge: -6px -6px 6px # d3d3d3; 
 -webkit-box-skygge: -6px -6px 6px # d3d3d3; 
 boks-skygge: -6px -6px 6px # d3d3d3; 
 bredde: 500 piksler; 
 polstring: 10px 10px; 
 } 

Figur G

Eksempel 3 viser den samme skyggeeffekten med en spredningsavstand på 6px lagt til:

 .shadow_3 { 
 kant: 10px solid # 708090; 
 -moz-box-skygge: -6px -6px 6px 6px # d3d3d3; 
 -webkit-box-skygge: -6px -6px 6px 6px # d3d3d3; 
 boks-skygge: -6px -6px 6px 6px # d3d3d3; 
 bredde: 500 piksler; 
 polstring: 10px 10px; 
 } 

Figur H

Eksempel 4 viser den samme skyggeeffekten med både en uskarphetavstand på 6px og en spredningsavstand på 6px:

 .shadow_4 { 
 kant: 10px solid # 708090; 
 -moz-box-skygge: -6px -6px 6px 6px # d3d3d3; 
 -webkit-box-skygge: -6px -6px 6px 6px # d3d3d3; 
 boks-skygge: -6px -6px 6px 6px # d3d3d3; 
 bredde: 500 piksler; 
 polstring: 10px 10px; 
 } 

Figur I

Og noen flere eksempler vises her ved hjelp av innsatt nøkkelord for å spesifisere en indre skygge. Spesifikasjonen sier at en indre kasseskygge kaster en skygge som om alt utenfor polstringskanten var ugjennomsiktig. Den indre skyggen tegnes bare innenfor polstringskanten: den klippes utenfor paddingboksen til elementet.

Eksempel 5 viser en indre skygge forskjøvet til venstre og øverst med -7px:

 .shadow_5 { 
 kant: 10px solid # 708090; 
 -moz-box-skygge: innsetting -7px -7px # d3d3d3; 
 -webkit-box-skygge: innsetting -7px -7px # d3d3d3; 
 boks-skygge: innsetting -7px -7px # d3d3d3; 
 bredde: 500 piksler; 
 polstring: 10px 10px; 
 } 

Figur J

Eksempel 6 viser den samme indre skyggen med både en uskarphet avstand på 7px og en spredningsavstand på 7x:

 .shadow_6 { 
 kant: 10px solid # 708090; 
 -moz-box-skygge: innsetting -7px -7px 7px 7px # d3d3d3; 
 -webkit-box-skygge: innsetting -7px -7px 7px 7px # d3d3d3; 
 boksskygge: innsats -7px -7px 7px 7px # d3d3d3; 
 bredde: 500 piksler; 
 polstring: 10px 10px; 
 } 

Figur K

De neste segmentene på CSS3 vil dekke lagdeling av flere skygger i boksen-skyggeegenskapen, 3D-tekst, tekstskygge, overgangsegenskaper og andre stylingsalternativer som kan implementeres i de fleste moderne nettlesere i dag.

© Copyright 2021 | pepebotifarra.com