Share
Vous êtes-vous déjà demandé comment un effet particulier avait été obtenu dans une conception Web et après plusieurs zooms, vous avez constaté que l'auteur avait ajouté plusieurs ombres subtiles, bordures, dégradés, etc.? Dans le passé, cela était réalisé simplement en découpant une image et en la définissant comme arrière-plan d'un élément. Heureusement, avec CSS3, nous pouvons nous permettre beaucoup plus de flexibilité. Maintenant, bien que le code pour un effet aussi simple puisse paraître un peu fastidieux, il en vaut vraiment la peine, et c'est ce que nous allons passer en revue dans le conseil de rédaction et de vidéo d'aujourd'hui.!
Regardez plutôt ce screencast sur Screenr.com?
Il est étonnant que quelque chose d'aussi simple nécessite autant de code, mais il n'est pas trop brutal et peut facilement être résumé en un extrait pour une utilisation future..
Pour que notre projet soit aussi copié-collé que possible, nous ne travaillons qu'avec une div vide. Créez un nouveau fichier index.html et collez-le comme suit:
Ensuite, nous allons ajouter un style de base pour l’élément body. Ceci est juste pour la présentation, et peut facilement être enlevé. Dans les balises de style de votre en-tête, ajoutez:
/ * Rien de spécial ici. Juste la toile. * / body width: 500px; marge: 60px auto 0; arrière-plan: # 666;
Maintenant, nous allons créer notre boîte, fournissant une largeur et une hauteur.
#box / * Seulement une boîte * / width: 500px; hauteur: 500px;
Nous devrions tous connaître les coins arrondis de CSS maintenant. Allons-y et implémentons cela.
/ * Coins arrondis * / -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
Notez que nous fournissons également la spécification finale, "border-radius", en plus des versions de Mozilla et Webkit..
Mozilla propose une propriété pratique, appelée "-moz-border - * - colors". Cela nous permet de définir un nombre infini de couleurs pour une bordure. Pour obtenir un effet "double frontière" subtil, implémentons cette propriété.
/ * Définir une bordure de base et une couleur * / bordure: blanc uni 2px; / * Plusieurs couleurs de bordures dans Gecko * / / -moz-border-top-colours: # 292929 white; -moz-border-right-colors: # 292929 blanc; -moz-border-bottom-colours: # 292929 blanc; -moz-border-left-colors: # 292929 blanc;
Notez que le nombre de couleurs que nous fournissons est identique à la largeur de la bordure définie au début (2px). De plus, ne placez pas de virgules après chaque valeur hexadécimale; J'ai fait cette erreur au début!
À ma connaissance, webkit ne prend actuellement pas en charge les couleurs de bordure, bien qu'il soit possible que je me trompe. Si je le suis, s'il vous plaît laissez un commentaire et laissez-moi savoir! Quoi qu'il en soit, pour utiliser cet effet du mieux possible dans Safari et Chrome, nous allons utiliser box-shadow..
/ * Compenser pour Webkit. Pas aussi bien, mais ça marche. * / -webkit-box-shadow: 0 -1px 2px # 292929;
Notez que les valeurs fournies font référence à l'offset X, à l'offset Y, au flou et à la couleur de l'ombre, respectivement. En passant -1px comme décalage Y, nous pouvons pousser l'ombre vers le haut.
La dernière étape consiste à fournir un dégradé de fond subtil pour notre boîte. Cependant, nous devons veiller à fournir une couleur unie de secours pour les navigateurs qui ne prennent pas en charge les dégradés CSS..
/ * Fond dégradé subtil, avec repliement sur la couleur unie * / background: # e3e3e3; arrière-plan: -moz-linear-gradient (haut, # a4a4a4, # e3e3e3); arrière-plan: -webkit-gradient (linéaire, gauche en haut, gauche en bas, de (# a4a4a4) à (# e3e3e3));
Malheureusement, Mozilla et Webkit ne sont pas tout à fait d’accord sur la syntaxe des dégradés, ce qui rend le processus extrêmement irritant. Si cela vous semble trop déroutant, vous pouvez utiliser un nouveau service appelé CSS3 Please pour générer automatiquement la syntaxe de chaque navigateur. c'est vraiment cool!
C'est incroyable; En regardant notre image finale, il est difficile de dire ce que nous avons réellement fait! Mais c'est une bonne chose; la subtilité est la clé dans tous les aspects du design. Merci de lire / regarder!
/ * Rien de spécial ici. Juste la toile. * / body width: 500px; marge: 60px auto 0; arrière-plan: # 666; #box / * Seulement une boîte * / width: 500px; hauteur: 500px; / * Coins arrondis * / -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; bordure: blanc 2px; / * Plusieurs couleurs de bordures dans Gecko * / / -moz-border-top-colours: # 292929 white; -moz-border-right-colors: # 292929 blanc; -moz-border-bottom-colours: # 292929 blanc; -moz-border-left-colors: # 292929 blanc; / * Compenser pour Webkit. Pas aussi bien, mais ça marche. * / -webkit-box-shadow: 0 -1px 2px # 292929; / * Fond dégradé subtil, avec repliement sur la couleur unie * / background: # e3e3e3; arrière-plan: -moz-linear-gradient (haut, # a4a4a4, # e3e3e3); arrière-plan: -webkit-gradient (linéaire, gauche en haut, gauche en bas, de (# a4a4a4) à (# e3e3e3));
Accentsconagua