Programmazione Web » Css » Personalizzare la grafica delle textarea
Personalizzare la grafica delle textarea
Difficoltà:
Scritto da Michele Sassi
Sito Web: http://www.comefaccio.net 
Questo tutorial è stato letto 1024 volte
Oggi vedremo com'è possibile ottenere degli effetti a dir poco sorprendenti sul design delle textarea utilizzando semplicemente pochissime proprietà dei Css!
Innanzitutto ci toccherà realizzare un'immagine con un programma di grafica o scaricarne una da qui. Dopo averla creata (o scaricata) passiamo alla stesura del codice Css che ci permetterà di ottenere l'effetto desiderato. Vediamolo in dettaglio:
<style>
textarea {
background-image: url(sfondo.gif);
background-repeat: no-repeat;
background-attachment: fixed;
padding: 20px;
width: 290px;
height: 64px;
border: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #990000;
}
</style>
Molte proprietà le abbiamo già trattate tantissime volte; mi limiterò pertanto ad illustrarvi solamente le proprietà che caratterizzano questo effetto:
- background-image ci permette di scegliere l'immagine di sfondo della textarea;
- background-repeat: no-repeat ci permette di evitare la ripetizione sia orizzontale che verticale dell'immagine;
- background-attachment: fixed fa in modo che l'immagine resti fissata sullo sfondo, evitandonone quindi lo scrolling insieme col testo.
Da notare che abbiamo utilizzato anche un padding pari a 20px. Generalmente, nell'uso delle textarea si può anche fare a meno del padding, ma nel nostro caso serve ad evitare che il contenuto della textarea vada oltre la fine dell'immagine, creando un effetto grafico poco piacevole ;)
Questo è il codice per inserire il form:
<form name="form" id="form" method="post" action="">
<textarea name="textarea"></textarea>
</form>
Attenzione: Esiste una piccola discordanza tra i valori in px dell'immagine e quelli della textarea; tenete presente che anche la scrollbar occupa un suo spazio! Dopo qualche piccola prova sulle dimensioni della textarea dovreste ottenere risultati a dir poco sorprendenti.
Buon lavoro!
Aggiungi questo tutorial ai preferiti
