Hvordan letter med CSS

Høytrykk er en teksteffekt noe som preging i revers. Mens preging gjør teksten vises som om den stiger opp fra siden, gir letter teksten en "presses ned" utseende. Du kan bruke denne effekten til tekst ved hjelp Cascading Style Sheet (CSS) kode så lenge som bakgrunn, tekst og skygge farger kamp. Du må gi teksten en mørkere farge enn bakgrunnen og bruke en lys skygge. I alle nettlesere, men Internet Explorer, kan "text-shadow" eiendom gi deg skygge som trengs for å skape den letter effekt.

Bruksanvisning

1 Gå til "Start" på oppgavelinjen i Windows, og skriv inn navnet på en kode editor eller Notisblokk på din søkefeltet. Trykk "Enter" for å laste programmet. Klikk "Fil" på verktøylinjen øverst og åpne HTML-filen for Web-siden du vil redigere. Hvis websiden bruker en ekstern CSS-fil, åpner det også.

2 Finn teksten på websiden der du vil bruke letter effekt. Legg merke til sett med HTML-tagger rundt teksten. Se etter en klasse eller ID-attributtet i koden. Her er et eksempel på tekst i koder som har både klassen og ID-attributter:

<H2 class = "letter" id = "mittnavn"> John Doe </ h2>

Legg et ID-attributtet hvis du vil bruke letter bare en del av teksten. Bruk -klasseattributtet hvis du vil bruke effekten til flere biter av tekst.

3 Kontroller at Web-siden viser en mørkere farge for teksten enn bakgrunnen rett bak teksten. Du kan sjekke siden i en nettleser eller se på CSS-kode, spesielt hvis du er godt bevandret i heksadesimale koder som brukes til å lage farger. Sjekk CSS-kode i ekstern CSS-fil hvis du bruker en, ellers sjekke "<style>" koder i hodet av HTML-fil.

4 Skriv en CSS velgeren på "velg" blings eller biter av teksten du ønsker å gi letter effekt. Velg etter klassenavnet hvis du vil bruke effekten til flere biter av tekst, slik:

.letterpress {}

Prefiks et klassenavn med en periode. Skriv din velger for en ID som dette:

#mitt navn {}

5 Still "text-shadow" eiendom for din tekst for å lage den letter effekt. Denne egenskapen krever fire verdier for å gjøre effekten, inkludert de beste og venstre forskyvninger, en blur radius for skygge og en farge. Her er et eksempel:

.letterpress {

text-shadow: 1px 1px 2 piksler #eeeeee;

}

Koden ovenfor forskyver skyggen én piksel fra toppen og én piksel fra venstre. Skyggen får en to-pixel blur radius, nedtoningen det bare litt. Denne koden gir skygge en lys grå farge, men du bør velge en meget lys farge som matcher fargen på bakgrunnen bak teksten.

Hint

  • Få mer god kontroll over utseendet på en tekstskygge ved hjelp av en RGBA fargekode i stedet for heksadesimale. Formatet er "RGBA (x, x, x, 1);" hvor hver "x" representerer rød, grønn og blå fargeverdier i den rekkefølgen, pluss en åpenhet verdi mellom null og en.
  • "Text-shadow" eiendom er ikke kompatibel med Internet Explorer. Enten tillate websiden for å vise uten effekt som "grasiøs degradering" eller implementere en fallback ved hjelp av en kombinasjon av bilder, Javascript og et eget stilark.