28172 sujets
CSS et mise en forme, CSS3
Avec ce CSS :
Et pour le HTML :
l'ombre passe derrière. Mais j'ai du mal à voir la différence avec votre Codepen… Et ça ne marche bien qu'avec Chrome, avec Firefox, on dirait qu'il y a de la transparence…
.box {
position: absolute;
z-index: 1;
max-width: 20rem;
padding: 2rem;
color: #474747;
text-shadow: 0.05rem 0.05rem 0 #fffaf4;
background-color: #e7e7e7;
border-radius: 0.5rem;
}
.box::before {
content: '';
position: absolute;
z-index: -1;
bottom: -0.5em;
left: 10%;
width: 80%;
height: 1.5em;
max-width: 30em;
box-shadow: 0 1.5em 2em rgba(0,0,0,0.8);
border-radius: 50%;
}
.box h1 {
position: relative;
padding-bottom: 1.5rem;
font-family: Georgia;
font-size: 1.8rem;
font-weight: 500;
text-align: center;
}
.box h1::before{
content: '';
display: block;
position: absolute;
top: 100%;
width: 100%;
height: 0.1rem;
}
.box h1::before {
background-image: linear-gradient(to top, #fffaf4 50%, #474747 50%);
}
.box p {
line-height: 1.5;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f8f7f5;
}Et pour le HTML :
<body>
<div class="box">
<h1>Program Installation</h1>
<p>The software include the handy wizard that helps you to install it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam error earum quibusdam quos accusantium quaerat. Illum, nostrum. Ad dolorum praesentium pariatur aliquam, distinctio omnis mollitia ipsum molestias maiores, delectus quae.</p>
<p><strong>Important:</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti iure qui nesciunt laudantium, aspernatur eius nemo ipsa ducimus dolorem sed debitis sint officia, dolorum exercitationem ab sequi? Rerum, officiis voluptatibus.</p>
</div>
<body>l'ombre passe derrière. Mais j'ai du mal à voir la différence avec votre Codepen… Et ça ne marche bien qu'avec Chrome, avec Firefox, on dirait qu'il y a de la transparence…
Pour essayer de simplifier le problème, j'ai remplacé le ::after par un <div class="shadow">
Peine perdue, ce qui semble se produire c'est que cet élément se place systématiquement au dessus de ce qui précède, en gros quelle que soit la valeur de z-index.
Si on examine la superposition des balises dans mon site:
<body> avec son image de fond sensée évoquer l’Égypte ancienne (pierre calcaire utilisée dans les monuments égyptiens)
<div id="container"> qui limite la zone d'affichage dans des limites raisonnables, quelle que soit la largeur du support et qui a un fond blanc.
le container contient
- un <header> avec l'image d'en-tête et le menu
- un <main> qui contient la partie utile (textes, images)
- un <footer> "Cyber protection" (voulu par le propriétaire, je ne pense pas que ça protège de quoi que ce soit)
Dans le <main> il y a
- un <header> qui en règle générale contient une <figure> illustrant le thème de l'article et un titre <h1>
- différentes balises (en général des <section> qui elles même contiennent des textes, des images et des <aside>
- un <footer>
Tous ces éléments n'ont pas de z-index
Pour ce test, je n'ai rien mis dans le <header> et le <footer> de l'article, et j'ai simplement mis un <aside class="box"> entre les deux.
On constate que:
1) si on ne met pas de z-index dans le <aside class="bloc"> le ::after ne n'affiche pas, sans doute parce que le z-index:-1 le place derrière le <body> (???)
2) si on met un z-index quelconque dans le <aside class="bloc"> le ::after s'affiche au dessus du <aside>, et non au dessous,et ce quelle que soit la valeur du z-index du ::after
Le phénomène est le même si on remplace le ::after par une <div class="shadow">, c'est à dire que ce n'est pas le fait que c'est un pseudo élément qui est la cause du problème.
J'en déduis qu'on a un problème avec l'utilisation des z-index entre un élément ou pseudo élément en position:absolute par rapport à un contexte ou tout est en position:static (valeur par défaut)
Je vais essayer de voir les docs sur z-index
Peine perdue, ce qui semble se produire c'est que cet élément se place systématiquement au dessus de ce qui précède, en gros quelle que soit la valeur de z-index.
Si on examine la superposition des balises dans mon site:
<body> avec son image de fond sensée évoquer l’Égypte ancienne (pierre calcaire utilisée dans les monuments égyptiens)
<div id="container"> qui limite la zone d'affichage dans des limites raisonnables, quelle que soit la largeur du support et qui a un fond blanc.
le container contient
- un <header> avec l'image d'en-tête et le menu
- un <main> qui contient la partie utile (textes, images)
- un <footer> "Cyber protection" (voulu par le propriétaire, je ne pense pas que ça protège de quoi que ce soit)
Dans le <main> il y a
- un <header> qui en règle générale contient une <figure> illustrant le thème de l'article et un titre <h1>
- différentes balises (en général des <section> qui elles même contiennent des textes, des images et des <aside>
- un <footer>
Tous ces éléments n'ont pas de z-index
Pour ce test, je n'ai rien mis dans le <header> et le <footer> de l'article, et j'ai simplement mis un <aside class="box"> entre les deux.
On constate que:
1) si on ne met pas de z-index dans le <aside class="bloc"> le ::after ne n'affiche pas, sans doute parce que le z-index:-1 le place derrière le <body> (???)
2) si on met un z-index quelconque dans le <aside class="bloc"> le ::after s'affiche au dessus du <aside>, et non au dessous,et ce quelle que soit la valeur du z-index du ::after
Le phénomène est le même si on remplace le ::after par une <div class="shadow">, c'est à dire que ce n'est pas le fait que c'est un pseudo élément qui est la cause du problème.
J'en déduis qu'on a un problème avec l'utilisation des z-index entre un élément ou pseudo élément en position:absolute par rapport à un contexte ou tout est en position:static (valeur par défaut)
Je vais essayer de voir les docs sur z-index
La solution est peut-être d'utiliser un gradient en fond plutôt qu'une ombre ?
https://codepen.io/gc-nomade/pen/dKNxZw
P.S. IE6 m'a appris que la solution la plus solide était souvent celle qui consister à changer d'approche et de technique
https://codepen.io/gc-nomade/pen/dKNxZw
P.S. IE6 m'a appris que la solution la plus solide était souvent celle qui consister à changer d'approche et de technique
Bonjour,
alors, je ne prétends pas avoir compris mais ça fonctionne…
Dans le premier lien posté par PapyJP, si on enlève le z-index sur l'aside, l'ombre passe derrière tout le monde. En autre, elle va derrière le main qui a un background-color blanc…
Il suffit, si je puis dire, de donner à ce main un z-index négatif — il est positionné en position relative, donc on peut — pour que l'ombre passe devant. (En fait, il semblerait que n'importe quelle valeur de z-index fasse l'affaire…)
Et voilà.
(J'ai l'impression qu'on a tendance à se focaliser un peu trop sur la valeur des z-index.
)
Modifié par Zelena (11 Jun 2018 - 09:41)
alors, je ne prétends pas avoir compris mais ça fonctionne…
Dans le premier lien posté par PapyJP, si on enlève le z-index sur l'aside, l'ombre passe derrière tout le monde. En autre, elle va derrière le main qui a un background-color blanc…
Il suffit, si je puis dire, de donner à ce main un z-index négatif — il est positionné en position relative, donc on peut — pour que l'ombre passe devant. (En fait, il semblerait que n'importe quelle valeur de z-index fasse l'affaire…)
Et voilà.
(J'ai l'impression qu'on a tendance à se focaliser un peu trop sur la valeur des z-index.
) Modifié par Zelena (11 Jun 2018 - 09:41)
La doc MDN dit :
Dans certaines conditions, un contexte d'empilement enfant peut être créé à l'intérieur d'un bloc DIV (ou un autre élément) n'importe où dans le document. En particulier, un élément positionné (en absolu ou en relatif) possédant une valeur de z-index différente de auto crée son propre contexte d'empilement : tous ses éléments enfants sont entièrement empilés dans ce contexte, suivant les mêmes règles que celles expliquées précédemment. Les valeurs de z-index de ses enfants n'ont de signification que dans ce contexte . Le bloc DIV entier et son contenu sont empilés comme un seul élément dans le contexte d'empilement de leur parent.
Si l'<article> possède un z-index, il serait rendu pour ensuite créer son propre contexte et ensuite afficher les before/after avec une z-index: -1 dans une pile vide...
Je n'avais jamais eu le cas non plus et c'est assez surprenant je trouve
Un moyen facile (mais moins propre) serait sans d'avoir un wrapper pour éviter d'appliquer le z-index sur le parent des before/after.
Dans certaines conditions, un contexte d'empilement enfant peut être créé à l'intérieur d'un bloc DIV (ou un autre élément) n'importe où dans le document. En particulier, un élément positionné (en absolu ou en relatif) possédant une valeur de z-index différente de auto crée son propre contexte d'empilement : tous ses éléments enfants sont entièrement empilés dans ce contexte, suivant les mêmes règles que celles expliquées précédemment. Les valeurs de z-index de ses enfants n'ont de signification que dans ce contexte . Le bloc DIV entier et son contenu sont empilés comme un seul élément dans le contexte d'empilement de leur parent.
Si l'<article> possède un z-index, il serait rendu pour ensuite créer son propre contexte et ensuite afficher les before/after avec une z-index: -1 dans une pile vide...
Je n'avais jamais eu le cas non plus et c'est assez surprenant je trouve
Un moyen facile (mais moins propre) serait sans d'avoir un wrapper pour éviter d'appliquer le z-index sur le parent des before/after.
Merci à tous por vos contributions
A partir d’un petit problème marginal (une ombre un peu sophistiquée en bas d’un cadre) j’ai beaucoup appris, ce qui pour moi l’essentiel, surtout à mon âge!
La remarque de Cyrillus est bien entendu capitale: quand on ne trouve pas de solution, il faut changer d’approche, et ça c’est une règle fondamentale de nos professions, mais comprendre le pourquoi du comment c’est également très important pour progresser.
Ça suffit, Papy! Tu radotes !!
A partir d’un petit problème marginal (une ombre un peu sophistiquée en bas d’un cadre) j’ai beaucoup appris, ce qui pour moi l’essentiel, surtout à mon âge!
La remarque de Cyrillus est bien entendu capitale: quand on ne trouve pas de solution, il faut changer d’approche, et ça c’est une règle fondamentale de nos professions, mais comprendre le pourquoi du comment c’est également très important pour progresser.
Ça suffit, Papy! Tu radotes !!
La solution que j'ai adoptée.
L'ombre est celle du code de Cyrillus.
Modifié par PapyJP (11 Jun 2018 - 11:41)
L'ombre est celle du code de Cyrillus.
.box {
position:relative;
max-width:20em;
padding:2em;
color:#474747;
text-shadow:0.05em 0.05em 0 #fffaf4;
background-color:#e7e7e7;
border-radius:0.5em;
margin:2em auto;
}
.box::after {
content: '';
position:absolute;
top:100%;
left:0;
width:100%;
height:1.25em;
background:radial-gradient(ellipse at top, rgba(0,0,0,0.2) 30%, transparent 70%);
}
.box h2 {
position: relative;
padding-bottom: 1.5rem;
font-weight: 500;
text-align: center;
border-bottom: .1rem solid #777;
}
.box h2::before,
.box h2::after {
content: '';
display: block;
position: absolute;
top: 100%;
width: 100%;
height: 0.1em;
}
.box h2::before {
background-image: linear-gradient(to top, #fffaf4 50%,#474747 50%);
}
.box h2::after {
background-image: linear-gradient(to left, #e7e7e7 0%, transparent 40%, transparent 60%, #e7e7e7 100%);
}
.box: p {
line-height: 1.5;
margin:1.5em 0;
}
Modifié par PapyJP (11 Jun 2018 - 11:41)
Yordi a écrit :
Si l'article possède un z-index, il serait rendu pour ensuite créer son propre contexte et ensuite afficher les before/after avec une z-index: -1 dans une pile vide...
@Yordi : Merci pour l'interprétation de la doc et pour m'avoir donné la clef de l’énigme. En effet j'avais bien lu la doc et croyais avoir compris ce point... mais apparemment il n'en était rien.
Bien à vous tous.
Modifié par Olivier C (11 Jun 2018 - 18:37)