1 pièce(s) jointe(s)
Background masquant les shadow
Bonjour,
J'ai un problème de background qui me masque mes shadow.
Pour comprendre ce qu'il se passe : Enlever le background dans article et là, les shadows apparaissent
Comment puis je faire pour garder mes background tout en ayant les shadows ?
Merci d'avance à ceux qui prendront du temps pour m'aider.....
PS : je mets le code source (et je joins le fichier) :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>sans titre</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style>
body {
padding:0;
margin:0;
background:#ccc;
}
article {
width:825px;
margin:auto;
background:#fff;
padding:4rem;
}
header, footer {
height:200px;
}
header {
background:#fff;
margin-bottom:2rem;
}
footer {
background:#000;
margin-top:2rem;
}
.clearfix::after,
.u-clearfix::after {
content: "";
display: table;
clear: both;
border-collapse: collapse;
}
</style>
<style>
.box_shadow_container {
position:relative;
}
.box_shadow {
float:left;
margin-right:15px;
position: relative;
width: 310px;
background: #ddd;
border-radius: 4px;
padding: 1.8em;
text-shadow: 0 1px 0 #fff;
margin-bottom:20px;
}
.box_shadow:last-child {
margin-right:0;
}
.box_shadow .titre {
font-weight: 400;
font-size: 16px;
text-transform: uppercase;
color: #3b81be;
text-shadow: 0 1px 0 #ccc;
margin-top: 15px;
text-align:center;
}
.box_shadow:before, .box_shadow:after {
z-index: -2;
position: absolute;
content: '';
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
transform: rotate(-3deg);
}
.box_shadow:after {
transform: rotate(3deg);
right: 10px;
left: auto;
}
</style>
</head>
<body>
<header>
</header>
<article>
<div class="box_shadow_container clearfix">
<div class="box_shadow"><a href="anasazi.php"><img src="https://picsum.photos/310/174" alt="Anasazis" width="310" height="174" /><div class="titre">Titre</div></a></div>
<div class="box_shadow"><a href="anasazi.php"><img src="https://picsum.photos/310/174" alt="Anasazis" width="310" height="174" /><div class="titre">Titre</div></a></div>
</div>
</article>
<footer>
</footer>
</body>
</html> |
Pièce jointe 578015