La barre de recherche est un élément souvent négligé du processus de conception de sites Web, même si les consommateurs s'en servent pour accéder à des informations uniques. La barre de recherche étant l’une des parties les plus couramment utilisées d’un site Web, sa conception a un impact considérable sur l’expérience utilisateur.
La barre de recherche est utile pour les sites Web comportant plus de 100 pages de contenu complexe. Les barres de recherche sont utilisées pour aider les clients à trouver des informations sur les grands sites de commerce électronique, les sites d'actualités, les sites d'offres et les sites de réservation dans l'espace business-to-consumer (B2C). Ils sont également employés par de grands sites B2B avec plusieurs segments de clientèle et gammes de produits. Pour un petit site Web avec peu de pages, la barre de recherche n’est peut-être pas nécessaire, mais à mesure que le site Web se développe, la barre de recherche deviendra essentielle.
La barre de recherche se compose essentiellement de deux éléments d'interface utilisateur : un champ de saisie et un bouton. Dans cet article, nous verrons comment créer une surbrillance de zone de saisie similaire à la barre de recherche Google à l'aide des propriétés CSS.
La barre de recherche est un emplacement dans n'importe quel navigateur Internet qui permet aux utilisateurs de rechercher les informations requises sur Internet. Il permet également aux lecteurs de rechercher le site Web tout en le parcourant. De même, les utilisateurs peuvent effectuer n'importe quel type de recherche depuis l'écran d'accueil en utilisant la barre de recherche Google (un widget de recherche lié à l'application Google).
est un élément HTML utilisé pour créer des formulaires Web interactifs permettant aux utilisateurs de soumettre des données. Il existe différents types de données d'entrée en fonction du type d'appareil et de l'utilisateur. L'élément est l'un des éléments les plus populaires et les plus couramment utilisés en HTML en raison de ses différents types de données d'entrée et de ses attributs.
Voici sa syntaxe -
1 |
|
REMARQUE - Utilisez la balise
:hover est une pseudo-classe CSS qui permet à l'utilisateur de savoir qu'un dispositif de pointage a été cliqué ou déplacé sur cet élément spécifique. Par exemple, si vous survolez un élément de la page, sa couleur de police ou sa couleur d'arrière-plan peut changer en fonction des propriétés CSS spécifiées.
Découvrez les exemples ci-dessous -
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
Après avoir survolé l'élément Button, la couleur du texte à l'intérieur passera du bleu au rouge. De plus, la taille de la police du texte augmentera.
box-shadow permet aux développeurs d'appliquer une ou plusieurs ombres à un élément. Attribuez plusieurs effets simplement séparés par des virgules.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
Pour créer une zone de saisie comme la barre de recherche Google, nous devons suivre les étapes suivantes -
Créez un champ de saisie avec type="text".
Ajustez sa hauteur et sa largeur à l'aide de CSS. Utilisez la propriété box-shadow pour fournir un effet d'ombre au champ de saisie.
Pour la rendre similaire à la barre de recherche Google, un effet d'ombre doit être affiché au survol, nous utiliserons donc les propriétés de survol CSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
|
Dans cet article, nous avons expliqué comment créer une zone de saisie similaire à la barre de recherche Google qui se met en surbrillance au survol.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!