Effetti testo html, semplici effetti ottenuti con linguaggio html

Standard / by / Gennaio 16, 2013 / No Comments
Effetti testo


Come creare semplici effetti testo per personalizzare il vostro sito o blog utilizzando il linguaggio HTML, dimensione font, colore del testo, ecc.

Ultimo aggiornamento: giugno 2016





Nell’articolo, vengono spesso portati ad esempio i codici esadecimali dei colori,
ne trovate una lista in questa pagina: https://it.wikipedia.org/wiki/Lista_dei_colori

POSIZIONE TESTO (left,center,right)

<p style="text-align:center;">POSIZIONE TESTO (left, center, right)</p>
<div align="center">POSIZIONE TESTO (left, center, right)</div>




FONTS (Comic Sans MS,Verdana,Courier New,Arial,ecc.)

<font face="Comic Sans MS">FONTS (Comic Sans MS,Verdana,Courier New,Arial,ecc.)</font>




DIMENSIONE FONT (1,2,3,4,5,ecc.)

<font size="2">DIMENSIONE FONT (1,2,3,4,5,ecc.)</font>
<span style="font-size: 12px;">DIMENSIONE FONT (10px,12px,13px,ecc.)</span>




EFFETTI TESTO COLORATO

<font color="#00FF00">TESTO COLORATO</font>
<span style="color: #00ff00;">TESTO COLORATO</span>




EFFETTI TESTO CON OMBRA

<font style="text-shadow: 1px 2px 3px #000000">TESTO CON OMBRA</font>
<span style="text-shadow: 1px 2px 3px #000000">TESTO CON OMBRA</span>
<h3 style="text-shadow: 2px 2px 4px #ff0000;">TESTO CON OMBRA</h3>






EFFETTI TESTO SFOCATO


<h3 style="color: transparent; text-shadow: 0 0 4px #8F8F8F;">TESTO SFOCATO</h3>
<font style="color: transparent; font-size: 15px; text-shadow: 0 0 3px #8F8F8F;">TESTO SFOCATO</font>






EFFETTI TESTO EVIDENZIATO

<span style="background-color: #7FFF00;">TESTO EVIDENZIATO</span>






TESTO CHE SI EVIDENZIA AL PASSAGGIO DEL MOUSE

<span style="background-color: white;" onmouseover="this.style.backgroundColor='#7FFFD4';" onmouseout="this.style.backgroundColor='white';">TESTO CHE SI EVIDENZIA AL PASSAGGIO DEL MOUSE</span>






TESTO IN CORSIVO

<i>TESTO IN CORSIVO</i>
<em>TESTO IN CORSIVO</em>




TESTO IN GRASSETTO

<b>TESTO IN GRASSETTO</b>
<strong>TESTO IN GRASSETTO</strong>




TESTO SOTTOLINEATO

<span style="text-decoration: underline;">TESTO SOTTOLINEATO</span>
<u>TESTO SOTTOLINEATO</u>




COMBINAZIONE corsivo,grassetto,sottolineato

<b><u><i>COMBINAZIONE corsivo,grassetto,sottolineato</i></u></b>




COMBINAZIONE testo,posizione,dimensione,font,sfondo

<p style="text-align: center"><span style="color: #DB244F; font-size: 15px;"><span style="background-color: #7FFF00;"><font face="Comic Sans MS">COMBINAZIONE testo,posizione,dimensione,font,sfondo</font></span></span></p>






COLORE TESTO E COLORE BARRA

<del style="color: #ff0000;"><span style="color: #00ff00;">COLORE TESTO E COLORE BARRA</span></del>




Mostra testo nascosto


<span id='link'>
<span style='color: #000000; cursor: pointer;' onclick="document.getElementById('testonascosto').
style.display='block'
document.getElementById('link').style.display='none';">
Mostra testo nascosto
</span>
</span>
<span style='display: none' id='testonascosto'>
<span style='color: #FF3300; cursor: pointer;' onclick="document.getElementById('testonascosto').
style.display='none'
document.getElementById('link').style.display='block';">
Nascondi testo
</span>
TESTO DI PROVA, TESTO DI PROVA
</span>




















TESTO SU SFONDO GRADIENTE


<div class="heading" style="border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; box-shadow: #B2B2B2 0px 0px 5px; width: 590px; padding: 5px 0px; background-image: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#EFEFEF), to(#000000)); background-position: initial initial; background-repeat: initial initial; "><span style="margin-left: 200px; color: #FFFFFF; font-weight: bold; ">TESTO SU SFONDO GRADIENTE</span></div>








<div id="blink" style="text-align: center;"><span style="color: #abcdef; font-size: 18px;">TESTO LAMPEGGIANTE COLORATO</span></div>
<script language="JavaScript">
function blink_one() {
document.getElementById('blink').style.visibility='visible';
setTimeout('blink_two()',900);
}
function blink_two() {
document.getElementById('blink').style.visibility='hidden';
setTimeout('blink_one()',900);
}
blink_one();
</script>
















TESTO LAMPEGGIANTE COLORATO 2


<div align="center"><marquee direction="up" scrollAmount=16 height="13" width="70%"><span style="font-size: 18px;"><span style="color: #abcdef;">TESTO LAMPEGGIANTE COLORATO 2</span></span></marquee></div>







<script language="JavaScript">
var position1=0
var position2=0
var delay;
var end;
var Message='TESTO CHE COMPARE CON UN CARATTERE PER VOLTA.(effetto macchina da scrivere).';
function MachineType(delayfunction) {
delay = delayfunction;
if (position1 > Message.length) {
document.form.text.value = '';
position1 = 0;
position2 = 0;
}
else if (Message.substring(position1-2,position1-1) == '.') {
document.form.text.value = '';
position2 = position1-1;
position1++;
}
else {
document.form.text.value = Message.substring(position1,position2);
position1++;
}
end = setTimeout("MachineType(delay) ", delayfunction);
}
</script>
<form name="form">
<textarea name="text" style="background: #ffffff; border: 0px solid #ABCDEF; color: #E30B5C; font-size: 20px; text-align:left; height: 40px; width: 580px;"></textarea></form>
<script>
MachineType(200);
</script>


































 
Articoli correlati
prev next

Tags:

Categorie Articoli (tag)

Articoli aggiornati

Web-Link


Guida italiana alle risorse gratuite di internet


Software – Guide – News


Software libero – guide e videoguide




Disclaimer


Questo blog non rappresenta una testata giornalistica e viene aggiornato senza alcuna periodicità, esclusivamente sulla base della disponibilità del materiale. Pertanto, non è un prodotto editoriale sottoposto alla disciplina di cui all’art. 1, comma III della L. n. 62 del 7.03.2001.

Apri un sito e guadagna con Altervista - Disclaimer - Segnala abuso - Privacy Policy - Personalizza tracciamento pubblicitario