in featured, sviluppo, tutorial

10 Searchbox stilosi + howto

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

sohtanaka

Michael Tyson: Life, tech, Cocoa development, Mac

michaeltyson

Alex Buga: Webdesigner superstar

alexbuga

College Park Church

yourchurch

Janko at warp speed

jankoatwarpspeed

WordPress theme: Review

review

WordPress theme: Personal

personal

WordPress theme: Clearpress

clearpress

WordPress theme: Industry

industry

WordPress theme: Chrome

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:

<div id="searchbox">
<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.

#searchbox {
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.

Write a Comment

Comment