Piplos’ blog

Con pochi passaggi è possibile dare un nuovo look allo strumento di ricerca, guardate la pagina di esempio.

Il sistema operativo Windows Seven è stata una fonte di ispirazione per la creazione dell’esempio, ma potete personalizzare come volete la barra di ricerca, come io stesso ho fatto per questo blog (in alto a destra).

Il tutto usa un gioco di Javascript e CSS per simulare gli effetti della barra di ricerca di Vista/Seven, nei suoi tre stati: normal, hover (cursore del mouse sopra) e focus (click del cursore sulla barra).

Come applico questa tecnica?

E’ semplicissimo. Nella parte HTML basta dare (se non c’è già) una classe al form di ricerca e il giusto codice Javascript che serve a dare la scritta “Cerca nel sito” che scompare una volta che il mouse clicca sulla barra.

Evidenzio in rosso la dichiarazione della classe e in verde il codice Javascript per il testo che scompare e il testo che viene visualizzato in default (lo stesso in tutti e due i casi, potete cambiarlo ma fatelo in tutte e due le occorrenze):

<input type=”text” class=”search“ onblur=”if ((this.value==”) || (this.value==NULL)) {this.value=’Cerca nel sito…‘}” onfocus=”this.value=” ” value=”Cerca nel sito…“ />

Ora passiamo alla parte grafica, ossia la parte più significativa.

Prima di tutto ci serve l’immagine di sfondo della barra. Nel mio caso ho usato questa. Analizziamola meglio nei suoi stati:

Notate che è un unica immagine (rigorosamente PNG), con lo stesso sfondo ripetuto più volte, variando in opacità a seconda degli stati:

1. Normal: opacità a 60%
2. Hover: opacità a 75%
3. Focus: opacità a 100%

Tenete presente anche le varie misure dell’immagine (larghezza, altezza della singola barra e distanza dal top dello stato hover [nell'esempio è di 25px]), che poi dovremo applicarle nel CSS.

Nel mio esempio nel foglio di stile per completare il tutto ho dovuto mettere questo codice CSS:

input.search{
  background-color: transparent;
  background-image: url(searchform.png); /* l’indirizzo dell’immagine */
  background-position: left top;
  background-repeat: no-repeat;
  width: 244px; height: 24px; /* le dimensioni della barra singola */
  font-size:13px;
  border:0;
  margin-top:100px;
  padding:4px 6px;
  color:#888888;
  font-style:italic; /* effetto corsivo al testo */
}
input.search:hover {
  background-position: left -25px;
  color:#555;
}
input.search:focus {
  background-position:left bottom;
  color:#111;
  font-style:normal; /* togliamo il corsivo */
}

Ricordatevi che lo stile può variare molto a vostro piacimento. Con il CSS non avete limiti, ma badate a mantenere una certa estetica perchè in fondo è l’occhio del visitatore che giudica.

Rimando ancora all’esempio completo per vedere il risultato una volta applicata la tecnica.

Fatemi sapere se anche voi avete applicato questa tecnica, sono curioso di sapere i vostri risultati.