Personalizzare un form con immagini di sfondo e CSS

Partiamo col mostrare il file di esempio finale e poi passiamo alla spiegazione di come è stato ottenuto.

Il tutto è stato ottenuto applicando una immagine di sfondo, mediante alcune proprieà dei CSS.

Sarebbe bene non applicare uno sfondo molto scuro, altrimenti si potrebbero avere problemi di leggibilità e, inoltre, scegliere un colore per il testo che abbia un buon contrasto con il colore dello stesso background.

L'esempio previsto consiste di due soli campi di testo ed una textarea. Passiamo al codice css e come deve essere scritto:

.textbox{ 
width:270px;
border:1px solid #000033;
color:#000033;
font:bold 11px verdana,helvetica,sans-serif;
letter-spacing: .1em;word-spacing:.2em;
background:url(righini.gif);
}

.textbox: è il nome della classe
width: larghezza della casella di testo
border: tipo di bordo colore e spessore; mettere "none" se non si vuole il bordo
color: colore del testo all' interno della casella
font: tipo di font e grandezza
letter-spacing: distanza tra una lettera e l'altra e tra una parola e l'altra
background: qui viene dichiarato il percorso dello sfondo da applicare alla casella di testo; come sempre si deve fare attenzione a dove si salva il file ".gif", nel qual caso si deve scrivere prima il nome della cartella che lo contiene e poi il nome stesso del file.

Il codice per la classe della textarea è molto simile a quella per il campo di testo qui sopra descritto; l'unica cosa che si deve dichiarare è l'altezza. Vediamo come procedere; (inutile ricopiare tutte le parti uguali, potreste fare voi il Copia-Incolla).

.messaggio{
width:270px;
height:100px;
..................
}
</style>

.messaggio: come sopra, è il nome della classe per la textarea
width: larghezza della textarea; stessa misura in modo tale da non esserci delle differenze
height: altezza della textarea.

Con poco codice css abbiamo ottenuto un semnplice ma simpatico effetto, onde evitare di presentare un form con il solito colore bianco.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati