Share
Dans ce tutoriel, j'aimerais explorer comment vous pouvez embellir un simple formulaire de recherche. Nous ne ferons rien de fou, nous allons plutôt explorer quatre approches différentes pour améliorer votre recherche grâce aux transitions CSS..
Si vous souhaitez une solution prête à l'emploi, vous pouvez trouver d'excellentes transitions CSS sur Envato Market qui vous permettent de créer une variété d'effets rapidement et facilement. Ou vous pouvez engager un développeur sur Envato Studio.
Dans votre fichier HTML, vous aurez besoin de créer une entrée de recherche pour commencer. Si vous regardez le code ci-dessous, vous remarquerez quatre choses différentes: a .boîte div, un .conteneur-1 div, un .icône, et l'entrée de recherche elle-même.
Les quatre exemples comporteront un champ de recherche - naturellement - ainsi qu'une icône de classe. Chacun des quatre exemples sera logé dans un conteneur afin que nous puissions manipuler l'entrée de recherche indépendamment. Enfin, la boîte div est responsable de maintenir le conteneur centré.
Font Awesome est une bibliothèque d'icônes. Vous pouvez en savoir plus sur le projet sur le site Web de Font Awesome.
L'extrait de code ci-dessus est un exemple de la façon dont vous pouvez inclure l'icône dans votre balise. Cependant, pour que l'icône apparaisse, vous devez également inclure un lien vers la bibliothèque Font Awesome, présenté dans l'extrait de code ci-dessous. Inclure ce lien dans la tête de votre document.
Nous allons maintenant ajouter quelques styles dans une feuille de style séparée (à laquelle vous aurez également besoin de faire un lien depuis l'en-tête du document)..
corps background: # 343d46; .box margin: 100px auto; largeur: 300px; hauteur: 50px;
Dans l'extrait CSS ci-dessus, nous ajoutons quelques styles de base à la page. Le style des champs de recherche sera de couleur marine, de sorte que l’arrière-plan du corps ne doit pas être d'un blanc éclatant. La classe de boîte est également centrée dans la page pour le tutoriel.
Ce tutoriel consiste à apprendre à embellir les champs de recherche. Dans ce premier exemple, je vais expliquer plus en détail ce qui se passe. Je veux m'assurer que vous savez exactement ce qui se passe. Dans les trois exemples restants, je vais simplement vous montrer comment réaliser les différentes transitions..
Le premier exemple que nous allons aborder consiste à modifier l'arrière-plan de l'entrée de recherche en survol. Nous allons également ajouter une transition afin que le changement ne soit pas choquant.
Vous avez déjà vu le code HTML pour le balisage de base. Cet extrait sera similaire pour tous les exemples..
Afin de démarrer le style, nous devons définir le style CSS du champ de recherche lui-même. Ajoutons toutes les règles CSS une par une pour que vous sachiez exactement ce qui se passe.
.conteneur-1 largeur: 300px; alignement vertical: milieu; espace blanc: maintenant; position: relative;
Premièrement, nous voulons styliser la classe conteneur. La propriété la plus importante est sans doute position: relative. Ceci est défini spécifiquement pour que l'icône puisse être placée au-dessus de l'entrée, comme vous le verrez bientôt.
.conteneur-1 input # search width: 300px; hauteur: 50px; arrière-plan: # 2b303b; bordure: aucune; taille de police: 10 pt; float: gauche; couleur: # 63717f; rembourrage gauche: 45px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
Ensuite, nous voulons styliser l'entrée réelle. Tout ce qui précède est purement esthétique, car le rayon de la bordure ou la couleur de fond n’affectent pas le fonctionnement de l’entrée. Prenez note de la propriété de remplissage gauche. Il est là pour faire de la place pour l'icône afin qu'elle ne soit pas littéralement au-dessus du texte dans l'entrée.
Nous avons ci-dessous quatre règles différentes qui colorent le texte d’espace réservé. Chercher. Les règles doivent malheureusement être séparées pour les préfixes de fournisseurs individuels et ne peuvent pas être consolidées dans une règle écrite abrégée. C'est un peu agaçant et vous le verrez répété dans chaque exemple.!
.conteneur-1 input # search :: - webkit-input-placeholder color: # 65737e; .container-1 input # recherche: -moz-placeholder / * Firefox 18- * / color: # 65737e; .container-1 input # search :: - moz-placeholder / * Firefox 19+ * / color: # 65737e; .container-1 input # recherche: -ms-input-placeholder color: # 65737e;
Enfin, nous allons coiffer l'icône. Plus important encore, nous définissons sa position pour être placé au-dessus de l’entrée en définissant sa position: absolue. Les marges aident à positionner l'icône en plus de définir sa position la plus haute sur 50%.
.conteneur-1 .icon position: absolute; en haut: 50%; marge gauche: 17px; marge supérieure: 17 px; z-index: 1; couleur: # 4f5b66;
Le prochain ensemble de règles que nous devons créer est ce qui se passe dans le champ de recherche en survol. Dans cet exemple, nous voulons seulement changer la couleur de fond. Afin de supprimer la lueur jaune ou bleue autour de l'entrée (que les navigateurs ajoutent parfois), contour: aucun.
.conteneur-1 entrée # recherche: survol, .container-1 entrée # recherche: focus, .container-1 entrée # recherche: actif contour: aucun; arrière-plan: #ffffff;
Comme vous le voyez dans l'extrait ci-dessus, nous avons ajouté deux états supplémentaires - concentrer et actif. De cette façon, l'effet ne disparaît pas lorsque vous arrêtez de survoler l'entrée. Plus important encore, l'effet est également important lorsque l'entrée est utilisée.
Pour que la transition se produise, nous devons ajouter quelques lignes de code. Retourne à la règle où nous avons défini le style de l'entrée - .conteneur-1 entrée # recherche. Avant les crochets de fermeture, ajoutez l'extrait suivant:
-webkit-transition: facilité à l'arrière-plan. -moz-transition: facilité d'arrière-plan .55s; -ms-transition: facilité d'arrière-plan .55s; -o-transition: facilité de base de 0,55; transition: arrière-plan, 55s facilité;
Nous définissons le raccourci de la propriété de transition, mais nous pourrions définir ces trois paramètres individuellement. Tout d'abord, nous disons que la transition ne devrait affecter que la propriété background. Ensuite, nous disons que la transition devrait prendre un peu plus d’une demi-seconde. Enfin, nous définissons l’effet de transition comme étant l’atténuation. le facilité n’est pas le seul effet qui fonctionnerait ici, nous aurions aussi pu utiliser linéaire ou facilité dans, par exemple. Cela aurait simplement semblé un peu différent. Essayez vous-même pour voir si vous les préférez.
Le style de saisie devrait maintenant ressembler au code ci-dessous.
.conteneur-1 input # search width: 300px; hauteur: 50px; arrière-plan: # 2b303b; bordure: aucune; taille de police: 10 pt; float: gauche; couleur: # 262626; rembourrage gauche: 45px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: la facilité d'arrière-plan .55s; -moz-transition: facilité d'arrière-plan .55s; -ms-transition: facilité d'arrière-plan .55s; -o-transition: facilité de base de 0,55; transition: arrière-plan, 55s facilité;
Si vous ne connaissez rien aux transitions CSS, laissez-moi vous donner un bref aperçu. Tout d'abord, pour que la transition fonctionne, la propriété doit être définie sur l'état par défaut et non sur le survol, sur actif ou sur le focus..
Les transitions CSS permettent de changer progressivement d'effet et vous pouvez définir des paramètres spécifiques à contrôler, tels que la propriété qui sera affectée, la durée de la transition et le type de transition. Vous pouvez avoir plusieurs transitions définies pour un seul élément. Mais, plus important encore, vous devez toujours inclure les préfixes du fournisseur afin de prendre en charge les différents navigateurs, car la prise en charge de cette propriété n’est pas encore universelle..
Pour plus d'informations, consultez: Transitions et transformations CSS3 à partir de zéro
Dans cet exemple, la recherche commence uniquement par l'icône représentant un miroir. Lorsque vous passez la souris sur l’icône, la recherche s’étendra à quel point vous pourrez alors saisir votre requête. La majorité du code dans cet exemple sera très similaire à l'exemple précédent.
.conteneur-2 largeur: 300px; alignement vertical: milieu; espace blanc: maintenant; position: relative;
Le style d'entrée pour cette transition est différent. L'entrée est nettement plus petite, de sorte que l'icône peut apparaître derrière un carré. Toutes les propriétés restantes, comme l’arrière-plan ou la couleur de la police, sont identiques car nous ne souhaitons pas modifier complètement le style de la recherche..
.conteneur-2 input # search width: 50px; hauteur: 50px; arrière-plan: # 2b303b; bordure: aucune; taille de police: 10 pt; float: gauche; couleur: # 262626; padding-left: 35px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; couleur: #fff; -webkit-transition: largeur .55s facilité; -moz-transition: largeur, 55s facilité; -ms-transition: largeur, 55s facilité; -o-transition: largeur, 55s facilité; transition: largeur .55s facilité;
Comme vous pouvez également le constater, j'ai redéfini la propriété de transition pour ne modifier que la largeur. J'ai gardé l'heure identique car c'est assez rapide pour ne pas gêner les utilisateurs, mais assez long pour créer un bel effet.
Ci-dessous le code pour recolorer le texte de l’espace réservé.
.conteneur-2 input # search :: - webkit-input-placeholder color: # 65737e; .container-2 input # recherche: -moz-placeholder / * Firefox 18- * / color: # 65737e; .container-2 input # search :: - moz-placeholder / * Firefox 19+ * / color: # 65737e; .container-2 input # recherche: -ms-input-placeholder color: # 65737e;
Et encore une fois, nous avons le style CSS icône. Ce devrait être le même que dans l'exemple précédent.
.conteneur-2 .icon position: absolute; en haut: 50%; marge gauche: 17px; marge supérieure: 17 px; z-index: 1; couleur: # 4f5b66;
La dernière chose que nous devons faire est de définir à quoi ressemblera la recherche quand elle sera survolée. Dans l'extrait de code situé au-dessous de la première règle, assurez-vous que le formulaire n'a pas l'éclat induit par le navigateur et que lorsque vous utilisez l'entrée - lors de la saisie - le champ de recherche reste développé. La règle du milieu agrandit simplement l'entrée en pleine largeur en survol.
.conteneur-2 entrée # recherche: focus, .container-2 entrée # recherche: actif contour: aucun; largeur: 300px; .container-2: entrée survolée # search width: 300px; .container-2: survolez .icon color: # 93a2ad;
La dernière chose qui se passe dans le code ci-dessus est que lors du survol, l'icône change de couleur. Il suffit d'un petit détail pour montrer rapidement à un utilisateur que le champ de recherche est actif et opérationnel, plutôt que d'inactivité. Le changement n'est pas implémenté par une transition.
Parmi les quatre exemples, celui-ci est le plus subtil, à la fois en termes de code et d'effet visuel. Dans ce cas, l'icône en forme de miroir va apparaître légèrement et augmenter de taille.
Une fois encore, le balisage HTML de l'icône et du champ de recherche est identique à celui des deux exemples précédents. L’exception, bien sûr, est la .conteneur-3.
Le CSS pour cet exemple n'a rien de spécial. Pour la plupart, cela ressemble beaucoup aux premiers exemples dans lesquels l'état par défaut n'est pas différent. Vous trouverez ci-dessous le code du conteneur et de l’entrée. Notez qu'il n'y a pas de transition sur l'entrée cette fois-ci.
.conteneur-3 largeur: 300px; alignement vertical: milieu; espace blanc: maintenant; position: relative; .container-3 input # search width: 300px; hauteur: 50px; arrière-plan: # 2b303b; bordure: aucune; taille de police: 10 pt; float: gauche; couleur: # 262626; rembourrage gauche: 45px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; couleur: #fff;
Une fois de plus nous avons les règles de placeholder.
.conteneur-3 input # search :: - webkit-input-placeholder color: # 65737e; .container-3 input # recherche: -moz-placeholder / * Firefox 18- * / color: # 65737e; .container-3 input # search :: - moz-placeholder / * Firefox 19+ * / color: # 65737e; .container-3 input # recherche: -ms-input-placeholder color: # 65737e;
Maintenant, à première vue, l'icône de cet exemple est la même. C'est la même couleur, la même position et ainsi de suite. Cependant, j'y ai ajouté une transition. Ces transitions ciblent toutes les propriétés, ce qui est une approche plus courte plutôt que de les épeler individuellement.
.conteneur-3 .icon position: absolute; en haut: 50%; marge gauche: 17px; marge supérieure: 17 px; z-index: 1; couleur: # 4f5b66; -webkit-transition: tout le confort .55s; -moz-transition: tout le confort .55s; -ms-transition: tout le confort .55s; -o-transition: facilité de tous les .55 transition: toutes les .55 sont faciles;
.conteneur-3 entrée # recherche: focus, .container-3 entrée # recherche: actif contour: aucun; .container-3: survolez .icon margin-top: 16px; couleur: # 93a2ad; -webkit-transform: échelle (1,5); / * Safari et Chrome * / -moz-transform: scale (1.5); / * Firefox * / -ms-transform: scale (1.5); / * IE 9 * / / -o-transform: scale (1.5); / * Opera * / transform: scale (1.5);
Il y a quelques choses qui se passent dans le code ci-dessus. Premièrement, nous changeons la couleur de l'icône en survol et le déplaçons un peu plus haut pour qu'il soit centré verticalement lorsqu'il est plus grand. Deuxièmement, nous ajoutons une transformation à l'élément d'icône en survol de manière à ce qu'il soit réellement 1,5 fois plus grand que sa taille d'origine. Parce que la transition précédemment définie était configurée pour avoir un impact tout propriétés, il semble que la taille de l'icône augmente en survol.
Encore une fois, jetez un coup d'œil à CSS3 Transitions And Transforms From Scratch pour en savoir plus sur la propriété de transformation.
Contrairement aux trois derniers exemples, celui-ci sera plus complexe. En vol stationnaire, un bouton glisse sur l'entrée pour vous permettre de continuer - un peu comme Envoyer ou Aller. Le bouton aura l'icône du verre à l'intérieur.
Ici le HTML est un peu différent. Bien entendu, l’entrée est toujours là, mais l’icône se trouve maintenant dans un élément de bouton qui vient après l’entrée. Il est important que le bouton se trouve après la saisie car il est lié à la manière dont l'effet de survol sera créé en CSS..
Le CSS dans cet exemple est différent alors faites attention! Ci-dessous l'extrait de code pour styler le conteneur. Premier, position: relative est manquant; ce n'est plus important car l'icône ne repose pas sur le fait qu'elle soit placée au dessus de l'entrée. Cependant, nous avons débordement caché. Cela empêche le bouton d'apparaître lorsqu'il n'est pas en vol stationnaire. Techniquement, le bouton qui apparaît est présent à droite de l’entrée, mais grâce à débordement caché il ne montre pas quand il tombe au-delà de la largeur du conteneur - le conteneur et l'entrée ont la même largeur.
.conteneur-4 débordement: masqué; largeur: 300px; alignement vertical: milieu; espace blanc: maintenant;
En dessous, l'entrée n'a pas de transition car ce n'est pas l'élément affecté cette fois-ci.
.conteneur-4 input # search width: 300px; hauteur: 50px; arrière-plan: # 2b303b; bordure: aucune; taille de police: 10 pt; float: gauche; couleur: #fff; padding-left: 15px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
L'extrait pour recolorer les espaces réservés est le suivant.
.conteneur-4 input # search :: - webkit-input-placeholder color: # 65737e; .container-4 input # recherche: -moz-placeholder / * Firefox 18- * / color: # 65737e; .container-4 input # search :: - moz-placeholder / * Firefox 19+ * / color: # 65737e; .container-4 input # recherche: -ms-input-placeholder color: # 65737e;
Vous trouverez ci-dessous le code pour styler le bouton qui apparaît au survol. Le truc pour le faire glisser latéralement est de le placer juste derrière l'entrée et de le rendre invisible sauf en vol stationnaire. Le bouton est l'élément qui change - il se déplace - c'est donc celui où la transition est définie. Pour simplifier les choses, j'ai identifié la transition qui affectera toutes les propriétés.
.conteneur-4 bouton.icon -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; bordure: aucune; arrière-plan: # 232833; hauteur: 50px; largeur: 50px; couleur: # 4f5b66; opacité: 0; taille de police: 10 pt; -webkit-transition: tout le confort .55s; -moz-transition: tout le confort .55s; -ms-transition: tout le confort .55s; -o-transition: facilité de tous les .55 transition: toutes les .55 sont faciles;
Pour faire fondre le bouton, il doit être déplacé au-dessus de l'entrée. Cela se fait par la marge négative. Auparavant, nous définissions l'opacité du bouton sur 0 nous devons donc le réinitialiser à 1 afin que le bouton soit visible aussi.
La dernière règle modifie l'arrière-plan du bouton uniquement si vous la survolez. Il est bon d'informer l'utilisateur que le bouton est actif et de cliquer dessus pour soumettre la recherche. il ne sert à rien d'avoir un bouton s'il semble inactif.
.conteneur-4: hover button.icon, .container-4: actif button.icon, .container-4: focus button.icon contour: aucun; opacité: 1; marge gauche: -50px; .container-4: hover button.icon: hover background: white;
Cela nous amène à la fin de nos expériences CSS! Nous avons effectué une saisie de base dans le formulaire de recherche et utilisé une petite sélection d’effets pour modifier son comportement. Sinon, comment suggéreriez-vous de modifier une entrée de recherche comme celle-ci? Quels autres aspects de celui-ci appliqueriez-vous aux transitions ou transformations CSS? Faites le nous savoir dans les commentaires!
Nous avons créé un guide complet pour vous aider à apprendre le CSS, que vous soyez débutant avec les bases ou que vous souhaitiez explorer un CSS plus avancé..
Accentsconagua