Weird HTML Text Effects

Indlæg af Hanne Mølgaard Plasc

  I de tidlige dage af webudvikling var tekstvirkningerne ret begrænsede. Hvis du ønskede at bruge andet end en grundlæggende skrifttype, der vises direkte inline med andre elementer, havde du intet andet valg end at oprette et billede i Photoshop i stedet for tekst. Mens visse HTML-tags stadig giver tekstmæssige effekter, drejer de fleste udviklere sig nu om 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 anderledes end CSS og JavaScript-effekter. Test din kode i flere browsere og læs videre på kryds-browsers styling og scripting.

HTML-tags

Nogle få specialeffekter, der var en del af de tidlige HTML-standarder, virker stadig. Andre understøttes ikke længere. Når 'blink' -mærket var yderst begunstiget af tidlige web-annoncører som en måde at få en brugers opmærksomhed på, er 'Blink' heldigvis forældet, og få browsere understøtter det stadig, men andre HTML-tag-effekter, som f.eks. 'Marquee' 'Fortsat arbejde. Her er nogle eksempler:

u0026 lt; blink u0026 gt; Denne tekst plejede at blinke, men gør ikke mere u0026 lt; / blink u0026 gt;
u0026 lt; marquee behavior =' scroll 'direction =' venstre 'u0026 gt; Denne tekst vil rulle for evigt til venstre u0026 lt; / marquee u0026 gt;
u0026 lt; marquee behavior =' alternate 'u0026 gt; Denne tekst glider frem og tilbage på tværs af skærmen u0026 lt; / marquee u0026 gt;

CSS-teknikker < / h2> Cascading Style Sheets giver webudvikleren eller designeren mere kontrol over udseendet af HTML-tekst. Ved hjælp af CSS kan tekstens farve manipuleres, tekstblokke kan lagdelt, skyggeeffekter kan oprettes, og tekst kan endda animeres. Nogle eksempler på mærkelige effekter er vist nedenfor.

u0026 lt; p style = 'skriftstørrelse: 30px; farve: # 000; baggrund: #fff; tekstskygge: 2px 2px 3px # 000; 'u0026 gt; Denne tekst har en skygge u0026 lt; / p u0026 gt;
u0026 lt; p style =' skriftstørrelse: 30px; farve: #fff; baggrund: # 000; tekstskygge: 1px 1px 6px #fff; 'u0026 gt; Denne tekst lyser u0026 lt; / p u0026 gt;
u0026 lt; p style = 'font-size: 30px; farve: # 000; baggrund: # 666; tekstskygge: 0px 1px 1px #fff;' u0026 gt; Denne tekst vil blive vist indgraveret u0026 lt; / p u0026 gt;

Browserspecifikke CSS-teknikker

Egenskaben 'transform' gælder for visse browsere og tillader, at teksten skaleres, roteres eller skæves. Desværre understøttes dette ikke i IE, selv om der er nogle løsninger på arbejdsløshed (se Ressourcer).

u0026 lt; div style = '- moz-transform: skewx (10deg) translatex (150px);
-moz-transform-oprindelse: nederst til venstre; skriftstørrelse: 30px' u0026 gt;
Dette vil være skævt.
u0026 lt; / div u0026 gt;
u0026 lt; div style = '- moz-transform: roter (90deg); -moz-transform-oprindelse: nederst til venstre; skrifttype -størrelse: 30px 'u0026 gt;
Dette vil blive drejet 90 grader.
u0026 lt; / div u0026 gt;

JavaScript og DHTML-teknikker

Med JavaScript og DHTML involveret kan tekst indeholde effekter, der svarer til brugerindgang og handlinger. Eksemplet nedenfor ændrer størrelsen af ​​teksten, når du flytter musen over den.

u0026 lt; p onmouseover = 'this.style.fontSize =' 40px '' onmouseout = 'this.style.fontSize = '30px' 'style =' font-size: 30px 'u0026 gt; Dette vil vokse, når du flytter musen over det u0026 lt; / p u0026 gt;