Comment créer un site Web ou un blog en 2020 - Guide gratuit et facile pour créer un site Web

8 Extraits CSS et JavaScript pour faire le champ de recherche …

Le champ de recherche est une partie utilitaire de votre site Web moyen. Mais cela ne signifie pas qu’il doit √™tre ignor√©. Tout le contraire.

La recherche offre aux utilisateurs un moyen facile de trouver ce qu’ils recherchent et peut √™tre inestimable sur les sites avec beaucoup de contenu. Il est donc utile de prendre le temps suppl√©mentaire pour vous assurer que votre zone de recherche est attrayante, remarquable et facile √† utiliser.

Dans cet esprit, voici une collection d’extraits qui font passer l’humble champ de recherche au niveau sup√©rieur. Ils vont des simples am√©liorations CSS esth√©tiques aux interfaces utilisateur infus√©es JS qui aident √† cr√©er une exp√©rience plus immersive.

Ic√īne de morphing

L’animation de transformation est toujours un plaisir. Ici, nous avons l’ic√īne de la loupe omnipr√©sente qui, lorsqu’elle est cliqu√©e, se transforme en une barre de recherche compl√®te. Cliquer sur le “X” ram√®ne tout au point de d√©part. Cela pourrait √™tre une bonne solution pour les √©crans plus petits, car vous pouvez simplement enregistrer le champ lorsqu’il n’est pas utilis√©.

Passez la souris dessus et recherchez

Cet exemple offre des fonctionnalit√©s similaires √† la pr√©c√©dente, mais avec une diff√©rence importante. Plut√īt que d’avoir √† cliquer pour afficher le champ de recherche, un utilisateur a juste besoin de survoler l’ic√īne. Cela peut √™tre une chose relativement petite, mais cela pourrait fournir un coup de pouce en termes de convivialit√©. Encore une fois, une option potentiellement solide pour les espaces restreints.

Les défileurs doivent également rechercher

Sur les appareils mobiles, les utilisateurs peuvent effectuer de nombreux d√©placements. Mais s’ils ne trouvent pas ce qu’ils recherchent, cela signifie souvent qu’ils devront retourner √† l’en-t√™te du site pour effectuer une recherche. Ici, nous avons une barre de recherche ¬ęcollante¬Ľ qui sera attach√©e en haut de l’√©cran lorsque vous faites d√©filer la page. Cette fonctionnalit√© pratique peut faciliter la vie des utilisateurs.

Un écran plein de matière

La conception mat√©rielle de Google est beaucoup utilis√©e ces jours-ci. Par cons√©quent, il est naturel que le langage de conception s’applique √©galement √† la recherche. Il est √©galement agr√©able qu’une fois cliqu√©, ce champ de recherche occupe tout l’√©cran. Cela permet aux utilisateurs de se concentrer uniquement sur leur recherche, et avec un peu de travail, les concepteurs pourraient ajouter d’autres informations connexes √† l’√©cran.

Recherche personnalisée simple

Il peut arriver que les utilisateurs souhaitent rechercher uniquement des zones sp√©cifiques de votre site. Bien qu’une recherche personnalis√©e ne soit pas exactement un nouveau concept, elle n’a pas toujours √©t√© un processus visuellement attrayant. C’est ce qui rend cette d√©mo de champ de recherche personnalis√©e si √©l√©gante. Il poss√®de une s√©rie d’ic√īnes, chacune repr√©sentant une zone diff√©rente o√Ļ une recherche peut √™tre effectu√©e (infobulles plus utiles). L’utilisateur clique simplement sur la zone qu’il souhaite rechercher, c’est facile!

Animation de contexte

Fournir un contexte visuel lors d’une recherche permet de garantir que les utilisateurs sont sur la bonne voie. Cet extrait utilise AJAX pour modifier la couleur d’arri√®re-plan et ajouter des informations textuelles lors de la recherche de l’utilisateur.

Transparence

Comment cr√©ez-vous une zone de recherche qui se d√©marque sans d√©passer comme un pouce endolori? Utiliser une certaine transparence est une fa√ßon de le faire. Ici, nous avons un champ de recherche translucide en haut d’une image plein √©cran. Cependant, la bordure blanche est forte, ce qui cr√©e un bel effet visuel sans d√©passer la page.

Recherche multiple

Pour les sites qui permettent aux utilisateurs de rechercher plusieurs jeux de donn√©es, cet exemple peut √™tre tr√®s utile. Profitez de jQuery pour permettre √† l’utilisateur de basculer entre les diff√©rents champs de recherche, mettant ainsi toutes les fonctionnalit√©s de recherche au m√™me endroit.

La fin s’est av√©r√©e

Les champs de recherche peuvent jouer un r√īle essentiel pour garder les utilisateurs sur votre site Web. Et les exemples ci-dessus prouvent que vous pouvez apporter des am√©liorations utiles sans trop d’effort. Donc, si vous avez n√©glig√© de porter une attention particuli√®re √† l’apparence de la fonction de recherche de votre site, cela vous donnera un excellent point de d√©part.