Weird HTML texteffekter

I början av webbutveckling , var textuella effekter ganska begränsad . Om du vill använda något annat än en grundläggande typsnitt visas direkt inline med andra element , du hade inget annat val än att skapa en bild i Photoshop i stället för text . Medan vissa HTML-taggar fortfarande ge textuella effekter , de flesta utvecklare vänder nu till CSS och JavaScript . Med dessa verktyg kan en mängd olika konstiga effekter uppnås genom text ensam. Observera dock att olika webbläsare reagerar olika på CSS och JavaScript effekter . Testa din kod i flera webbläsare och läsa på olika webbläsare styling och skript . HTML-taggar

Några specialeffekter som var en del av den tidiga HTML-standarder fortfarande fungerar . Andra är inte längre stöds . När " blink " tag var mycket gynnad av tidiga webb annonsörer som ett sätt att få en användares uppmärksamhet . " Blink " är , tack och lov , föråldrat och några webbläsare fortfarande stöder det , men andra HTML tagg effekter, såsom " marquee , " fortfarande fungerar . Här är några exempel :

Denna text används för att blinka , men inte längre < /blink > Denna text kommer att rulla alltid till vänster < /marquee > Denna text kommer att glida fram och tillbaka över skärmen < /marquee > Addera CSS Tekniker

Cascading Style Sheets tillåter webbutvecklare eller designer större kontroll över utseendet på HTML- text . Använda CSS , kan färgen på texten kan manipuleras , textblock kan vara skiktad , kan skuggeffekter skapas och text kan även vara animerade . Några exempel på konstiga effekter presenteras nedan

< p style = " font - size : 30px ; color : # 000 ; bakgrund : # fff ; text - shadow : 2px 2px 3px # 000 ; " . ; > Denna text har en skugga < /p >

här text kommer att lysa < /p >

Denna text kommer att visas graveras < /p > Addera ditt Browser Specifid CSS Tekniker

" transform " egendom gäller vissa webbläsare och ger texten som ska skalas , roteras eller skeva . Tyvärr detta inte stöds i IE , men det finns några Lösning tekniker (se Resurser ) katalog

< div style = " - moz - transform : . SkewX ( 10deg ) translatex ( 150px ) , - moz - transform - ursprung : nedre vänstra , font - size : 30px " > Detta kommer att vara så skev < /div > < div style = . " - moz - transform : rotate ( 90deg ) , - moz - transform - ursprung : botten vänster , font - size : . 30px " > Detta kommer att roteras nittio grader < /div > Addera JavaScript och DHTML -tekniker

Javascript och DHTML inblandade , text kan innehålla effekter som reagerar på användarens input och åtgärder . Exemplet nedan ändrar storleken på texten när du flyttar musen över den .

< P onMouseOver = " this.style.fontSize = '40px ' " onMouseOut = " this.style.fontSize = '30px ' " style = " font - size : 30px " > Detta kommer att växa när du flyttar musen över den < /p > Addera