CSS3: Lag flere skygger skaper lette sider

Denne utbetalingen i CSS3-serien vil dekke lagdeling av flere skygger i boksen-skyggeegenskapen som kan brukes og vises i de fleste moderne nettlesere i dag. Den fantastiske egenskapen med dette er muligheten til å bruke CSS3 til å spesifisere områder der skyggefarger skaper en gane på websider uten bruk av bilder; Dette resulterer i mer lette sider, som lastes raskere. Totalt sett er det renere enn å måtte stole bare på bakgrunnsbilder.

Lager flere skygger

Box-skyggeegenskapen gjør at elementer kan ha flere og ubegrensede antall skygger, som er delt med en komma-separert liste. Syntaks for CSS3-boksskyggen er skrevet i formen:

 boks-skygge: Xpx Ypx Bpx Lpx #abc; 

Hvor:

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

Når mer enn en skygge er spesifisert, blir skyggene lagdelt fra foran til bak i den rekkefølgen de er listet opp, som i eksempelet CSS3-kode nedenfor, ved å bruke kodeprefikser for -moz - og -webkit - etterfulgt av standardelementreferansen box-shadow. Eksempelet CSS3-kode nedenfor viser seks skygger som er spesifisert i følgende rekkefølge: først en lilla skygge med en forskyvning nederst til venstre og en uskarphet-effekt på 11px og en spredningsavstand på 5px, deretter en khaki-skygge forskyvning til høyre til høyre med en 5px uskarphet, for det tredje en korallskygge forskjøvet nede til høyre med en 50px uskarphetseffekt påført, fjerde en Goldenrod-skygge forskjøvet til bunnen til venstre med en 5px uskarphet, femte en turkis skygge forskjøvet øverst til venstre med en uskarphet effekt på 50px påført, og sjette en kartreuse-skygge med forskyvning nede til venstre med en uskarphet-effekt brukt:

 .Multiple_Shadow { 
 -moz-box-skygge: 5px 5px 11px 5px lilla, 40px -30px 5px kaki, 40px 30px 50px korall, -40px 30px 5px goldenrod, -40px -30px 60px turkis, -70px 50px 50px kartre; 
 -webkit-box-skygge: 5px 5px 11px 5px lilla, 40px -30px 5px kaki, 40px 30px 50px korall, -40px 30px 5px goldenrod, -40px -30px 50px turkis, -70px 50px 50px kartreuse; 
 boksskygge: 5px 5px 11px 5px lilla, 40px -30px 5px kaki, 40px 30px 50px korall, -40px 30px 5px goldenrod, -40px -30px 50px turkis, -70px 60px 50px kartreuse; 
 bredde: 500 piksler; 
 polstring: 10px 10px; 
 margin: 120 x; 
 } 

Her er det klassifisert for følgende HTML5-seksjon:

Eksempel på flere skygger
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.

 Figur A viser resultatet som vises i Firefox 7.0: 

Figur A

Neste, morsommere med skyggelegging i dette eksemplet, ved å bruke bare fire lagdelte farger i CSS3-boksskygge-stylingelementet ved bruk av lignende HTML:

 .Multiple_Shadow2 { 
 -moz-box-skygge: -20px -10px 11px 15px lilla, -50px -40px 5px 10px goldenrod, 20px 10px 11px 15px blå, 50px 40px 5px 10px oransje; 
 -webkit-box-skygge: -20px -10px 11px 15px lilla, -50px -40px 5px 10px goldenrod, 20px 10px 11px 15px blå, 50px 40px 5px 10px oransje; 
 boksskygge: -20px -10px 11px 15px lilla, -50px -40px 5px 10px goldenrod, 20px 10px 11px 15px blå, 50px 40px 5px 10px oransje; 
 bredde: 500 piksler; 
 høyde: 600px; 
 polstring: 5px 5px; 
 margin: 120 x; 
 } 
Dette resulterer i figur B som vist i Firefox 7.0:

Figur B

I fremtidige CSS3-segmenter vil jeg gjennomgå 3D-tekst, tekstskygge, overgangsegenskaper og andre stylingalternativer som kan implementeres i de fleste moderne nettlesere i dag.

Også:

  • Se først på CSS3 webdesignelementer
  • CSS3 ressurs gjennomgang: CSS3.info
  • Arbeide med CSS3 Layout Module for flere kolonner
  • Arbeider med CSS3 bakgrunnsbilder
  • CSS3: Hvordan implementere boksen-skyggeegenskapen

© Copyright 2021 | pepebotifarra.com