Vediamo in questo articolo come costruire un box di ricerca espandibile grazie all’ausilio dei CSS3. Nessun codice JavaScript, ma solo codice CSS, tutorial molto semplice ed efficace per progettare un box di ricerca molto compatto ed elegante. Questo tipo di search box e’ molto utilizzato nello sviluppo di layout mobile per ridurre al minimo lo spazio necessario a visualizzare un modulo di ricerca. Quindi dobbiamo creare un box di ricerca molto compatto che si allarga solo sulla messa a fuoco dell’utente.
Qui trovate la demo.
Codice Html:
<form>
<input type=”search” placeholder=”Search”>
</form>
E questo e’ il risultato:
Adesso per eliminare lo stile classico del modulo di ricerca inseriamo nel nostro foglio di stile:
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
Adesso aggiungiamo i codici CSS3 per animare il nostro box di ricerca:
input[type=search]{
background:#ededed;
border:solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px; /*default width*/
-webkit-border-radius: 10em;
-moz-border-radius: 10me;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus{
width:130px;
background-color:#fff;
border-color:#6dcff6;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
Ecco fatto. Semplice ed elegante con uno sforzo minimo.
Alla prossima!
Pacman
Nostradamus
Magical Cat Adventure
Snake