I de tidlige dage af Web udvikling, var tekstlige effekter temmelig begrænset . Hvis du ønskede at bruge noget andet end en grundlæggende skrifttype vises direkte inline med andre elementer , du havde ikke noget valg, men at skabe et billede i Photoshop i stedet for tekst. Mens visse HTML-tags stadig give tekstuelle effekter fleste udviklere nu til CSS og JavaScript. Med disse værktøjer kan en bred vifte af mærkelige effekter opnås gennem tekst alene. Bemærk dog , at forskellige browsere reagerer forskelligt på CSS og JavaScript effekter. Test din kode i flere browsere og læse op på cross-browser styling og scripting. HTML-tags
Et par specielle effekter , der var en del af tidlige HTML standarder stadig arbejde . Andre er ikke længere understøttes. Når " blink " tag blev meget begunstiget af tidlige web annoncører som en måde at få en brugers opmærksomhed . " Blink " er , heldigvis, forældet og få browsere stadig støtter det, men andre HTML-tag effekter , såsom " marquee , " stadig arbejde . Her er nogle eksempler : Hej
CSS Teknikker
Cascading Style Sheets tillader web-udvikler eller designer mere kontrol over udseendet af HTML tekst. Ved hjælp af CSS kan farven på tekst være manipuleret , tekstblokke kan være lagdelt , kan skyggevirkninger skabes og tekst kan endda være animeret. Et par eksempler på mærkelige effekter er præsenteret nedenfor
< p style = "font- size: 30px ; color: # 000 ; baggrund: # fff ; text -shadow : 2px 2px 3px # 000 ; ." ; > Denne tekst har en skygge
Dette tekst vil gløde
Denne tekst vises indgraveret < /p>
Browser Specifid CSS teknikker
" transform " ejendom på visse browsere og giver tekst, der skal skaleres , roteres eller skæve . Desværre er dette ikke understøttet i IE , selvom der er nogle hvordan problemet kunne løses teknikker ( se Resources)
Dette vil være måde skæv
Dette vil blive drejet halvfems grader
JavaScript og DHTML teknikker
Med Javascript og DHTML involveret , teksten kan indeholde effekter, der reagerer på brugerens input og handlinger. I nedenstående eksempel ændrer størrelsen på teksten, når du bevæger musen over den.
< P onmouseover = " this.style.fontSize = '40px ' " onmouseout = " this.style.fontSize = '30px ' "style = " font- size: 30px " > Dette vil vokse , når du bevæger musen hen over det