Comment ajouter CSS Box Shadow dans WordPress

Vous voulez ajouter un effet d’ombre portée aux images de votre site Web ou à d’autres contenus ? Cela peut être fait en utilisant CSS, pas besoin d’utiliser un logiciel compliqué. L’avantage d’utiliser CSS pour ajouter un effet d’ombre est que vous pouvez cibler les éléments avec précision et les modifier au fur et à mesure des besoins. Dans le cas des images, l’ajout de l’effet d’ombre portée via CSS élimine le besoin de les modifier définitivement.

Vous pouvez ajouter l’effet d’ombre portée à l’aide d’une simple propriété CSS appelée Box Shadow à presque tous les éléments ou images HTML. Box Shadow est une propriété CSS simple qui attache une ou plusieurs ombres à un élément en utilisant des décalages, un flou, un rayon et une couleur. Box Shadow a été introduit dans CSS à l’époque et est pris en charge par tous les navigateurs modernes.

La meilleure chose à propos de Box Shadow est que vous pouvez soit ajouter un effet d’ombre à l’extérieur de la zone de contenu, soit à l’intérieur. Maintenant, vous vous demandez peut-être ce que signifie une zone de contenu. En termes simples, une zone de contenu n’est rien d’autre qu’un élément HTML comme P, DIV, etc.

CSS Box Shadow Syntaxe

La syntaxe de la propriété Box-Shadow ressemblera à celle-ci.

box-shadow: <horizantal-offset> <vertical-offset> <blur-radius> <spread-radius> <color>;

Décalage horizontal (valeur requise) : Il s’agit d’une valeur obligatoire et lorsque vous définissez des valeurs positives (comme 10px), l’ombre sera poussée horizontalement vers la gauche. Une valeur négative (comme -10px) poussera l’ombre vers la droite. Vous pouvez le mettre à 0 si vous ne voulez pas décaler l’ombre.

Lis  Meilleur antivirus gratuit pour Android en 2021

Décalage vertical (valeur requise) : Il s’agit d’une valeur obligatoire et lorsque vous définissez des valeurs positives (comme 10px), l’ombre sera enfoncée verticalement. Les valeurs négatives (comme -10px) pousseront l’ombre verticalement. Vous pouvez le mettre à 0 si vous ne voulez pas décaler l’ombre.

Rayon de flou (valeur requise) : Cette valeur brouille l’ombre afin qu’elle n’ait pas de bords durs. Plus la valeur est élevée, plus l’effet de flou sera élevé. Si vous ne voulez pas d’effet de flou, vous pouvez le régler sur « 0 ».

Rayon de diffusion (valeur des options) : Il s’agit d’une valeur facultative qui étale l’ombre en fonction de la valeur que vous définissez. Plus la valeur est élevée, plus le spread sera élevé. Si vous ne voulez pas d’effet de propagation, vous pouvez soit omettre la valeur, soit la définir sur « 0 ».

Couleur (valeur requise) : Vous pouvez définir la couleur de votre choix à l’aide de l’hexadécimal, du RVB (rouge, bleu, vert, alpha), HLSA (teinte, saturation, luminosité, alpha) et des couleurs HTML nommées. Si vous n’avez défini aucune couleur, le navigateur définira une couleur par défaut. La couleur par défaut dépend entièrement du navigateur que vous utilisez. Donc, c’est toujours une bonne idée de définir la couleur.

Ajouter CSS Box Shadow à une image ou à une zone de contenu

En utilisant la syntaxe ci-dessus, vous pouvez facilement ajouter l’effet d’ombre portée à n’importe quel élément. Par exemple, si vous souhaitez ajouter l’effet d’ombre avec flou et propagation à un élément div, tout ce que vous avez à faire est de cibler cet élément à l’aide de la balise d’élément ou de sa classe CSS ou de son ID et de remplir les valeurs de la boîte-ombre propriété. Cela ressemblera à quelque chose comme ça.

.shadow-effect { box-shadow: 3px 3px 10px 2px #a9a1a1; }

Résultat:

Lis  Comment obtenir deux identifiants Apple différents sur iPhone

box shadow effect

Si vous ne voulez pas brouiller l’ombre mais l’étendre, le code ressemblera à ceci.

.shadow-effect { box-shadow: 5px 5px 0px 2px #a9a1a1; }

Comme vous pouvez le voir, j’ai défini le rayon de flou sur 0px. L’effet d’ombre résultant a des bords durs et ressemble à ceci.

image shadow

L’une des choses les plus folles à propos de la propriété Box-Shadow est qu’elle vous permet d’ajouter plusieurs ombres. Pour ce faire, il vous suffit de spécifier des valeurs séparées par des virgules. La syntaxe ressemblera à ceci.

.shadow-effect { box-shadow: 10px 10px 0 blue, 15px 15px 0 red, 20px 20px 0 green; }

multiple box shadows

En ajoutant “inset” à la propriété box-shadow, vous pouvez afficher l’effet d’ombre à l’intérieur de la zone de contenu.

.shadow-effect { box-shadow: inset 3px 3px 10px 2px #a9a1a1; }

Résultat:

inset box shadow

Ce ne sont là que quelques exemples de la façon dont vous pouvez ajouter l’effet d’ombre à n’importe quelle zone de contenu ou image. En modifiant simplement différentes valeurs, vous pouvez obtenir l’effet d’ombre que vous souhaitez. Jouez et voyez ce qui correspond à vos besoins.

Générateur d’ombres de texte CSS

Si vous souhaitez ajouter l’ombre portée au texte, vous devez utiliser la propriété Text-Shadow. La syntaxe est très similaire à la propriété Box-Shadow mais il n’y a pas de rayon de propagation dans la propriété Text-Shadow. Voici la syntaxe.

text-shadow: <horizantal-offset> <vertical-offset> <blur-radius> <color>;

Lorsque vous remplacez la syntaxe ci-dessus par des valeurs réelles, cela ressemblera à ceci.

p { text-shadow: 1px 1px 2px #333333; }

L’effet résultant sera quelque chose comme ça.

text shadow effect

Contrairement à la propriété box-shadow, la valeur de flou dans Text-Shadow est facultative. c’est-à-dire que si vous ne voulez pas que l’ombre du texte soit floue, vous pouvez soit omettre la valeur, soit la définir sur « 0 ».

Lis  Masquez votre adresse e-mail lorsque vous l'utilisez sur des sites Web ombragés

Ajouter CSS Box Shadow sur des images spécifiques sur WordPress

Maintenant que nous avons compris comment ajouter un effet d’ombre aux images à l’aide de CSS, nous avons maintenant besoin d’un moyen de l’ajouter sur des images spécifiques sans affecter les autres images du site Web.

Pour ce faire, vous pouvez simplement créer une nouvelle classe CSS et l’ajouter à l’image au fur et à mesure des besoins. De cette façon, seules les images avec cette classe CSS spécifique auront l’effet d’ombre.

Pour créer une nouvelle classe CSS, vous pouvez soit utiliser le plugin Simple Custom CSS WordPress ou mLa plupart des thèmes WP sont également fournis avec un fichier custom.css. Vous pouvez également ajouter le code CSS dans ce fichier.

ajouter un effet d'ombre sur wordpress

Ensuite, double-cliquez sur le Éditer icône pour cette image (celle qui ressemble à un crayon). Sous le Avancée recherche d’options Classe CSS d’image et tapez le nom de la classe, que vous avez défini dans notre feuille de style. Pour cet exemple, notre nom de classe est effet d’ombre, une fois terminé, enregistrez les modifications.

mettre à jour le css

Et puis cliquez sur “Enregistrer le brouillon” ou ‘Mettre à jour‘ pour mettre à jour la page WordPress. Lorsque la page est actualisée, le résultat ressemble à ceci :

Seules les images avec effet d’ombre de classe CSS seront entourées d’une ombre de boîte. Si votre article de blog comporte 20 images, vous devrez le faire manuellement pour 20 images, ce qui est un peu fastidieux. Cependant, cela vous fera quand même gagner beaucoup de temps en l’éditant sur Photoshop.

Lis  Quelles voitures Uber accepte de travailler en tant que chauffeur ou partenaire et les exigences

effet d'ombre

Comme vous pouvez le voir, ajouter l’effet d’ombre portée à l’aide de CSS n’est pas difficile. Les exemples que j’ai montrés ici ne sont que les bases. Jouez simplement avec différentes valeurs et vous verrez à quel point les propriétés Box-Shadow et Text-Shadow sont vraiment efficaces. Pour plus de facilité d’utilisation, vous pouvez également utiliser un générateur d’ombres de boîte.

J’espère que cela pourra aider. Commentez ci-dessous en partageant vos réflexions et expériences sur l’utilisation de la méthode ci-dessus pour ajouter un effet d’ombre portée aux images ou aux zones de contenu à l’aide de CSS.

Pour protéger votre fils, votre mari ou votre espion, vous pouvez télécharger cette application

X
0 Shares
Tweet
Share
Share
Pin
blank