CSS3: Nye muligheter med tekstskygge og 3D-tekst

Dette segmentet på CSS3 vil gjennomgå lage tekst-skygger og 3D-tekst, bruke farge, skriftstørrelse, font-familie og tekst-skygge-stylingegenskapselementet i flere lag for å lage imponerende typografiske design for nettstedene dine. Med tekstskyggeegenskapen og flere lag som lager 3D-tekst, kan du nå nesten eliminere behovet for detaljerte Photoshop eller grafiske design for tekst, skrifter og typografi. Tekst-skygge-elementet har eksistert siden CSS2, men bruken til å lage 3D-tekst er en relativt ny hendelse.

Tekstskygge

Tekst-skyggeegenskapen er en del av tekstmodulen for CSS3 og er en W3C kandidatanbefaling, som gjelder alle elementer og generert innhold. Syntaksen for tekstskyggen i sin enkleste struktur er skrevet i formen:

 tekstskygge: Xpx Ypx Lpx #xxxxxx; 

Hvor:

  • Xpx = x-akse, horisontal avstand skyggeforskyvning
  • Yxp = y-akse, vertikal avstand skyggeforskyvning
  • Lpx = Lengde på støpte, fjærende, uskarpe radius
  • #xxxxxx = farge

I henhold til W3C-spesifikasjonen godtar tekst-skyggeegenskapen en kommaseparert liste over skyggeeffekter som skal brukes på teksten til elementet. Skyggeeffektene brukes i den angitte rekkefølgen og kan dermed overlegge hverandre, men de vil aldri legge over selve teksten. Skyggeeffekter endrer ikke størrelsen på en boks, men kan strekke seg utenfor grensene. Stabelnivået for skyggeeffektene er det samme som for selve elementet.

Spesifikasjonen fortsetter å definere at hver skyggeeffekt må spesifisere en skyggeforskyvning og eventuelt kan spesifisere en uskarphetsradius og en skyggefarge. En uskarphetsradius kan spesifiseres etter skyggeforskyvningen. Uklarhetsradiusen er en lengdeverdi som indikerer grensene for uskarphetseffekten. Den nøyaktige algoritmen for beregning av uskarphet-effekten er ikke spesifisert. Hvis det ikke er spesifisert noen uskarphetsradius, er behandlingen som om det ble spesifisert en uskarpheteradius på null, og skyggen har samme størrelse og form som glyferne som støper den. Brukeragenter kan bare implementere bare deler av denne egenskapen ved å ignorere uskarphetseffekter.

Spesifikasjonen sier at et fargebegrep kan spesifiseres før eller etter lengdeuttrykkene for skyggeeffekten. Fargebegrepet vil bli brukt som grunnlag for skyggeeffekten. Hvis ingen farge er spesifisert, blir verdien av fargeegenskapen brukt i stedet.

I eksemplet nedenfor setter jeg horisontale og vertikale forskyvningsforskyvninger til 4px, uskarphetseffekten til 6px, og skyggefargen til # 336633, sammen med en skriftstørrelse på 5, 0 em, og en skriftfarge satt til # 333399 for styling. en nivå 1 overskrift:

 h1 { 
 tekstskygge: 4px 4px 6px # 336633; 
 skriftstørrelse: 5.0em; 
 farge: # 333399; 
 } 

Eksempelet HTML:

CSS3 Tekstskygge!

Figur A viser resultatet som vist i Firefox 7.0:

Figur A

I det neste eksemplet skal jeg demonstrere å legge til flere stylingelementer ved hjelp av fire flere tekst-skyggeeffekter med kommaseparert liste for å gjelde den totale effekten:

  • Først en 4px hvit uskarphet, deretter en -5px vertikal forskyvning med en 4px uskarphet med fargen # ff3
  • En 2px horisontal og -10px vertikal forskyvning med en 6px uskarphet ved bruk av fargen # fd3
  • En loddrett forskyvning på -2px og -15px med en 11px uskarphet med fargen # f80
  • En 2px horisontal og -25px vertikal forskyvning med en 18px uskarphet med fargen # f20 for nivå 2-overskriften:
 h2 { 
 tekstskygge: 0 0 4px hvit, 0 -5px 4px # ff3, 2px -10px 6px # fd3, 
 -2px -15px 11px # f80, 2px -25px 18px # f20; 
 skriftstørrelse: 3.0em; 
 farge: #FFF; 
 tekstjustering: sentrum; 
 polstring: 25px; 
 bakgrunn: # 333333; 
 bredde: 745px; 
 } 

Med eksemplet HTML:

CSS3 Flere tekstskyggeeffekter!

Figur B viser resultatet som vist i Firefox 8.0:

Figur B

CSS3 3D-tekst

For å lage 3D-tekst, vil vi bruke flere lag av tekst-skyggeegenskapen med en komma-separert liste over farger og rgba-farger med varierende vertikal forskyvning og uskarphet, og inkluderer også en skriftstørrelse og font-familie. Oppretting av en tekstskyggestabel med flere skyggeeffekter bidrar til å generere den generelle 3D-effekten. Vi starter med fem farger definert med påfølgende lag med vertikal spredning, legger til ett lag med både vertikal spredning og uskarphet starter rgba () -fargene, tilsett i et tynt lag med rgba () farge uskarphet, og avslutt deretter med fem til lag med vertikal spredning og uskarphet definert for de gjenværende rgba () fargene som vist i eksemplet nedenfor.

 h3 { 
 font-size: 6.0em; 
 font-familie: Corbel; 
 farge: # 666666; 
 tekstskygge: 0 1px 0 #ccc, 
 0 2px 0 # c9c9c9, 
 0 3px 0 #bbb, 
 0 4px 0 # b9b9b9, 
 0 5px 0 #aaa, 
 0 6px 1px rgba (0, 0, 0, .1), 
 0 0 5px rgba (0, 0, 0, .1), 
 0 1px 3px rgba (0, 0, 0, .3), 
 0 1px 3px rgba (0, 0, 0, .2), 
 0 5px 10px rgba (0, 0, 0, .25), 
 0 10px 10px rgba (0, 0, 0, .2), 
 0 20px 20px rgba (0, 0, 0, 0, 15); 
 } 

Med følgende HTML:

3D-skyggeeffekt

Figur C viser resultatet som vist i Firefox 7.0:

Figur C

La oss nå legge til en sveveeffekt til tekst-skyggeeffekter på tredje nivå ved å flytte teksten opp og til venstre med 5 piksler.

 h3: hover { 
 stilling: relativ; 
 topp: -5px; 
 venstre: -5px; 
 tekstskygge: 0 1px 0 #ccc, 
 0 2px 0 # c9c9c9, 
 0 3px 0 #bbb, 
 0 4px 0 # b9b9b9, 
 0 5px 0 #aaa, 
 0 6px 1px rgba (0, 0, 0, .1), 
 0 0 5px rgba (0, 0, 0, .1), 
 0 1px 3px rgba (0, 0, 0, .3), 
 0 1px 3px rgba (0, 0, 0, .2), 
 0 5px 10px rgba (0, 0, 0, .25), 
 0 10px 10px rgba (0, 0, 0, .2), 
 0 20px 20px rgba (0, 0, 0, 0, 15); 
 } 

Transform og transform-opprinnelse

Stu Nicholls tar CSS3 tekst-skygge styling effekter til et annet nivå; han har en eksepsjonell demonstrasjon av 3D-tekst og bruk av tekst-skygge på sitt CSS Play-nettsted på CSS3 - Solid tekst med skygge (best vist i Firefox, Safari og Chrome). Stu benytter seg av CSS transform og transform-opprinnelse for å skjev teksten sammen med flere tekstskygger og en før pseudoklasse for å bruke stylingeffektene som vist i dette skjermbildet nedenfor ( figur D ):

Figur D

Her vises alle tekst-skygge-effekter i dette CSS3-segmentet. (Denne zip-filen inneholder filene CSS3_Text-Shadow.html og CSS3_Examples.css . Last ned til en mappe på skrivebordet for å se eksempel.)

Fremtidige segmenter med CSS3 vil fremheve flere elementer i Tekstmodulen, inkludert tekstoverflyt, ordomslag, tekstdekorasjon og mer om skalering med transformeringseffekt, overganger og andre emner.

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
  • CSS3: Lag flere skygger skaper lette sider

© Copyright 2020 | mobilegn.com