Strani effetti di testo HTML

February 27

Strani effetti di testo HTML


Nei primi giorni di sviluppo Web, effetti testuali erano piuttosto limitati. Se si voleva usare qualcosa di diverso da un carattere di base visualizzata direttamente in linea con gli altri elementi, non avevi scelta, ma per creare un'immagine in Photoshop al posto di testo. Mentre alcuni tag HTML ancora forniscono effetti testuali, la maggior parte degli sviluppatori ora si rivolgono a CSS e JavaScript. Con questi strumenti, un'ampia varietà di effetti strani può essere raggiunto attraverso solo testo. Si noti, tuttavia, che diversi browser reagiscono in modo diverso ai CSS e JavaScript effetti. Testare il codice in più browser e leggere su uno stile cross-browser e script.

Tag HTML

Alcuni effetti speciali che facevano parte di standard HTML primi funzionano ancora. Altri non sono più supportati. Una volta che il tag "batter" è stata fortemente favorita da inserzionisti web early come un modo per ottenere l'attenzione di un utente. "Blink" è, per fortuna, deprecato e alcuni browser ancora lo sostengono, ma altri effetti di tag HTML, come "tendone", ancora lavoro. Ecco alcuni esempi:

<Blink> Questo testo utilizzato a lampeggiare, ma non più </ blink>
<Marquee comportamento = "scroll" direzione = "left"> Questo testo scorrerà per sempre a sinistra </ marquee>
<Marquee comportamento = "alternate"> Questo testo sarà scorrere avanti e indietro attraverso lo schermo </ marquee>

Tecniche CSS

Cascading Style Sheets consentono allo sviluppatore web o designer più controllo sopra l'aspetto del testo HTML. Utilizzando i CSS, il colore del testo può essere manipolato, blocchi di testo possono essere stratificati, effetti ombra possono essere creati e il testo può anche essere animati. Alcuni esempi di effetti strani sono presentati qui di seguito.

<P style = "font-size: 30px; color: # 000; sfondo: #fff; text-shadow: 2px 2px 3px # 000;"> Questo testo ha un'ombra </ p>
<P style = "font-size: 30px; color: #fff; background: # 000; text-shadow: 1px 1px 6px #fff;"> Questo testo si illumina </ p>
<P style = "font-size: 30px; color: # 000; background: # 666; text-shadow: 0px 1px 1px #fff;"> Questo testo apparirà inciso </ p>

Browser Tecniche Specifid CSS

La proprietà "trasformare" vale per alcuni browser e permette di testo da scalare, ruotare o inclinata. Purtroppo questo non è supportato in IE, anche se ci sono alcune tecniche di soluzione (vedi Risorse).

<Div style = "- Moz-transform: skewX (10deg) translateX (150px);

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

</ Div>
<Div style = "- Moz-transform: rotate (90deg); -moz-transform origine: in basso a sinistra; font-size: 30px">
Questo sarà ruotata di novanta gradi.
</ Div>

Tecniche di JavaScript e DHTML

Con JavaScript e DHTML coinvolti, il testo può includere gli effetti che rispondono agli input dell'utente e le azioni. L'esempio seguente modifica la dimensione del testo quando si sposta il mouse su di esso.

<P onmouseover = "this.style.fontSize = '40px'" onmouseout = "this.style.fontSize = '30px'" style = "font-size: 30px"> Questo crescerà quando si sposta il mouse su di esso </ p>