Slik bruker du CSS3-teksteffekter - dummies

Den viktigste forbedringen av tekst i CSS3 er @font-mekanismen som lar deg definere dine egne skrifttyper og pakke dem med nettstedet ditt. CSS3 har også andre tekstformateringstryker tilgjengelig. Tekst- og tekstskygge-reglene lar deg gjøre interessante forandringer på tekst på sidene dine.

Begge disse reglene brukes til å dekorere tekst, men de kan påvirke lesbarheten, så du bør bruke dem nøye. De er mer hensiktsmessige for større tekst (som overskrifter) enn hovedinnholdet på nettstedet ditt.

Tekststrekk

Med CSS3 kan du angi en strekkfarge for teksten. Dette definerer en disposisjon rundt brevet. Du kan angi strekfargen (ved hjelp av noen av de vanlige CSS-fargevurderingene), samt en strekkbredde (ved hjelp av de normale størrelsesattributtene).

Tekststrekkregelen gjelder denne effekten. Du kan se det som brukes i koden:

textStroke. html h2 {farge: gul; -webkit-tekst-slag: 2px rødt; fontstørrelse: 300%;}

Tekststroke-demo

Denne teksten har et slag

For øyeblikket støtter ingen nettlesere tekststrekkattributten direkte, men WebKit-baserte nettlesere (Chrome og Safari) støtter leverandør- spesifikk-webkit-versjon. En nettleser som ikke støtter regelen, vil rett og slett ignorere den, så dette bør ikke være en viktig del av designet før støtte er mer komplett.

Tekstskygge

Skygger er et annet vanlig trekk ved moderne webdesign. Skygger legger til et dybdepunkt på en side, men de kan også forbedre lesbarheten (hvis den brukes riktig) for å løfte en overskrift fra siden. Teksten-skyggeattributtet var teknisk en del av CSS2, men den har nylig blitt støttet av store nettlesere.

textShadow. html h2 {font-size: 300%; tekstskygge: 5px 5px 2px #cccccc;}

Tekstskyggedemo

Denne teksten har en skygge

Attributtet har fire parametere:

• offset-x : Bestemmer hvor langt i skråningen x (venstre-høyre) kommer skyggen fra den opprinnelige teksten. En positiv verdi beveger skyggen til høyre, og en negativ verdi beveger seg til venstre.

• offset-y : Bestemmer hvor langt i y (opp-ned) akse vil skyggen være fra den opprinnelige teksten. En positiv verdi beveger skyggen ned, og en negativ verdi beveger skyggen opp.

• uskarphet : Angir skyggingsradiusen til skyggen. Hvis verdien er 0px, er det ingen uskarphet, og skyggen ser ut som den opprinnelige teksten. Vanligvis vil du ha uskarphetsverdien til å være nær den lengste av dine offsets. Dette gjør at skyggen kan gjenkjennes som en skygge av teksten uten å bli en distraksjon.

• farge : Definerer skyggefarge. Vanligvis er et mørkegrå foretrukket, men du kan også prøve andre farger for spesielle effekter. Legg merke til at uskarphet har en tendens til å lette skyggen fargen. Hvis det er mye uskarphet, kan skyggenfarge være den samme fargen som teksten. Hvis skyggen ikke vil bli uklar, kan det hende du må lysere skyggen fargen for lesbarhet.

Skyggenes størrelse bestemmes indirekte med en kombinasjon av offsets og blurs. Du må kanskje eksperimentere for å få skyggen du leter etter. Skyggeeffekter er best når de er subtile fordi de kan påvirke lesbarheten.

Et spesielt tilfelle av tekstskygge kan brukes til å hjelpe tekst å skille seg ut mot et bakgrunnsbilde. Påfør en liten skygge av kontrastfarge. Denne teknikken brukes ofte når du må ha tekst på en bakgrunn fordi hvert brev produserer sin egen høy kontrastbakgrunn. Igjen, vær sikker på ikke å ofre lesbarhet av hensyn til designetikk.

Alle nyeste nettlesere støtter tekstskyggefunksjonen. Ingen spesielle prefiks er nødvendige.