Comment créer une ombre portée avec CSS

Bien que les tendances du design varient chaque année, vous pouvez compter sur l'utilisation d'effets d'ombre de base comme boîte ombre et ombre portée contribuer positivement à l'esthétique d'un site Web. Vous pouvez utiliser ombres portées pour créer des effets agréables et magnifiquement rendus sans paraître ringard.

Regardons de plus près le CSS ombre portée biens.

Qu'est-ce que l'ombre portée CSS ?

ombre portée ( ) est un effet CSS qui affiche une ombre autour de la forme d'un objet spécifié. Voici la syntaxe pour appliquer un CSS ombre portée.

Syntaxe:
filtre: ombre portée (offset-x offset-y blur-rayus color);

Il existe une large gamme de fonctions de filtrage comprenant se brouiller( ), luminosité( ), et ombre portée ( ).

décalage-x détermine la distance horizontale et décalage-y détermine la distance verticale. Notez que les valeurs négatives placent l'ombre vers la gauche (décalage-x) et ci-dessus (décalage-y) L'object.

Les deux derniers paramètres sont facultatifs. Vous pouvez spécifier le rayon de flou de l'ombre en tant que longueur. Par défaut, il est défini sur 0. Vous ne pouvez pas avoir un rayon de flou négatif.

La couleur de l'ombre est spécifiée comme. Si vous n'avez pas spécifié de couleur, elle suit la valeur de la Couleur biens.

Quand l'ombre portée CSS est-elle utile ?

Vous le savez peut-être déjà boîte ombre fait plutôt bien le travail. Alors, vous pouvez penser, pourquoi avons-nous besoin ombre portée du tout? Il existe de nombreux cas où le ombre portée ( ) la fonction est une bouée de sauvetage. Jetons un coup d'œil à quelques-uns d'entre eux:

Formes non rectangulaires

Contrairement à un boîte ombre, vous pouvez ajouter un ombre portée aux formes non rectangulaires. Par exemple, nous avons un SVG ou un PNG transparent avec une forme non rectangulaire, une étoile par exemple. Ici, l'ajout d'une ombre qui correspond à l'objet lui-même peut être complété soit avec boîte ombre ou ombre portée. Considérez les deux scénarios:

HTML

CSS

.star-img img {
affichage: bloc en ligne ;
hauteur: 15em ;
largeur: 25em ;
}
.boîte ombre {
La couleur rouge;
box-shadow: 0.60em 0.60em 0.2em ;
}
.drop-shadow {
filtre: ombre portée (0.60em 0.60em 0.2em) ;
}

Sortir:

Lorsque l'on compare les deux effets, il est évident qu'un boîte ombre donne une ombre rectangulaire; peu importe que l'image soit transparente ou possède déjà un arrière-plan. D'autre part, ombre portée vous permet de créer une ombre qui se conforme à la forme de l'image elle-même.

Les facteurs limitatifs sont que le ombre portée ( ) la fonction accepte tous les paramètres de type à l'exception du encart mot-clé et diffuser paramètre.

Éléments groupés

Il existe plusieurs cas où vous devrez peut-être créer des composants en superposant certains éléments. Si vous utilisez boîte ombre, vous serez confronté au problème d'essayer de projeter une ombre de la bonne manière. Voici comment cela fonctionne lors du regroupement d'une image et d'un composant texte:

HTML

vivre l'instant présent

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Modi, corrupti commodi quisquam ex numquam incident.

CSS de base

corps {
rembourrage: 5em 1em ;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Genève, Verdana, sans-serif;
}
h2 {
taille de police: 2rem ;
}
p {
taille de la police: 0.8rem ;
}
.parent-conteneur {
affichage: flexible ;
flex-direction: colonne ;
hauteur: 17 rem ;
largeur: 50em ;
}
.image-conteneur img {
largeur: 15em ;
position: absolue ;
indice z: 1 ;
haut: 2em ;
à gauche: 1,5 em ;
}
.text-conteneur {
couleur: rvb (255, 236, 236) ;
couleur d'arrière-plan: rgb (141 035) ;
largeur: 30 rem ;
rembourrage: 3rem ;
align-self: flex-end ;
position: relative ;
}

Maintenant, appliquez le boîte ombre et ombre portée pour voir la différence.

.drop-shadow {
filtre: ombre portée (0.4rem 0.4rem 0.45rem rgba (0, 0, 30, 0,5));
}
.boîte,
.box img {
box-shadow: 0.4rem 0.4rem 0.45rem rgba (0, 0, 30, 0,3) ;
}

Sortir:

Comme vous pouvez le voir, le boîte ombre est appliqué sur chaque élément individuellement tandis que le ombre portée les regroupe tous les deux et applique l'ombre.

Éléments coupés

Vous pouvez utiliser le chemin de détourage pour découper une certaine région qui détermine quelles parties d'une image ou d'un élément doivent être affichées. Les filtre d'ombre portée nous permet de créer un ombre portée sur l'élément coupé en l'appliquant au parent de cet élément:

HTML

CSS

.parent-conteneur {
filtre: ombre portée (0rem 0rem 1.5rem marron);
}
.clipped-element {
largeur: 50em ;
hauteur: 50em ;
marge: 0 automatique ;
image d'arrière-plan: URL (fille-souriante.jpg);
chemin de détourage: cercle (50%) ;
taille de l'arrière-plan: couverture ;
background-repeat: pas de répétition ;
}

Sortir:

Nous avons découpé 50 % de l'image avec un chemin circulaire. Par conséquent, la filtre d'ombre portée s'applique uniquement à la partie visible de l'image. N'est-ce pas génial?

Limites et différences

Comme nous l'avons évoqué plus haut, ombre portée ne supporte pas le diffuser paramètre. Cela signifie que la création d'un effet de contour ne serait pas possible en utilisant le ombre portée ( ) fonction parce qu'il est tué partout. En outre, il rend différents effets d'ombre de la boîte ombre et ombre de texte (avec les mêmes paramètres). Vous pouvez avoir l'impression que les différences entre les boîte ombre et ombre portée se résumer au Modèle de boîte CSS. L'un le suit, l'autre non. Voici un exemple:

HTML

Chaque article de MUO vous rapprochera un peu plus.


Chaque article de MUO vous rapprochera un peu plus.



Chaque article de MUO vous rapprochera un peu plus.

CSS de base

corps {
rembourrage: 5em 1em ;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Genève, Verdana, sans-serif;
}
.parent-conteneur {
largeur: 72 rem ;
}
p {
taille de police: 3em ;
font-style: gras ;
}

Appliquer des effets d'ombre

.drop-shadow {
filtre: ombre portée (0.5em 0.5em 0.1em #555);
}
.boîte ombre {
box-shadow: 0.5em 0.5em 0.1em #555 ;
}
.ombre de texte {
texte-ombre: 0.5em 0.5em 0.1em #555 ;
}

Sortir:

Vous pouvez voir que le boîte ombre donne une ombre plus épaisse et plus foncée que le ombre de texte et ombre portée. De plus, il y a une légère différence dans le positionnement de l'ombre entre le ombre de texte et ombre portée. Néanmoins, vous pouvez préférer différents effets d'ombre selon vos besoins.

Prise en charge du navigateur

Les ombre portée ( ) La fonction est prise en charge dans tous les navigateurs modernes, à l'exception des navigateurs plus anciens comme Internet Explorer. Bien que ce ne soit pas quelque chose qui entraverait sérieusement l'UX, vous pouvez ajouter une requête de fonctionnalité avec un boîte ombre se retirer.

Expérimentez avec différents effets d'ombre

La popularité de boîte ombre est assez évident en raison de la multitude de cas d'utilisation. Cependant, le ombre portée ( ) fonction est fortement sous-utilisée. Nous espérons que vous expérimenterez différents effets d'ombre et essayerez de mettre en œuvre ombre portée dans vos futurs projets.

Les pseudo-classes ajoutent une toute nouvelle gamme de fonctionnalités à CSS et à votre répertoire personnel de développement Web. Apprenez-en plus à leur sujet pour devenir un développeur Web plus compétent et efficace.

Comment utiliser CSS box-shadow: 13 astuces et exemples

Les boîtes fades ont l'air ennuyeuses. Embellissez-les avec l'effet CSS box-shadow !

Lire la suite

A propos de l'auteur