Rare HTML Text Effects

I de tidlige dager av Web utvikling, teksteffekter var ganske begrenset. Hvis du ønsker å bruke noe annet enn en enkel font vises direkte inline med andre elementer, hadde du ikke noe annet valg enn å lage et bilde i Photoshop i stedet for tekst. Mens enkelte HTML-koder likevel gi tekstlige effekter, de fleste utviklere nå slå til CSS og Javascript. Med disse verktøyene kan en rekke rare effekter oppnås gjennom tekst alene. Vær imidlertid oppmerksom på at forskjellige nettlesere reagerer forskjellig på CSS og Javascript effekter. Teste koden i flere nettlesere og les deg opp på cross-browser styling og scripting.

HTML-tagger

Noen få spesialeffekter som var en del av tidlige HTML standarder fortsatt arbeid. Andre er ikke lenger støttes. Når "blink" tag ble svært foretrekkes av tidlige web annonsører som en måte å få en brukers oppmerksomhet. "Blink" er, heldigvis, foreldet og noen nettlesere fortsatt støtte det, men andre HTML-tag effekter, for eksempel "marquee", fortsatt arbeid. Her er noen eksempler:

<Blink> Denne teksten brukes til å blinke, men ikke lenger </ blink>
<Marquee atferd = "blar" retning = "left"> Denne teksten vil rulle for alltid til venstre </ marquee>
<Marquee atferd = "alternative"> Denne teksten vil gli frem og tilbake over skjermen </ marquee>

CSS Teknikker

Cascading Style Sheets lar webutvikler eller designer mer kontroll over utseendet på HTML tekst. Ved hjelp av CSS, kan fargen på teksten bli manipulert, blokker med tekst kan legges lagvis, skyggeeffekter kan opprettes og tekst kan også være animert. Noen eksempler på rare effekter presenteres nedenfor.

<P style = "font-size: 30px; color: # 000; bakgrunn: #fff; text-shadow: 2 piksler 2 piksler 3px # 000;"> Denne teksten har en skygge </ p>
<P style = "font-size: 30px; color: #fff; bakgrunn: # 000; text-shadow: 1px 1px 6PX #fff;"> Denne teksten vil gløde </ p>
<P style = "font-size: 30px; color: # 000; bakgrunn: # 666; text-shadow: 0px 1px 1px #fff;"> Denne teksten vil vises gravert </ p>

Nettleser specifid CSS teknikker

Den "transformere" eiendom gjelder visse nettlesere og lar teksten som skal skaleres, roteres eller skjev. Dessverre er dette ikke støttes i IE, selv om det er noen midlertidige løsningene teknikker (se Ressurser).

<Div style = "- moz-transform: skewx (10deg) translatex (150px);

-moz-transform-origin: bottom left;font-size:30px">
This will be way skewed.

</ Div>
<Div style = "- moz-transform: rotate (90deg); -moz-transform-opprinnelse: nederst til venstre; font-size: 30px">
Dette vil bli rotert nitti grader.
</ Div>

Javascript og DHTML Teknikker

Med Javascript og DHTML involvert, kan teksten inneholde effekter som reagerer på brukerundersøkelser og handlinger. Eksempelet nedenfor endrer størrelsen på teksten når du beveger musen over det.

<P onmouseover = "this.style.fontSize = '40px'" onmouseout = "this.style.fontSize = '30px'" style = "font-size: 30px"> Dette vil vokse når du beveger musen over det </ p>