Uno degli elementi tipici di un blog è il box per la ricerca e qualche giorno fa mi sono messo in mente di cambiare quello presente su questa pagine.
Ho quindi iniziato a guardarmi un giro cercando di trovare qualcosa che mi piacesse e dallo screening effettuato sono venute fuori diverse cose interessanti.
Quello che non ho trovato sono state le popolarissime “inspiration list” ed ho quindi deciso di presentarvene 10 che, secondo il mio gusto, ritengo siano decisamente “stilose“.
Sohtanaka: Web development & design
Michael Tyson: Life, tech, Cocoa development, Mac
Alex Buga: Webdesigner superstar
College Park Church
Janko at warp speed
WordPress theme: Review
WordPress theme: Personal
WordPress theme: Clearpress
WordPress theme: Industry
WordPress theme: Chrome
Finiti gli esempi affrontiamo adesso la realizzazione.
Dal punto di vista tecnico ho visto usare diversi approcci ma uno in particolare mi è piaciuto per la sua semplità.
Questa è la struttura semantica:
<form method="post" action="searchpage.php">
<input id="searchfield" name="searchfield" type="text" >
<input id="searchbutton" type="image" src="searchbutton.gif">
</form>
</div>
Il box è tenuto insieme da un div dalle dimensione fisse che si occuperà di gestire lo sfondo. Al form form vengono impostati margin e padding a zero, mentro sui tag input vanno eliminati i bordi e definito un posizionamento float.
background: url(searchbg.gif) no-repeat;
height: 30px;
width: 300px;
}
#searchbox form { margin: 0px; padding: 0px; }
#searchbox input { border: 0px; float: left; }
#searchbox #searchfield {
margin: 6px 0px 6px 10px;
font-size: 15px;
}
#searchbox #searchbutton { height: 30px; }
L’elemento più “complicato” da gestire è il campo di ricerca “searchfield” al quale non daremo un altezza fissa ma utilizzeremo dimensione del font, padding e margin.
Infine il submit che va preparato in modo tale da far coincidere l’altezza con quella del div che lo contiene. In alcuni casi ho visto usare un segnaposto completamente trasparente in modo che sia l’immagine di sfondo a gestire tutto.
Questa soluzione non rappresenta l’unico modo di affrontare il problema e nei 10 link presentati è possibile trovare altre tecniche altrettanto interessanti.
Concludo segnalandovi questo articolo che è l’unico che ho trovato sull’argomento.