Come fare a

Galleria di effetti vari per le pagine web

Sommario:
Per verificare i vostri codici, prima di inserirli, potete usare l'HTML editor.

Sfondo colorato - Come mettere uno sfondo colorato ad una pagina:

Per mettere uno sfondo colorato ad una pagina, potete racchiudere il contenuto in un div si e usare questo codice:

<style>
.esempio {
    width:100%;
    max-width: 80%;
    background-color: yellow;
    text-align: left;
    padding: 3px;
    margin: 0px auto;
}
</style>

<div class="esempio">
contenuto pagina
</div>

I parametri da modificare sono quelli in rosso, in questo modo:

Il comando "margin: 0px auto;" serve a centrare il div nella pagina.

Se volete mettere lo sfondo ad una pagina che ha gia' dei contenuti, dovete mettere il </div> finale, di chiusura, dopo tutto il codice html dei contenuti.

Immagine di sfondo - Come mettere un'immagine di sfondo ad una pagina:

Per mettere un'immagine come sfondo di una pagina, si può usare questo codice:

<style>
.esempio {
   background-image: url(URLimmagine) no-repeat top center;
   margin:0 auto;
   padding: 12px;
   border="0"
   width:100%;
}
</style>

<div class="esempio">
contenuto pagina
</div>

I parametri da modificare sono quelli in rosso.


Guarda il video se vuoi creare un'immagine semistrasparente....



Linee - Come inserire linee orizzontali e verticali personalizzate:

Linea orizzontale:



La linea orizzontale semplici, si inserisce con il tag <hr>, ma vediamo come e` possibile personalizzarla.
Il codice per inserire una linea orizzontale personalizzata, in maniera tale che funzioni su tutti i browser, e` questo:

<hr style="background-color:red; color:red; height:4px; width:100%; margin-left:0px; text-align:left">

I parametri configurabili sono quelli in rosso, in questo modo:

Linea verticale:

Testo




Testo





Il codice per inserire una linea verticale e` questo:
<div style="border-right:1px solid black;height:50px;width:50px;float:left;padding:5px">
Testo
</div>

I parametri configurabili sono quelli in rosso.

Nell'ordine:

Due o piu` linee verticali parallele:


Sinistra
Centro
Destra




Codice:

<div style="border-right:4px solid black;height:50px;width:50px;float:left;padding:5px">
Sinistra
</div>
<div style="border-right:4px solid black;height:50px;width:50px;float:left;padding:5px">
Centro
</div>
<div style="float:left;padding:5px;clear:right">
Destra
</div>

I parametri da personalizzare sono quelli in rosso, secondo le indicazioni gia` date.

Per aggiungere altre linee parallele, dovete ripetere la stringa:

<div style="border-right:4px solid black;height:50px;width:50px;float:left;padding:5px">
Testo
</div>

Testo espandibile

Esempio (click sul testo sottostante):
Apri Chiudi
Contenuto nascosto.

Il codice da utilizzare è questo:
<style>
.info,
.show,
.hide:target {
  display: none;
}
.hide:target + .show,
.hide:target ~ .info {
  display: block;
}
</style>
<div>
  <a id="hide1" href="#hide1" class="hide">Apri</a>
  <a id="show1" href="#show1" class="show">Chiudi</a>
  <div class="info">
    Contenuto nascosto.
  </div>
</div>

Al posto delle parole in rosso, potete inserire il testo che preferite.

Bottone con link

Per creare un bottone semplice, come questo, dovete usare questa stringa di codice:
 <input type="button" onClick="window.open('URLcollegamento')" value="testo sul bottone" class="forminput">

Per un bottone più personalizzato, potete usare questo codice....
<input type="button" onClick="window.open('URLcollegamento')" value="testo sul bottone" class="forminput" style="background-color:blue; color:#fff; width:100; border:0; border-radius:20px; padding: 6px 12px;">

....dove, come vedete, potete impostare il colore di background e quello del testo, usando o il nome in inglese del colore, oppure il suo codice web (), le dimensioni, il padding (distanza del testo dai margini) e il grado di arrotondamento degli angoli (border-radius).

Questo è il risultato:

Se volete che il collegamento si apra nella stessa pagina e non in una pagina nuova, dovete modificare la stringa relativa al comando "onclick" in questo modo:
onClick="window.location.href='URLcollegamento'"

Se volete personalizzare il font del testo sul bottone, potete usare questo codice:
<input type="button" onClick="window.open('URLcollegamento')" value="testo sul bottone" class="forminput" style="background-color:blue; font-size:20px; font-family: Times New Roman; color:#fff; border:0; border-radius:20px; padding: 6px 12px;">

Risultato:


Cambio di colore al passaggio del mouse (rollover)

Esempio:
Titolo del link

Questo effetto, ci permette di gestire il colore del testo e dei link al passaggio del mouse.
Codice:
<html>
<head>
<style>
a:hover{
    background-color: yellow;
    color: red;
}
</style>
</head>
<body>
<a target="_blank" href="URLcollegamento">Titolo</a>
</body>
</html>

I parametri modificabili sono quelli in rosso. Accanto ad alcuni, trovate gia` la descrizione. Gli altri, vanno modificati in questo modo:
I colori devono essere inseriti con il loro codice web, oppure con il loro nome in inglese (). Per aggiungere altre righe di testo, dovete ripetere la striscia ..
<a href="URLcollegamento">Testo</a>

Finestra di avviso (Alert)

Esempio:
Testo visibile

Codice:
<a href="JavaScript:alert('Testo del messaggio')">Testo visibile</a>

Se volete che il messaggio contenga un link, il codice è questo:
<a href="URL collegamento" onclick="alert('Testo del messaggio')">Testo visibile</a>

Se volete che la finestra si apra in automatico all'apertura della pagina, usate questo codice:
<script>
<!--
function mostraMessaggio()
//-->
</script>
<body onload="window.alert('Testo del messaggio')">

..o, più semplicemente, direttamente nel tag body:
<body onload="alert('Testo del messaggio')">

Se volete degli avvisi in sequenza, usate questo codice:
<script;>
<!--
function mostraMessaggi() {
   window.alert("Messaggio numero 1");
   window.alert("Messaggio numero 2");
   window.alert("Messaggio numero 3");
}
//-->
</script>
<a href="javascript:mostraMessaggi()">Testo visibile</a>


NOTA: i tag HTML non sono consentiti nel testo di un alert. Per andare a capo, potete usare il segno \n

Data e ora in tempo reale


Codice:
<script">
tday=new Array("domenica","lunedi","martedi","mercoledi","giovedi","venerdi","sabato");
tmonth=new Array("gennaio","febbraio","marzo","aprile","maggio","giugno","luglio","agosto","settembre","ottobre","novembre","dicembre");
function GetClock(){
var d=new Date();
var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear();
if(nyear<1000) nyear+=1900;
var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;
if(nhour==0){ap=" AM";nhour=12;}
else if(nhour<12){ap=" AM";}
else if(nhour==12){ap=" PM";}
else if(nhour>12){ap=" PM";nhour-=12;}
if(nmin<=9) nmin="0"+nmin;
if(nsec<=9) nsec="0"+nsec;
document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+ndate+" "+tmonth[nmonth]+" "+nyear+", "+nhour+":"+nmin+":"+nsec+ap+"";
}
window.onload=function(){
GetClock();
setInterval(GetClock,1000);
}
</script>
<div id="clockbox" style="text-align: left; font:14pt Arial; color:blue;"></div>

Fonte

I parametri personalizzabili sono quelli in rosso.

Messaggio e/o immagine che cambia secondo l'orario


Un messaggio per i vostri visitatori che cambia seguendo l'orario della giornata. Un'idea carina....

Il codice è questo:
<div style="font-size:24px; color:red; font-family:arial,verdana;">
<script>
<!--  //
giorno = new Date();
ora = giorno.getHours();
if(ora < 6) {document.write("Buon riposo....");}
else
if(ora < 12) {document.write("Buongiorno!");}
else
if(ora < 18) {document.write("Buon pomeriggio!");}
else
if(ora < 24) {document.write("Buona serata!");}
document.write;
// -->
</script>
</div>

I parametri da modificare sono quelli in rosso, in questo modo:
Se volete mettere anche un'immagine accanto al testo, la stringa diventa cosi`:
 if(ora < 24) {document.write("<img src='URLimmagine'>Testo");}

In questo caso, l'immagine rimane a sx e il testo a dx. Potete invertirli in questo modo:
 if(ora < 24) {document.write("Testo<img src='URLimmagine'>");}

Per andare a capo, usate il tag <br>. Per distanziare in orizzontale, usate il tag &nbsp;
Se volete solo l'immagine, togliete il testo.
Fammi sapere se questo argomento ti è stato utile.
Se non lo è stato, puoi inviarmi le tue osservazioni. Grazie 
Continua con: