Come fare a..‎ > ‎

Galleria di effetti vari per le pagine web

di Maria Silvana Radice







Gallery of various effects for web pages:

In questa pagina:

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>

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.

Questo codice deve essere inserito direttamente nell'HTML della pagina, anche con Google sites.

Per Google sites guarda anche: Google sites - la grafica

Se volete mettere lo sfondo ad una pagina che ha gia' dei contenuti, dovete mettere i due </div> finali, 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.

In Google sites, per ottenere lo stesso risultato, è necessario usare una tabella, in questo modo:

<table style="background-repeat:no-repeat;
margin:0 auto;
background-position:top center;
padding:6px"

width="100%"
border="0"
background="URLimmagine">
<tr>
<td>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

</td>
</tr>
</table>

I parametri da modificare, sono questi:
  • widht:100% = larghezza
  • padding: 6px; = distanza del testo dal bordo
  • URLimmagine: qui dovete inserire l'indirizzo dell'immagine di sfondo.

La fila di tag <br> serve solo ad impostare uno spazio iniziale.

L'immagine scelta come sfondo, dovrà avere, all'origine, dimensioni uguali, o maggiori (in pixel), allo spazio che deve ricoprire. Sull'immagine, si potrà scrivere, come nella pagina stessa. 

Se volete mettere lo sfondo ad una pagina che ha gia' dei contenuti, dovete mettere la parte finale del codice, questa:

</td>
</tr>
</table>

....dopo tutto il codice html del contenuto.

Il codice va inserito direttamente nell'HTML, anche con Google sites.



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:
.

In Google sites, l'immagine animata va caricata seguendo la guida Come caricare un' immagine animata (gif)

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 Tutti gli stili delle cornici)
  • 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>


In Google sites questo codice puo` essere inserito direttamente nell'html della pagina.



 

Aiuta il sito! Condividi questa pagina su:
 Facebook   twitter  Google   Linked  in    

Ti e` stato utile questo argomento?



Continua con: Effetti sul testo->->