Tutoriel d’ombrage de boîte CSS: guide étape par étape (+ exemple)

Pourquoi la propriété Box Shadow CSS devrait – elle avoir son propre tutoriel? Parce que, comme vous le verrez ci – dessous, c’est l’un des attributs les plus complexes pour obtenir plusieurs valeurs en même temps. Cela peut être particulièrement difficile pour les débutants. Si vous avez essayé jusqu’à présent d’utiliser correctement les ombres de boîte, vous êtes au bon endroit. Dans le guide ci – dessous, nous examinerons toutes les informations que vous devez connaître sur cet attribut CSS. Nous discuterons de sa fonctionnalité, comment utiliser sa syntaxe correctement, quelques bons exemples d’ombres de boîte CSS, et enfin quelques outils de générateur pour simplifier son utilisation.
Qu’est – ce qu’une ombre de boîte CSS? Même si vous ne connaissez pas encore la propriété CSS Box Shadow, vous avez peut – être vu son application réelle sur le Web. Ce qui précède est un bon exemple de ce à quoi il ressemble dans la nature (bien que je l’ai légèrement ajouté ici pour illustrer le problème). L’ombre de la boîte est essentiellement ce que le nom dit: elle vous permet d’ajouter une ombre descendante dans le cadre de presque n’importe quel élément. Les ombres sont également attachées à la forme de l’ancre, qu’elle soit carrée, rectangulaire, circulaire ou ovale. Cela s’applique également lorsque la propriété de rayon limite est définie. Sur le Web, les gens l’utilisent pour créer de nombreux effets différents. Ci – dessous, nous verrons quelques exemples intéressants d’ombres de blocs. Parlons maintenant de son fonctionnement au niveau le plus élémentaire.
Lorsque vous visualisez un projet avec une boîte ombragée à l’aide de l’outil de développement du navigateur, vous trouverez les balises suivantes: boîte ombragée: insérer 0 25px 40px 0 rgba (0, 0, 0, 0.3); Ça a l’air un peu compliqué, non? Mais ne vous inquiétez pas, vous n’avez pas besoin de ces déclarations à tout moment. Et une fois que vous avez compris comment ils fonctionnent, ce n’est pas aussi déroutant qu’au début. Comme indiqué ci – dessus, un maximum de six valeurs sont nécessaires pour les ombres de boîte. Vérifions – les un par un. La première valeur de offset – X est la distance horizontale entre l’ombre descendante et le côté de l’élément de positionnement. A.
Peut apparaître à la fin ou au début et peut apparaître dans n’importe quel ordre. Les CSS suivants auront le même résultat. Ombre du cadre: 20px 20px 10px 0 insérer rgba (0, 0, 0, 0,5); Ombre du cadre: 20px 20px 10px 0 rgba (0, 0, 0, 0,5) inséré; Ombre du cadre: insérer 20px 20px 10px 0 rgba (0, 0, 0, 0,5); Shadow box: rgba (0, 0, 0, 0.5) 20px 20px 10px 0 insert; Ombres de boîte: rgba (0, 0, 0, 0,5) incorporé 20px 20px 10px 0; Ombre de la boîte: insérer rgba (0, 0, 0, 0,5) 20px 20px 10px 0; Spécifier plusieurs ombres de cadre tout le monde ne sait pas que vous pouvez définir plusieurs ombres de cadre pour le même projet. Pour ce faire, il suffit de fournir plusieurs ensembles de valeurs séparées par des virgules.
Boxshadow: 20px 20px 10px 0 rgba (0,0,0,0,5), – 20px – 20px 10px 0 olive; Les codes ci – dessus sont similaires: Vous pouvez également l’utiliser pour créer des lignes autour d’un projet. Pour ce faire, il suffit d’ajouter quelques ombres de différentes couleurs et de les décaler et de les Flour à zéro. Ombre de la boîte: 0 0 0 20px rgba (0,0,0,0,5), 0 0 0 10px olives; Cela donne des contours de différentes couleurs: Notez que cela n’affecte pas la taille du modèle de cadre, de sorte que les ombres de cadre ne sont pas ajoutées à la taille globale de l’élément comme des marges ou des bordures.
Boîte de compatibilité du navigateur la compatibilité du navigateur Shadow n’est pas vraiment un problème que vous devez vous inquiéter. Il s’agit d’un attribut CSS reconnu qui est acceptable pour presque tous les navigateurs, y compris les balises comme insert et multi – Shadows. Pour prendre en charge les anciennes versions de certains navigateurs, les mêmes valeurs sont généralement utilisées, y compris – webkit Box Shadow et – MOZ Box Shadow. Cependant, cela n’est plus nécessaire pour les dernières versions des navigateurs les plus couramment utilisés. Exemples d’ombres de boîte CSS ensuite, dans ce tutoriel d’ombres de boîte, nous aimerions voir quelques exemples d’ombres de boîte CSS afin que vous puissiez voir comment utiliser cette propriété. Nous allons passer de l’application
C’est assez standard pour les gens les plus extraordinaires, parce que, comme vous le verrez, vous pouvez l’utiliser pour faire des choses vraiment excitantes.
Les boutons ajouter des ombres aux boutons sont généralement des éléments qui appliquent des ombres de cadre. C’est parce que c’est une bonne façon de les faire se démarquer sur la page. Après tout, si vous incluez un bouton, vous voulez généralement que les gens cliquent dessus. Pour les inviter à le faire, voici un exemple simple de la façon d’utiliser les cases ombragées. Le marquage ci – joint est similaire à ce qui suit: ombres de cadre: 0px 11px 12px rgba (0, 0, 0, 0.2); Ombres de cadre souple si vous créez des ombres de cadre CSS relativement douces, vous utilisez principalement le flou et la diffusion lorsque vous réglez le décalage à 0. De cette façon, les ombres ne prennent pas de forme évidente, mais apparaissent légèrement autour des bords.
Pour obtenir l’effet ci – dessus, utilisez les marques suivantes: ombres de boîte: 0 0 50px 10px # 999; C’est aussi une bonne façon de créer des ombres sur toutes les faces d’un élément. Pour le rendre plus clair, il suffit d’augmenter la diffusion, d’adoucir le flou et d’utiliser une couleur plus foncée. Plusieurs ombres d’une boîte le dernier exemple d’ombre d’une boîte est d’utiliser plusieurs ombres à la fois. Cela offre plusieurs possibilités. Tout d’abord, vous pouvez introduire une ombre multicouche en gradient. C’est très simple: il suffit d’empiler les ombres de cadre l’une sur l’autre avec un décalage uniformément croissant, tout en réduisant l’opacité. Incidemment, lorsque vous utilisez beaucoup d’ombres de boîte, il est utile d’écrire des déclarations dans des lignes séparées plutôt que comme des déclarations longues. Cela le rend plus facile à comprendre.
Ombre de la boîte: 10px 10px rgba (0, 0, 0, 0,4), 20px 20px rgba (0, 0, 0,3), 30px 30px rgba (0, 0, 0,2), 40px 40px rgba (0, 0, 0,1), 50px 50px rgba (0, 0, 0,05); L’ombre de la boîte blanche avec un rayon de diffusion négatif au milieu peut également être introduite, ce qui donne une différence
Les éléments se chevauchent. Pourquoi la différence de prix est – elle négative? Sinon, les ombres des boîtes blanches recouvrent les ombres sous elles. Les valeurs négatives les réduisent afin que les couleurs suivantes puissent briller. Si vous souhaitez introduire un effet similaire sur votre site Web, utilisez les marques suivantes: boxshadow: 10px 10px 0px – 3px rgba (255255255), 10px 10px rgba (0, 0, 0.4), 10px 10px rgba (0, 0, 0.0.4), 20px 20px 0px – 0px – 3px rgba (255255255), 20px 20px rgba (0, 0, 0.0.3), 30px 30px 0px – 3px rgba (255255), 30px 30px rgba (0, 0, 0.0.0.0.0.0.2), 40px 40px 40px 0px 0px 0px – 3px rgba (0, 0.(255, 255, 255), 40px 40px rgba (0, 0, 0, 0,1), 50px 50px 0px – 3px rgba (255255255), 50px 50px rgba (0, 0, 0,05); Le dernier exemple de différentes ombres de panneau CSS est la méthode décrite ci – dessus pour définir le décalage et le flou à 0. Comme décrit ci – dessus, il génère des éléments avec des profils différents, qui sont colorés dans ce cas. Cependant, cela ne s’applique qu’à chaque ombre du cadre, car la valeur du rayon de diffusion augmente. Si vous voulez essayer par vous – même, commencez par les cases ombragées: 0px 0px 0px 3px rouge, 0px 0px 0px 6px orange, 0px 0px 0px 9px jaune, 0px 0px 12px Vert, 0px 0px 15px bleu, 0px 0px 0px 18px Indigo, 0px 0px 0px 0px 21px violet; Le meilleur générateur d’ombres de boîte comme nous l’avons expliqué, les ombres de boîte nécessitent beaucoup de valeurs. Par conséquent, certaines tentatives et erreurs peuvent être nécessaires avant d’obtenir le type d’ombre désiré. Pour simplifier, il existe de nombreux outils de génération d’ombres oculaires qui vous permettent d’utiliser leurs contrôles, de visualiser les résultats immédiatement, puis de copier simplement les étiquettes une fois que vous êtes satisfait. Voici les meilleures options pour le générateur d’ombres de boîte: les ombres de boîte. Dev – cet outil jetable a toutes les fonctionnalités dont vous avez besoin et la meilleure interface utilisateur du Groupe. Vous pouvez utiliser insert, créer différentes ombres de cadre, contrôler le décalage, le flou et
Adoucir le curseur et saisir manuellement la couleur. Lorsque vous êtes satisfait, cliquez sur afficher le Code pour copier l’étiquette CSS. Le seul inconvénient est qu’il ne fournit pas de code pour l’ancien navigateur. Cssmatic Box Shadow CSS Builder – similar to above. Il vous permet de contrôler les attributs d’ombre de la boîte à travers le curseur et vous permet également d’entrer manuellement des nombres. Elle peut contrôler elle – même l’opacité, ce qui est bien. D’autre part, il manque plus d’ombres. Les balises pour le Code que vous obtenez incluent des navigateurs plus anciens. Boxshadow CSS Builder: une option fiable qui a également une fonction de sélection de couleurs et peut même fournir du Code pour les navigateurs plus anciens. Vous pouvez le copier en un seul clic. Il a un contrôle d’opacité, mais ne peut créer que des ombres descendantes. Css3gen CSS3 Box Shadow generator – another Shadow Generator. Une caractéristique intéressante ici est que vous pouvez choisir l’angle et la distance de l’ombre au lieu de xey offset, et l’outil fera le reste automatiquement. Pour certaines raisons, spread radius et Inset ont leurs propres menus. Les CSS que vous pouvez facilement copier et coller incluent également des balises pour les générations précédentes de navigateurs. Dernière considération: les attributs d’ombre de boîte CSS peuvent être très puissants au début. C’est l’un des attributs qui nécessite beaucoup de valeurs, donc il peut sembler plus compliqué que ce qui se passe réellement. J’espère que ce tutoriel CSS à l’ombre de bloc éliminera ce sentiment. Ci – dessus, nous avons appris ce qu’est une ombre de cadre CSS et comment elle fonctionne. Nous avons expliqué la syntaxe, les valeurs et comment elles fonctionnent ensemble. De plus, nous avons examiné quelques exemples de la façon dont les ombres de boîte CSS peuvent être utilisées dans la vie réelle, y compris les balises qui peuvent être utilisées immédiatement. Enfin, pour ceux qui ont besoin d’aide, nous énumérons quelques générateurs d’ombre de boîte CSS qui peuvent faire beaucoup de travail pour vous. À ce stade, vous devriez être en mesure d’utiliser
Réinitialisez cette fonctionnalité CSS sur votre site Web. Nous avons hâte de voir ce que vous en faites. Comment utilisez – vous CSS Box Shadows sur votre site Web? Y a – t – il des cas d’utilisation intéressants que nous n’avons pas mentionnés ci – dessus? Veuillez nous le dire dans les commentaires ci – dessous!