-» -» Galleria di effetti vari

Galleria di effetti vari per le pagine web

Visita anche Risorse per i webmaster
archivio di risorse per la creazione dei siti 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:

Vai a: Il background

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

Vai a: Il background

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.

Guarda anche: Struttura pagine e funzionalità

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>


Guarda anche: Animazioni

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
Guarda anche: Finestre modali e lightbox

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.
Guarda anche: Data, ora, calendari

Messaggio che cambia secondo l'orario


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

Il codice è questo:

Codice di base:
<p id="demo">Good Evening!</p>

<script>
if (new Date().getHours() < 18) {
  document.getElementById("demo").innerHTML = "Good day!";
}
</script>


Codice avanzato:
<div id="greetings"></div>

<script>
    var myDate = new Date();
    var hrs = myDate.getHours();

    var greet;

    if (hrs < 12)
        greet = 'Good Morning';
    else if (hrs >= 12 && hrs < 17)
        greet = 'Good Afternoon';
    else if (hrs >= 17 && hrs < 21)
        greet = 'Good Evening';
    else if (hrs >= 21 && hrs < 5)
        greet = 'Good Night';

    document.getElementById('greetings').innerHTML =
        '<b>' + greet + '</b> and welcome!';
</script>

Modificate gli orari e il testo del messaggio secondo le vostre preferenze.

Nella sezione "Strumenti per i webmaster" puoi trovare moltissime soluzioni e risorse da scaricare.

Continua con:

Leggi anche: Creare un sito da zero

Mappa del sito
Mappa del sito