CSS3 Tekst effekt

Cascading Style Sheets er en stil språk som lar webdesignere å spesifisere fonter, farger og andre stiler som styrer utseendet på en webside. Det mest kompliserte CSS strukturer hele oppsett, men du kan også bruke den til å skape interessante teksteffekter. Med CSS level 3 (CSS3), kan du bruke effekter som ikke finnes i tidligere CSS versjoner: skygger, gløder, rotert tekst og selv tredimensjonal tekst.

Drop Shadows

Før CSS3 tekstskygge ble tilgjengelig, Webdesignere behov for å bruke grafiske bildefiler for å lage overskrifter med skygget tekst. Denne koden vil imidlertid nå gi noen tekst på siden en skygge:

text-shadow: 1px 1px 3px RGBA (0,0,0,0.3);

Koden ovenfor kan gå inn enhver stil regel i et stilark. De to første verdiene representerer venstre og topp forskyvninger. Hvor mye skyggen er uklart, avhenger av den tredje verdi; høyere verdier føre til mer uskarphet. Den siste verdien er fargen, men eksempelet bruker RGBA (rød, grønn, blå og Alpha) i stedet for den vanlige heksadesimale fargekode som brukes på websider. Den siste verdien av RGBA representerer graden av åpenhet fra null til en, vist til første desimal.

glowing Text

Glowing tekst bruker den samme koden eiendom som tekst skygger. Når du plasserer tekst på mørk bakgrunn, kan du gi den en lys-farget tekst skygge uten å utligne:

text-shadow: 0px 0px 10px RGBA (0,255,0,0.7);

Dette eksemplet vil skape en lys grønn glød rundt teksten. Den 10-pixel uskarphet verdi myker uskarphet, mens 70 prosent gjennomsiktighet nivå i RGBA kode toner fargen ned litt.

Rotert tekst

Den "transformere" eiendom i CSS3 lar deg rotere teksten, sette den skjevt eller snu den på høykant. Her er syntaksen:

transform: rotere (-90deg);
-webkit-transform: rotate (-90deg);
-moz-transform: rotere (-90deg);
filter: progid: DXImageTransform.Microsoft.BasicImage (rotasjon = 3);

Den siste kodelinje er ikke CSS3 i det hele tatt; Dette er en Explorer filter Internett som fungerer i alle IE-versjoner. To andre linjer inneholder "-webkit" og "-moz" prefikser fordi "transformere" er ikke en offisiell CSS3 egenskapen ennå. Dette eksempelet koden vil gjøre tekst rotere slik at det går vertikalt.

Tredimensjonale Text

Denne teksten effekt bruker også tekstskygge, men den bruker faste skygger stablet opp på toppen av hverandre for å fremstå som "push up" teksten fra siden. I virkeligheten er skyggene brusende nedover.

text-shadow: 0px 1px 0 #ccc, 0 2px 0 #bbb, 0 3px 0 #aaa, 0 4px 0 # 999, 0 5px 0 # 888;

Dette er en forenklet versjon av teknikken skapt av designeren Mark Otto. Hver tekstskygge er atskilt med et komma, og hver skygge er en nyanse av grått mørkere enn den forrige. Skyggene også stable ned lenger og lenger.