Une barre de recherche originale

Ceux qui ont testé Cat Print, mon dernier thème pour Wordpress, auront sans doute remarqué la barre de recherche assez originale. Rien de bien compliqué: deux trois images, un peu de CSS et un zeste d’inspiration.

L’idée

Pour Cat Print, l’idée était d’intégrer parfaitement la barre de recherche à la barre de navigation en respectant le design. La barre de recherche est composée en tout et pour tout de deux images: le fond, et la loupe. L’image de fond à été créé sous Photoshop, en utilisant un calque que j’avais téléchargé ici il y à quelques semaines. Quand à l’image de la loupe…c’est tout simplement celle qui est fourni avec l’excellent thème d’icones Ubuntu Studio.
Quand au html/css, il s’agit ici de masquer totalement le champ input text (bordure, couleur de fond, etc) et d’afficher une image en lieu et place du bouton submit. Toutefois, rien ne vous empêche de mettre un input image à la place.

Vous trouverez ici le background et la loupe.

Le xhtml

<div id="searchbar">
    <form method="get" id="searchform" action="http://www.lyxia.org/blog/">
        <div>
            <input type="text" name="s" id="s"/>
            <input type="submit" value="" id="loupe"/>
        </div>
    </form>
</div>

La CSS

#searchbar{
    background: transparent url('images/search.png') no-repeat top left;
    float:right;
    height:41px;
    width:280px;
}

#searchbar #s{
    background:none;
    border:none;
    color:#222;
    float:left;
    font-family:"Trebuchet MS";
    font-size:22px;
    height:30px;
    line-height:35px;
    margin-left:15px;
    padding-top:5px;
}

#searchbar #loupe{
    background: transparent url('images/loupe.png') no-repeat top left;
    border:none;
    float:right;
    height:38px;
    margin-right:5px;
    width:38px;
}