#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), encadré 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), encadré 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), encadré 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; } 

L'élément important du code est la déclaration border-radius et la déclaration box-shadow . Pour créer des coins arrondis, nous avons utilisé la déclaration CSS-border-radius, les préfixes de navigateur "-moz-" et "-webkit-" ont été utilisés pour s'assurer que cela fonctionne dans les navigateurs basés sur gecko et webkit. Les déclarations shadow box peuvent sembler un peu déroutantes mais en réalité très simples.

 box-shadow: encart 0 0 3px rgba (255, 255, 255, 0.8), encadré 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; 

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. Suivant est la déclaration de couleur. J'ai utilisé les valeurs rgba ici; rgba signifie rouge vert bleu et alpha (opacité). Ainsi, les 4 valeurs à l'intérieur des parenthèses indiquent la quantité de rouge, vert, bleu et son alpha (opacité). Vous remarquerez que 5 ensembles de déclarations d'ombre ont été battus ensemble. Cela peut être fait en les séparant avec une virgule. Les deux premières ombres définissent l'effet de «lueur intérieure» blanche et les déclarations suivantes donnent à la boîte son aspect solide / trapu.

Jouez avec ces valeurs pour comprendre comment cela fonctionne.

Aperçu

3. Stylisation du champ de saisie

Maintenant que la boîte est complète, passons au style du champ de saisie.

 input [type = "text"] {float: à gauche; largeur: 230px; rembourrage: 15px 5px 5px 5px; marge supérieure: 5px; marge gauche: 3px; bordure: 1px solide # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: encart 0 5px 0 #ccc, encart 0 6px 0 # 989898, encart 0 13px 0 #dfdede; -webkit-box-shadow: encart 0 5px 0 #ccc, encart 0 6px 0 # 989898, encart 0 13px 0 #dfdede; box-shadow: encart 0 5px 0 #ccc, encart 0 6px 0 # 989898, encart 0 13px 0 #dfdede; } 

Les styles déclarés pour le champ de saisie sont assez similaires à ceux décadrés pour la grosse boîte #main . Nous avons utilisé le même rayon de bordure (5px). Encore une fois, plusieurs boîtes-ombres ont été matraquées.

 box-shadow: encart 0 5px 0 #ccc, encart 0 6px 0 # 989898, encart 0 13px 0 #dfdede; 

Explication: Vous remarquerez que cette fois, le flou d'ombre a été maintenu à 0 pour obtenir une ombre nette et un décalage vertical de 5px est utilisé. Dans les déclarations successives, le flou a été maintenu à 0px mais la couleur et le décalage y ont été modifiés. Encore une fois, jouez avec ces valeurs pour obtenir des résultats différents.

Aperçu

4. Styler le bouton de soumission

Donnons un style au bouton de recherche.

 input [type = "submit"]. solide {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; font-weight: gras; bordure: 1px solide # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-shadow: 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), encadré 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), encadré 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-transition: 0.2s d'arrière-plan; } 

En dehors des couleurs, le bouton de recherche a pour la plupart les mêmes styles que celui de la boîte extérieure. Des bordures de rayon et des ombres portées similaires ont été utilisés sur le bouton. La nouvelle fonctionnalité introduite est l' text-shadow du text-shadow .

 text-shadow: 0 1px 2px rgba (255, 255, 255, 0, 7), 0 -1px 0 rgba (64, 38, 5, 0, 9); 

Explication: Dans la déclaration text-shadow, les trois premières valeurs numériques sont respectivement le décalage x, le décalage y et le flou. Les valeurs rgba indiquent la couleur de l'ombre. Dans l'ensemble de déclaration suivant (séparé par une virgule), le y-offset prend la valeur -1. Ceci est fait pour donner au texte un effet "d'ombre interne". 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

L'état actif du bouton a un peu plus de changements. En cela, j'ai donné au bouton une position absolue et une valeur 'top' de 5px. Cela a été fait pour lui donner un aspect plus naturel, de sorte qu'il sent que le bouton a été réellement abaissé de 5 pixels. Les autres modifications apportées à l'état actif sont celles de la couleur de fond et des ombres. Notez que j'ai réduit le décalage y des ombres pour lui donner un aspect "pressé". Voici le code de l'état actif du bouton submit:

 input [type = "submit"]. solide: active {arrière-plan: # f6a000; position: relative; haut: 5px; bordure: 1px solide # 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), encadré 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)

Ceci complète notre champ de recherche. Nous avons utilisé pas mal de nouvelles fonctionnalités CSS3. Voici le CSS complet et HTML de ce champ de recherche.

 #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), encadré 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), encadré 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), encadré 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; } input [type = "text"] {float: à gauche; largeur: 230px; rembourrage: 15px 5px 5px 5px; marge supérieure: 5px; marge gauche: 3px; bordure: 1px solide # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: encart 0 5px 0 #ccc, encart 0 6px 0 # 989898, encart 0 13px 0 #dfdede; -webkit-box-shadow: encart 0 5px 0 #ccc, encart 0 6px 0 # 989898, encart 0 13px 0 #dfdede; box-shadow: encart 0 5px 0 #ccc, encart 0 6px 0 # 989898, encart 0 13px 0 #dfdede; } input [type = "submit"]. solide {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; font-weight: gras; bordure: 1px solide # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-shadow: 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), encadré 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), encadré 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-transition: 0.2s d'arrière-plan; } input [type = "submit"]. solide: hover, entrée [type = "soumettre"]. solide: focus {arrière-plan: # ffd842; -moz-box-shadow: encart 0 0 3px rgba (255, 255, 255, 0.9), encadré 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), encadré 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), encadré 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 {arrière-plan: # f6a000; position: relative; haut: 5px; bordure: 1px solide # 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), encadré 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc; } 

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 idées.

Note de l'éditeur: Ce billet est écrit par Bharani M pour Hongkiat.com. Bharani est un concepteur / développeur de New Delhi, en Inde.

Comment embaucher le bon talent technologique

Si vous êtes dans l'industrie de recrutement de talents, vous avez le travail difficile mais crucial de trouver la bonne personne pour le travail, les tâches qu'il implique, et l'organisation. Votre rôle peut devenir plus difficile si vous recherchez des candidats pour des postes techniques, mais vous n'avez pas le savoir-faire technique pour détecter les bonnes pommes des mauvaises .Voi

(Conseils techniques et de conception)

20 infographies animées et interactives que vous devez voir

Tout le monde aime les infographies, bien sûr, mais les infographies statiques sont un peu vieux chapeau maintenant. Avec autant d'infographies, il est facile d'oublier beaucoup d'infographies avec un bon contenu juste parce qu'elles ne se démarquent pas du reste de la meute. Et, si vous êtes un designer, vous avez probablement creusé la tête en essayant de comprendre comment attirer les spectateurs et créer des infographies qui se démarquent des autres.Eh bie

(Conseils techniques et de conception)