CSS: animazioni sugli elementi dei form

Con le nuove transizioni CSS3 possiamo creare delle interessanti animazioni sugli elementi dei form. Per esempio, possiamo evidenziare un campo di testo facendone aumentare le dimensioni e modificandone lo sfondo e il bordo quando riceve il focus. Vediamo come.

Il codice CSS rimuove anche il contorno dinamico aggiunto dai browser durante lo stato di focus:

#search #q {
	width: 190px;
	border: 1px solid #aaa;
	border-radius: 8px;
	background: #fff;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

#search #q:focus {
	width: 230px;
	outline-style: none;
	border-color: #000;
	background: #eee;
	font-size: 1.4em;
}

Poichè le dimensioni del campo di testo dipendono anche dalla dimensione del font in uso, abbiamo incrementato anche quella misura. Potete visionare l'esempio finale in questa pagina.