27355 sujets

CSS et mise en forme, CSS3

Bonsoir,

sur un site dont je m’occupe, j'ai mis du box-shadow, sur l'onglet courant; puis j'ai voulu utiliser, sur les onglets, la propriété clip-path; du coup, l'ombre a disparu. Y-a-t-il un moyen de faire cohabiter les deux effets ?

Merci de votre aide.
Modérateur
Hello,
Je dirais qu'il te faut un élément pour wrapper ton élément actuel et ainsi appliquer ton ombre sur ce parent Smiley smile
filter drop-shadow

@gcyrillus : Merci pour la découverte de cette propriété que je ne connaissais pas.

Par contre l'ombre est plus précise lorsqu'elle est appliquée sur l'élément parent que sur l'élément enfant, j'ai loupé un truc ?

Edit : par contre je viens d'essayer des ombres plus étalées avec clip-path, du type `drop-shadow(2px 2px 20px rgba(0 ,0 ,0 ,.3)`, c'est pas terrible.
Modifié par Olivier C (20 May 2020 - 17:33)
Modérateur
Olivier C a écrit :
filter drop-shadow
...
Par contre l'ombre est plus précise lorsqu'elle est appliquée sur l'élément parent que sur l'élément enfant, j'ai loupé un truc ?


oui et non , l'ombre est dessiné à l'intérieur de élément sur les limites des zones transparentes et opaques, box-shadow est dessiné sur l’extérieur de l'élément.

Ces deux là ne se ressemblent qu'au premier abord. c'est pour cela qu'il est préférable ici de se servir d'un parent avec un fond transparent. Ravi de t'avoir fait découvreir un truc.

Cdt
gcyrillus a écrit :
Ravi de t'avoir fait découvrir un truc.

Et ce n'est pas la première fois !
Modifié par Olivier C (24 May 2020 - 15:00)