Disons que j'ai un simple div avec des paragraphes à l'intérieur.
Je veux atteindre un effet de décomposition sur le bas de la div.
J'ai essayé de mettre en place une ombre blanche mais évidemment cela n'a pas fonctionné, car la Comment puis-je accomplir cela dans Pure CSS? Merci. Box-Shadow apparaît toujours sous le texte.
4 Réponses :
Créez un DIV en dessous de toutes vos autres divs et définissez une marge inférieure négative sur cette DIV et une ombre de goutte supérieure. Vous pouvez faire cela ou vous pouvez faire ce que j'ai fait. Enregistrez une image PNG avec ce fondu et définissez-la sur une DIV absolument positionnée qui repose au bas de votre divison relativement positionnée qui contient le texte.
Me rappelle qu'une règle de premier plan-image CSS serait utile.
J'ai pu reproduire l'effet avec CSS uniquement, mais c'est un peu pirakish:
http: / /jsfiddle.net/airextb/1/ p>
i Mettez deux divs en tant que frères et sœurs: p> et les positionnés absolument: P > .shadow {
background: url(overlay.png) repeat-x bottom;
}
DO TOP: 0; droite: 0; bas: 0; gauche: 0; sur la classe .shadow au lieu de régler la hauteur et la largeur. Pas besoin d'index z non plus.
C'est une mauvaise approche. Il bloque le texte, de sorte que vous ne pouvez pas le sélectionner.
Qu'en est-il d'utiliser le sélecteur "après" CSS? Il fonctionne même avec IE8: http://caniuse.com/#search=after J'utilise négatif gauche et à droite pour mettre la boîte intérieure à l'extérieur de la boîte principale pour éviter l'ombre sur les côtés.
C'est une version beaucoup plus propre que j'utilise aussi.
"Cela fonctionne même avec IE8" mais la boîte-ombre n'est pas, alors qui se soucie IE8 ?! :RÉ
C'est vrai, alors je suppose que vous pouvez simplement utiliser l'astuce et utiliser une image d'arrière-plan positionnée au bas du bloc "après" au lieu de "Box-Shadow".
div {
height:300px;
color:red;
overflow-y: scroll;
}
div:after {
content: "";
box-shadow: 0px -50px 50px -50px #000 inset;
position:fixed;
top: 250px;
left:0;
width:100%;
height:50px;
overflow: hidden;
}