Slik bruker du to CSS3-skyggeeffekter - dummier

CSS inneholder to skyggeeffekter, som begge krever minst to egenskaper: horisontale og vertikale skyggedimensjoner. CSS3-effekter integreres raskt i webdesign, og designere kommer opp med noen spennende og kreative måter å bruke dem på.

CSS3s skyggeeffekter er som følger:

• Box-shadow brukes på grenser rundt selektorer.

• Tekstskygge gjelder skygger for tekst.

Bruk bokseskygge som eksempeleksempel ser slik ut:

boksskygge: h-skygge v-skygge;

Positive h-skyggeverdier genererer en skygge til høyre for teksten, mens negative h-skyggeverdier gir en skygge til venstre for teksten. Positive v-skyggeverdier genererer en skygge under teksten, mens negative verdier skaper en skygge over teksten. Verdiene defineres normalt i piksler.

Skygger inneholder også ofte en uskarphet. Blurverdien definerer tykkelsen på blurelementet i gradienten - hovedsakelig hvor stor det er å plassere gradienten i skyggen. En høyere uskarphet skaper en, vel, blurrier-effekt, mens en lavere uskarphet verdier skaper en skarpere, skarpere skygge. Blurverdien vises etter h-skyggen og v-skyggeverdiene i stildefinisjonen, slik:

boks-skygge: h-skygge v-skygge uskarphet;

Du kan også definere en skyggefarge (hvis ingen farge er angitt, vises en standardfarge i nettleseren).

Så, for eksempel i følgende kodeeksempel, er bokseskyggen definert med en horisontal skygge som strekker seg 3 piksler til høyre, 6 piksler ned, med en middels uskarphet, en som gjelder for å skape en gradientlignende uskarphet som strekker seg 3 piksler inn i drop-skyggen. Og en farge har blitt tildelt bokseskyggen (sølv).

boks-skygge: 3px 6px 3px sølv;

Spread definerer størrelsen på skyggen. Som standard er skyggen den samme størrelsen som elementet som den brukes på, men du kan gjøre den skyggen større (eller mindre) ved å legge til en spredningsverdi i stildefinisjonen.

Legge inn innsatsverdien til en skyggedefinisjon omdanner skyggen, plasser den inne i stedet for utenfor boksen.

Her er et eksempel på en boksskyggedefinisjon som skaper en skygge som strekker seg 12 piksler til høyre og 18 piksler ned, er 25 piksler større enn det opprinnelige elementet som det er påført, og er sølvfarget: > boks-skygge: 12px 18px 12px 25px sølv;

Brukes til en boks, ser verdiene i det foregående eksemplet ut som følgende:

Endelig kan skygger være

innsett - det vil si plassert i det elementet de er brukt på.Følgende figur viser hvordan innsettet påvirker samme boksskygge som vist tidligere. Lag en bokseskyggeeffekt

Box-skyggeeffekter er definert med to viktige parametre: horisontal og vertikal offset.

For eksempel, for å lage en klassestil som genererer en bokseskygge med 6 piksler med horisontal offset og 12 piksler med vertikal offset, vil du bruke denne koden:

bokseskygge: 6px 12px;

Hvis du vil definere lengden på uskarpheten, legger du til en tredje verdi. Og hvis du ønsket å definere fargen på skyggen, ville du legge til fargeverdien:

bokseskygge: 6px 12px 9px grå;

Du må gjøre mer arbeid hvis boksskyggen skal fungere i hver moderne nettleser. Chrome, Opera, nåværende installasjoner av Firefox og IE9 støtter boksskyggeeffekten uten prefiks. Men du trenger fortsatt å opprette forhåndsdefinerte versjoner av koden for eldre versjoner av Firefox, og på denne skrivingen, alle versjoner av Safari.

Følgende kode definerer en klasseväljare som heter box_shadow som fungerer i alle nettlesere med nettleser og har noen polstring og marginalverdier:

. box_shadow {

box-shadow: 6px 12px 9px grå;

-webkit-boks-skygge: 6px 12px 9px grå;

-moz-boks-skygge: 6px 12px 9px grå;

polstring: 9px;

margin: 24px;}

Og husk, du har definert en klassestil. Hvis du vil bruke denne klassestilen, må den fortsatt være knyttet til et HTML-element. For eksempel kan du bruke klassestilen som er definert i den forrige koden, til en avsnittetikett med følgende HTML:

innholdet går her

Følgende figur viser denne boksskyggen som er brukt på et avsnitt i Safari-nettleseren.

Bruk skygger for å skrive

Tekstskyggeeffekten, merkelig nok, støttes i nettlesere (unntatt IE) uten forkrevd prefiks.

Den grunnleggende, essensielle syntaksen for å lage en tekstskygge er

ekstremskygge:

h v farge I denne syntaksen er h det horisontale offsetet; v er den vertikale forskyvningen; og fargen er fargeværdien.

Følgende eksempel oppretter en klassevalg (. Text_shadow) som bruker en tekstskygge med en 4-pixel horisontal offset, en 1-pixel vertikal offset, fargen mørkegrå:

. text_shadow {

tekstskygge: 4px 1px grå;

}

Tekstskygger brukes noen ganger på hvit type for en ren, innbydende effekt. Følgende figur viser tekst_shadow klassestilen som er definert i forrige kode til hvit type.