Vitajte na [www.pocitac.win] Pripojiť k domovskej stránke Obľúbené stránky

Domáce Hardware Siete Programovanie Softvér Otázka Systémy

Podivné HTML Textové efekty

V počiatkoch vývoja webu , textové efekty boli dosť obmedzené . Ak by ste chceli použiť niečo iné než základné písmo zobrazené priamo inline s inými prvkami , ste mali inú možnosť , než vytvoriť obraz vo Photoshope namiesto textu. Zatiaľ čo niektoré HTML tagy naďalej poskytovať textové efekty , väčšina vývojárov sa obrátiť na CSS a JavaScript . Pomocou týchto nástrojov , široká škála podivné účinkov môže byť dosiahnuté prostredníctvom textu samostatne . Majte však na pamäti , že rôzne prehliadače reagujú odlišne na CSS a JavaScript efekty . Otestujte svoj ​​kód v rôznych prehliadačoch a prečítať si na cross -browser design a skriptovanie . HTML tagy

Niekoľko špeciálne efekty , ktoré boli súčasťou prvých štandardov HTML stále pracovať . Ostatné už nie sú podporované . Po " blink " tag bol veľmi zvýhodnený skoro webových inzerentov ako spôsob , ako získať pozornosť užívateľa . " Blink " je , našťastie , zastarané a málo prehliadače stále ho podporujú , ale aj ďalšie účinky HTML tag , ako je napríklad " stan " , stále fungujú . Tu sú niektoré príklady :

Tento text používa blikať , ale nie je už < /blink > Tento text bude rolovať navždy vľavo < /marquee > Tento text bude kĺzať sem a tam po obrazovke < /marquee >
CSS techniky

Cascading Style Sheets , aby webový vývojár , alebo designer väčšiu kontrolu nad vzhľad HTML textu. Pomocou CSS , farba texte možno manipulovať , bloky texte môžu byť vrstvené , tieňové efekty môžu byť vytvorené a text môže byť aj animované . Niekoľko príkladov podivných účinky sú uvedené nižšie

< p style = " font -size : 30px ; color : # 000 ; background : # fff ; Text - shadow : 2px 2px 3px # 000 ; " . ; > Tento text má tieň < /p >

to text bude žiara < /p >

Tento text zobrazí ryté < /p >
prehliadač Specifid CSS techniky

" transformovať " vlastnosť sa vzťahuje na niektoré prehliadače a umožňuje , aby bol text zmenšený , otáčať alebo skosený . Bohužiaľ to nie je podporovaná v IE , ale tam sú niektoré problémy obísť techniky ( pozri zdroje )

< div style = " - moz - transformácia : . SkewX ( 10deg ) translatex ( 150px ) , - moz - transformácia - pôvod : vľavo dole , font -size : 30px " . > To bude cesta skosený < /div > < div style = " - moz - transform : rotate ( 90DEG ) ; - moz - transformácia - pôvod : spodný vľavo , font -size : . 30px " > To bude otočený o deväťdesiat stupňov < /div >
JavaScript a DHTML techniky

pomocou JavaScriptu a DHTML zúčastňuje , text môže obsahovať efekty , ktoré reagujú na vstup užívateľa a výhodných akciách . Nižšie uvedený príklad zmení veľkosť textu , keď pohnete myšou nad ním .

< P onmouseover = " this.style.fontSize = '40px ' " onmouseout = " this.style.fontSize = '30px ' " style = " font -size : 30px " > Táto porastie , keď pohnete myšou cez neho < /p >

Najnovšie články