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, si può usare questo codice:
<div style="width: 80%;
background-color: yellow;
text-align: left;
padding: 3px;
margin: 0px auto;">
<br>
<br>
<br>
<br>
<br>
<br>
<br
>
</div>

I parametri da modificare sono quelli in rosso, in questo modo:
  • widht:80% = qui dovete mettere la larghezza del div in percentuale.
  • background: yellow = è il colore dello sfondo. Potete inserire il colore che preferite, usando il suo nome in inglese, oppure il suo codice Editor colori).
  • text-align: left; = allineamento del testo (left, rigth, center)
  • padding: 3px; = distanza del testo dal bordo

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

La fila di tag <br> serve solo a creare lo spazio iniziale.

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:

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

</div>

I parametri da modificare sono quelli in rosso.


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


Sfondo animato - Come mettere uno sfondo animato ad una sola pagina:

Sempre utilizzando il codice precedente, è possibile applicare uno sfondo animato ad una pagina. Per esempio con la neve che cade, come questo:
Sfondo animato per pagina web

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:
  • background-color: red; color: red: l'indicazione del colore della linea e` riportata con due tag differenti per la corretta visualizzazione su tutti i browser. Il colore puo` essere scritto con il suo codice  o con il suo nome inglese Editor colori)
  • height:4px: e` lo spessore della linea
  • width=100%: e` la lunghezza della linea. Se e` sul 100%, occupera` tutta la larghezza della pagina. Se volete una misura fissa, potete impostarla in pixel (es: 100px)
  • margin-left:0px; text-align:left: posizione della linea nella pagina (left/sinistra - center/centro - right/destra). Se volete che la linea stia a destra, dovete sostituire la stringa con questa: "margin-right:0px; text-align:right". Se volete che la linea stia al centro, o se la lunghezza della linea e` al 100%, cancellate tutta la stringa.

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:
  • border-right: se volete che la linea stia a sinistra del testo, sostituite "right" con "left"
  • 1px solid black: spessore, stile e colore del bordo (vedi anche: Come incorniciare testo e immagini (border)
  • height:50px: altezza del div, che corrisponde, in questo caso, all'altezza della linea. Se volete che la linea si adatti, in automatico, all'altezza del contenuto, mettete "height:auto"
  • width:50px: larghezza del div, che corrisponde, in questo caso, alla distanza della linea dal margine sx. Se cancellate questo valore, la linea si spostera` in orizzontale seguendo il contenuto.
  • padding:5px: distanza del testo dalla linea

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>







Fammi sapere se questo argomento ti è stato utile.
Se non ti è stato utile, potrai inviare le tue osservazioni. Grazie
Ti è stato utile questo argomento?
Si
No

Continua con:
E molto altro ancora se leggi:
Tutti gli argomenti