Hvordan lage Shadowed HTML Text

Hvordan lage Shadowed HTML Text


Når det brukes riktig, tekstskygge gir dybde og stil til Web-design. Du kan bruke Cascading Style Sheets (CSS) kode for å ta noen tekst i en HTML-fil og gi den en skygge. Kombinasjoner av skyggen farge, forskyvninger og radiusen uskarphet skape et bredt spekter av effekter som brev trykk, glødende tekst og subtile skygger. "Text-shadow" eiendom fungerer i alle moderne nettlesere med unntak av Internet Explorer 9.

Bruksanvisning

1 Åpne HTML-fil på websiden der du vil opprette skygge tekst effekt. Finn teksten du vil endre, og finne sin innpakning koder. Her er et eksempel:

<P> Her er litt tekst i et avsnitt ... </ p>

2 Legg en klasse til kodene innpakning teksten. Gi klassen et navn som "skygget" eller "drop" slik at du kan målrette den i CSS. Dette er et avsnitt med en klasse navn:

<P class = "skygget"> Her er litt tekst i et avsnitt ... </ p>

3 Rull opp til toppen av HTML-filen og finne din "<style>" tags. Legg kodene hvis du ikke finner dem, sette dem mellom "<head>" koder:

<Style type = "text / css">

</ Style>

4 Skriv en CSS velgeren på "velg" tag etter sin klasse navn. For å velge etter klassenavnet, skriver du inn et punktum etterfulgt av klassenavnet og deretter legge til et par av klammeparentes som dette:

.shadowed {}

5 Still "text-shadow" eiendom til ønsket farge, forskyvninger og blur radius. Det ferdige koden vil se slik ut:

.shadowed {

text-shadow: # 000000 2 piksler 2 piksler 5px;

}

I koden ovenfor, "# 000000" representerer svart. De neste to tallene representerer mengden av forskjøvet fra toppen og mot venstre. Bruk negative verdier for å flytte forskyvningene fra høyre eller bunnen av teksten. Den siste verdien angir radien blur, som er mengden av uskarphet.

Hint

  • Sett skygge farge til en farge som matcher bakgrunnen på websiden.
  • Bruk RGBA verdier for skygge farger for å endre tettheten av skyggen. En RGBA fargekode består av røde, grønne, blå og opasitet verdier. "Text-shadow" koden vil se slik ut: "text-shadow: RGBA (0,0,0,0.5);" Den fjerde verdien i RGBA settet er den prosent av opasitet.
  • Internet Explorer versjon 9 støtter ikke "text-shadow" eiendom. Prøv å legge en polyfill Javascript for å nettstedet ditt for å gjøre den kompatibel.
  • Sikkerhetskopiere HTML og CSS-filer når du redigerer ditt nettsted.