[Résolu] Cadre ombré

Bonjour à tous
Le propriétaire du site a trouvé un "cadre ombré" et me demande si on pourrait utiliser une présentation de ce genre:


Quand on regarde comment l'ombre du bas est faite sur le site d'origine, on voit qu'il s'agit d'un background-image dans une <div> située en bas de la box. Cette solution n'est pas responsive, bien entendu.

J'ai le sentiment qu'on doit pouvoir faire ça en pur CSS en jouant sur l'épaisseur d'un border, les border radius et un dégradé de couleur, mais ça dépasse mes compétences.

est-ce que quelqu'un aurait une idée pour réaliser ça?

Merci de bien vouloir m'éclairer de vos lumières.

PapyJP a écrit :
Bonjour à tous
Le propriétaire du site a trouvé un "cadre ombré" et me demande si on pourrait utiliser une présentation de ce genre:
upload/1528205836-48769-shadow-text.png

Quand on regarde comment l'ombre du bas est faite sur le site d'origine, on voit qu'il s'agit d'un background-image dans une &lt;div&gt; située en bas de la box. Cette solution n'est pas responsive, bien entendu.

J'ai le sentiment qu'on doit pouvoir faire ça en pur CSS en jouant sur l'épaisseur d'un border, les border radius et un dégradé de couleur, mais ça dépasse mes compétences.

est-ce que quelqu'un aurait une idée pour réaliser ça?

Merci de bien vouloir m'éclairer de vos lumières.

Normalement, la propriété drop-Shadow en CSS devrait répondre à ton besoin. Je suis sur portable là... fais une petite recherche sur le web. Il existe pas mal de tutoriels sur le sujet.

Merci je vais chercher dans ce sens

Très intéressant, je vais creuser

Greg_Lumiere a écrit :
J'avais ça en stock https://www.creativejuiz.fr/blog/tutoriels/ombre-avancees-avec-css3-et-box-shadow

C'est le tutoriel avec lequel j'ai débuté pour apprendre à faire ce genre de chose, il est vieux mais toujours d'actualité, j'utilise toujours actuellement cette technique sur mes boites. Contrairement aux exemples du tutoriel, afin d'éviter certaines limitations en responsive, je suggère de coder toutes les mesures en valeurs relatives, les ombres aussi d'ailleurs...
Modifié par Olivier C (01 Dec 2018 - 11:51)

Olivier C a écrit :

Contrairement aux exemples du tutoriel, afin d'éviter certaines limitations en responsive, je suggère de coder toutes les mesures en valeurs relatives, les ombres aussi d'ailleurs...

Merci pour le conseil. Le propriétaire du site a l'air intéressé, je vais donc passer de la théorie à la pratique!

PapyJP a écrit :

Merci pour le conseil. Le propriétaire du site a l'air intéressé, je vais donc passer de la théorie à la pratique!

J'avais du temps à perdre ce matin, je te l'ai fait : CodePen.

Merci Olivier
Je ne suis malheureusement pas parvenu à intégrer correctement ce code dans mon environnement.
Peux tu jeter un coup d’œil sur cette page https://tests.osirisnet.net/tests1/box.html

Une règle de paragraphe surclasse le code proposé, pour les pseudo-éléments je ne sais pas...

Là je ne peux pas aller voir : je suis sur mon mobile. Je passerai un coup d'inspecteur d'ici la fin du WE pour trouver ce qui cloche.

Merci de ton aide, je vais essayer de regarder à nouveau, ça doit être un truc à la c.. qui devrait me crever les yeux...

C'est manifestement un problème de z-index.
Si je comprends bien ce que tu as fait, le ::after avec son z-index:-1 doit être partiellement caché par le <aside> et on ne doit voir que le bas du ::after.
Si je ne mets rien dans le z:index de <aside> on ne voit rien du ::after.
SI je mets z-index:0 (ou autre chose) dans <aside>, on voit le ::after, mais il n'est pas caché par le corps du <aside> alors qu'il a un z-index:-1
Il y a (au moins) un truc qui m'échappe!!

Bonjour,

je n'ai pas trop envie d'intervenir… j'ai plutôt envie de voir ce que va dire Olivier C.
(Ces contextes d'empilement, ce n'est pas facile… et je ne suis pas sûre d'avoir tout compris de toute façon.)

Disons que le code d'Olivier C est bon, le problème, c'est tout ce qu'il y a autour. L'ombre va tout en-dessous, dans les fondations de la maison.



(Mais je dirais la solution si Olivier C ne la dit pas, bien entendu. Mais je suis sûre qu'il va le faire…)

Oui, bien sûr le code d’Olivier est très clair et fonctionne très bien. C’est quand je veux l’intégrer au contexte du site que ça plante, mais je ne suis toujours pas arrivé à comprendre laquelle des 1000 lignes de code des feuilles CSS du site est en contradiction avec le code d’Olivier.
La nuit portera peut être conseil...

Zelena a écrit :
Mais je dirais la solution si Olivier C ne la dit pas, bien entendu. Mais je suis sûre qu'il va le faire…

Hem... ça met pas la pression

Comme vous l'avez vu il s'agit a priori d'un problème de z-index (vous avez aussi vu qu'il y avait un pseudo-élément de trop, très bien), il y a un truc qui se télescope avec une ressource de Papy mais je n'arrive pas à trouver laquelle.

Afin de tenter d'isoler le problème j'ai moi aussi essayé de créer un environnement de test pour comprendre, en essayant de charger toutes les ressources d'Osiris (CSS et JS) que j'ai trouvé sur la page : CodePenAvecRessourcesOsiris.

Mais nada, pour moi le mystère reste entier pour l'instant, je sèche...
Modifié par Olivier C (10 Jun 2018 - 09:05)

Merci Zelena
Je suis absent de chez moi aujourd’hui je regarde ce soir, mais à première vue ça semble mieux que ce que j’avais obtenu, du moins sur mon iPhone
Il y a peut-être aussi un problème de compatibilité de navigateur, mais ce n’est pas le fond du problème

Bonjour,

je remets l'article de M. Oliveira qui est fort complet sur le sujet :
https://iamvdo.me/blog/comprendre-z-index-et-les-contextes-dempilement

Il est complet mais pas facile à comprendre. À cause de la nature du sujet, probablement.

Je vais le citer :

a écrit :
Quand les propriétés z-index et position ne sont pas utilisées, les règles sont plutôt simples: l’ordre d’empilement est identique à l’ordre d’apparition dans le HTML.

Mais vous mettez assez souvent 'position' dans vos pages HTML, M. JP. Et donc :

a écrit :
Quand vous commencez à utiliser la propriété position, les éléments positionnés (et ses enfants) sont affichés devant les éléments non-positionnés. (Un élément est considéré «positionné» lorsque que la valeur de la propriété position est différente de static, comme par exemple relative, absolute, etc.)

Alors, si vous rajoutez z-index :

a écrit :
Enfin, lorsque z-index est associé, les choses deviennent plus délicates.

Et pas qu'un peu :

a écrit :
D’abord, il est naturel de penser que les éléments avec un z-index plus élevé apparaissent devant les éléments avec un z-index plus faible, et que les éléments qui ont un z-index sont affichés devant les éléments qui n’en ont pas, mais ce n’est pas si simple.

Quand je disais que j'avais pas tout compris moi-même…
Un indice : un élément positionné est le fautif.


(Merci, M. Oliveira pour la traduction de l'article.)
Modifié par Zelena (10 Jun 2018 - 09:57)

De toute façon un nouveau problème apparaît suite à une "correction" par l'application d'un z-index sur l'élément conteneur, ça plante le positionnement du pseudo-élément mais je ne sais pas pourquoi. Certainement un problème de comportement connu mais dont j'ignorais l'existence...

Exemple avec le code original modifié (ajout d'un z-index sur l'élément conteneur) : CodePen

Pour le problème d'origine : apparemment c'est la balise `main` qui entre en conflit avec le code, mais je ne sais pas encore de quelle manière...
Modifié par Olivier C (10 Jun 2018 - 13:42)

Bonjour,

peut-être est-ce dû au fait que c'est dans un Codepen…
Je ne vois pas non plus ce qui ne va pas dans l'exemple que vous donnez.



P.S. : Sans z-index sur div.box, l'ombre passe bien derrière, mais elle n'est pas visible.
Modifié par Zelena (10 Jun 2018 - 14:00)

Zelena a écrit :
P.S. : Sans z-index sur div.box, l'ombre passe bien derrière, mais elle n'est pas visible.

Oui j'avais vu...