Création d'un champ de recherche CSS3 basculant
CSS3 est le langage de feuille de style de nouvelle génération. Il introduit de nombreuses fonctionnalités nouvelles et intéressantes, telles que les ombres, les animations, les transitions, le rayon de la bordure, etc. Bien que les spécifications n'aient pas encore été finalisées, de nombreux fabricants de navigateurs ont déjà commencé à prendre en charge nombre des nouvelles fonctionnalités..
Dans ce tutoriel, nous allons explorer certaines de ces fonctionnalités telles que ombre de texte, rayon de la frontière, ombres de boîte et transitions pour créer un champ de recherche bascule.
La version photoshop de ce champ de recherche a été créée par Alvin Thong et peut être téléchargée à partir d'ici. J'ai essayé de recréer ce champ de recherche en CSS3 pur. Il est à noter que tous les navigateurs ne supportent pas les fonctionnalités CSS3 et pour essayer ce tutoriel, vous devez utiliser l'un des navigateurs modernes qui prennent en charge les fonctionnalités CSS 3.
Prêt? Commençons!
1. Doctype HTML5
Nous allons commencer avec le balisage HTML. C’est très simple, après le Doctype HTML5 et le déclaration, nous avons un avec un identifiant appelé #wrapper à l'intérieur . Ceci est fait simplement pour définir la largeur de la zone de contenu et l’aligner au centre de la page.
Ceci est suivi d'un Voici à quoi ressemble le code: Pour créer la grande boîte autour du formulaire, nous allons ajouter des styles au Le morceau de code important ici est le Explication: Ici, le mot clé inset spécifie si l'ombre sera à l'intérieur de la boîte. Les deux premiers zéro indiquent le décalage x et le décalage y et le 3px indique le flou. Vient ensuite la déclaration de couleur. J'ai utilisé les valeurs de rgba ici; rgba signifie rouge vert bleu et alpha (opacité). Ainsi, les 4 valeurs entre parenthèses indiquent la quantité de rouge, de vert, de bleu et son alpha (opacité). Vous remarquerez que 5 séries de déclarations fantômes ont été regroupées. Cela peut être fait en les séparant par une virgule. Les deux premières ombres définissent l’effet de "lueur intérieure" blanc et les déclarations suivantes donnent à la boîte son aspect solide / trapu.. Jouez avec ces valeurs pour comprendre comment cela fonctionne. Maintenant que la boîte est complète, passons à la mise en forme du champ de saisie. Les styles déclarés pour le champ de saisie sont assez similaires à ceux décédés pour la grande boîte. Explication: Vous remarquerez que cette fois-ci, le flou de l'ombre a été maintenu à 0 pour obtenir une ombre nette et un décalage vertical de 5 pixels est utilisé. Dans les déclarations successives, le flou a été maintenu à 0px mais la couleur et le décalage en y ont été modifiés. Encore une fois, jouez avec ces valeurs pour obtenir des résultats différents. Appelons le bouton de recherche. Outre les couleurs, le bouton de recherche a essentiellement les mêmes styles que celui de la boîte extérieure. Des bordures et des ombres de boîte similaires ont été utilisés sur le bouton. La nouvelle fonctionnalité introduite est la Explication: dans le L'état actif du bouton a un peu plus de changements. En cela, j'ai attribué au bouton une position absolue et une valeur maximale de 5 pixels. Cela a été fait pour lui donner un aspect plus naturel, de sorte que le bouton ait été enfoncé de 5 pixels. Les autres modifications de l'état actif sont celles de la couleur d'arrière-plan et des ombres. Remarquez que j'ai réduit le décalage y des ombres pour lui donner un aspect "enfoncé". Voici le code pour l'état actif du bouton d'envoi: Ceci complète notre champ de recherche. Nous avons utilisé pas mal de nouvelles fonctionnalités CSS3. Voici le code CSS et HTML complet de ce champ de recherche. Nous espérons que vous avez apprécié ce tutoriel. N'hésitez pas à expérimenter avec ces fonctionnalités et n'oubliez pas de partager vos impressions. Note de l'éditeur: Cet article est écrit par Bharani M pour Hongkiat.com. Bharani est un concepteur / développeur de New Delhi, en Inde..#principale. Cet ID contient les styles qui définissent la grande boîte blanche autour du champ de saisie et du bouton de recherche. Ce déclaré à l'intérieur. Le formulaire a la champ de saisie de texte et le sbouton de recherche. Voici à quoi ressemble le formulaire sans qu'aucun style ne lui soit appliqué: 
Champ de recherche CSS3
2. Créer le cadre de sélection
#principale. A partir du code ci-dessous, vous remarquerez que la boîte a une largeur de 400 pixels et une hauteur de 50 pixels.. #main width: 400px; hauteur: 50px; arrière-plan: # f2f2f2; rembourrage: 6px 10px; bordure: 1px solide # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: encart 0 0 3px rgba (255, 255, 255, 0,8), encart 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: encart 0 0 3px rgba (255, 255, 255, 0,8), encart 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: encart 0 0 3px rgba (255, 255, 255, 0,8), encart 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
rayon de la frontière déclaration et la boîte ombre déclaration. Pour créer des coins arrondis, nous avons utilisé la déclaration CSS3 border-radius, ainsi que les préfixes de navigateur "-moz-" et "-webkit-" afin de garantir son fonctionnement dans les navigateurs basés sur gecko et webkit. Les déclarations d'ombre de la boîte peuvent sembler un peu déroutantes mais c'est en fait très simple. box-shadow: encart 0 0 3px rgba (255, 255, 255, 0,8), encart 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
Aperçu
3. Styliser le champ de saisie
input [type = "text"] float: left; largeur: 230px; remplissage: 15px 5px 5px 5px; marge supérieure: 5px; marge gauche: 3px; bordure: solide 1px # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: encart 0 5 pixels 0 # ccc, encadré 0 6 pixels 0 # 989898, encadré 0 13 pixels 0 #dfdede; -webkit-box-shadow: encart 0 5px 0 #ccc, encart 0 6px 0 # 989898, encart 0 13px 0 #dfdede; box-shadow: encart 0 5 pixels 0 #ccc, encadré 0 6 pixels 0 # 989898, encadré 0 13 pixels 0 #dfdede;
#principale. Nous avons utilisé le même rayon de bordure (5px). Encore une fois, plusieurs ombres de boîte ont été matraquées. box-shadow: encart 0 5 pixels 0 #ccc, encadré 0 6 pixels 0 # 989898, encadré 0 13 pixels 0 #dfdede;
Aperçu
4. Styliser le bouton d'envoi
input [type = "submit"]. solid float: left; curseur: pointeur; largeur: 130px; rembourrage: 8px 6px; marge gauche: 20px; couleur de fond: # f8b838; couleur: rgba (134, 79, 11, 0,8); text-transform: majuscule; poids de police: gras; bordure: solide 1px # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; texte-ombre: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px 0 rgba (64, 38, 5, 0,9); -moz-box-shadow: encart 0 0 3px rgba (255, 255, 255, 0,6), encart 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: encart 0 0 3px rgba (255, 255, 255, 0,6), encart 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: encart 0 0 3px rgba (255, 255, 255, 0,6), encart 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-transition: atténuation de l'arrière-plan de 0,2 seconde;
ombre de texte. texte-ombre: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px 0 rgba (64, 38, 5, 0,9);
ombre de texte déclaration, les trois premières valeurs numériques sont respectivement le décalage x, le décalage y et le flou. Les valeurs de rgba indiquent la couleur de l'ombre. Dans le prochain ensemble de déclaration (séparé par une virgule), la valeur y est attribuée à -1. Ceci est fait pour donner au texte une “ombre intérieure” effet. L'état de survol / focus du bouton d'envoi a différentes valeurs de couleur d'arrière-plan et d'ombres. Aperçu
Etat "actif" pour le bouton
input [type = "submit"]. solid: actif background: # f6a000; position: relative; en haut: 5px; bordure: solide 1px # 702d00; -moz-box-shadow: encart 0 0 3px rgba (255, 255, 255, 0,6), encart 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: encart 0 0 3px rgba (255, 255, 255, 0,6), encart 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: encart 0 0 3px rgba (255, 255, 255, 0,6), encart 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
Le code complet (CSS)
#main width: 400px; hauteur: 50px; arrière-plan: # f2f2f2; rembourrage: 6px 10px; bordure: 1px solide # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: encart 0 0 3px rgba (255, 255, 255, 0,8), encart 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: encart 0 0 3px rgba (255, 255, 255, 0,8), encart 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: encart 0 0 3px rgba (255, 255, 255, 0,8), encart 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; input [type = "text"] float: left; largeur: 230px; remplissage: 15px 5px 5px 5px; marge supérieure: 5px; marge gauche: 3px; bordure: solide 1px # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: encart 0 5 pixels 0 # ccc, encadré 0 6 pixels 0 # 989898, encadré 0 13 pixels 0 #dfdede; -webkit-box-shadow: encart 0 5px 0 #ccc, encart 0 6px 0 # 989898, encart 0 13px 0 #dfdede; box-shadow: encart 0 5 pixels 0 #ccc, encadré 0 6 pixels 0 # 989898, encadré 0 13 pixels 0 #dfdede; input [type = "submit"]. solid float: left; curseur: pointeur; largeur: 130px; rembourrage: 8px 6px; marge gauche: 20px; couleur de fond: # f8b838; couleur: rgba (134, 79, 11, 0,8); text-transform: majuscule; poids de police: gras; bordure: solide 1px # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; texte-ombre: 0 1px 2px rgba (255, 255, 255, 0,7), 0 -1px 0 rgba (64, 38, 5, 0,9); -moz-box-shadow: encart 0 0 3px rgba (255, 255, 255, 0,6), encart 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: encart 0 0 3px rgba (255, 255, 255, 0,6), encart 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: encart 0 0 3px rgba (255, 255, 255, 0,6), encart 0 1px 2px rgba (255, 255, 255, 0,7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-transition: atténuation de l'arrière-plan de 0,2 seconde; input [type = "submit"]. solid: survol, entrée [type = "submit"]. solid: focus background: # ffd842; -moz-box-shadow: encart 0 0 3px rgba (255, 255, 255, 0,9), encart 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: encart 0 0 3px rgba (255, 255, 255, 0,9), encart 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: encart 0 0 3px rgba (255, 255, 255, 0,9), encart 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 # ccc; input [type = "submit"]. solid: actif background: # f6a000; position: relative; en haut: 5px; bordure: solide 1px # 702d00; -moz-box-shadow: encart 0 0 3px rgba (255, 255, 255, 0,6), encart 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: encart 0 0 3px rgba (255, 255, 255, 0,6), encart 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; box-shadow: encart 0 0 3px rgba (255, 255, 255, 0,6), encart 0 1px 2px rgba (255, 255, 255, 0,7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
