I have beat my head on this for over an hour and I need your help, I am creating a web form and I am having the most difficult time getting these shadow elements pushed behind the form and not the container. I have tried giving the .form class div a z-index property with no success. It just keeps it in front of the form. Without a z-index propery being established it goes all the way back to the container .mainContent div. Please help! I have added it to codepen for everyones added convenience. Thanks in advance for any and all input.
HTML AND CSS BELOW:
<div class="mainContent">
<div class="form">
<form action="" method="post">
<fieldset class="fieldset">
<p>
<label id="yname">Your Name:</label>
<br>
<input id="yname" type="text" name="yourname" />
</p>
<p>
<label id="subject">Subject:</label>
<br>
<input id="subject" type="text" name="subject" />
</p>
<p>
<label id="email">E-mail:</label>
<br>
<input id="email" type="text" name="email" />
</p>
<p>
<label id="comments">Your comments:</label>
<br>
<textarea id="comments" name="comments" maxlength="150" rows="10" cols="40">
</textarea>
</p>
<p id="buttons">
<input id="button" type="submit" value="Send it!">
<input id="button" type="reset" value="Reset">
</p>
</fieldset>
</form>
</div>
</div>
.mainContent{
position:relative;
background-color:#FFF;
margin-bottom:45px;
border-radius: 3px;
padding-bottom:25px;
padding-top:25px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.mainContent:before, .mainContent:after
{
content:"";
position:absolute;
z-index:-100;
-webkit-box-shadow:0 0px 10px rgba(0,0,0,0.8);
-moz-box-shadow:0 0px 10px rgba(0,0,0,0.8);
box-shadow:0 0px 10px rgba(0,0,0,0.8);
top:0;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.mainContent:after
{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
.form{
background-color:grey;
width:50%;
margin:0 auto;
border-radius:2px;
position: relative;
z-index:1;
}
.fieldset{
border:none;
}
fieldset p{
margin:0 auto;
width:50%;
max-width:300px;
padding:15px;
}
label#yname, label#subject, label#email{
display:block;
text-align:left;
float:left;
font-family:"Times New Roman", Times, serif;
font-size:1.0em;
color:black;
width:300px;
height:25px;
font-weight:bold;
}
input#yname, input#subject, input#email{
display:block;
width:50%;
min-width:300px;
max-width:350px;
height:30px;
border-radius:3px;
}
label#comments{
display:block;
text-align:left;
font-weight:bold;
width:300px;
height:25px;
color:#000;
float:left;
font-family:"Times New Roman", Times, serif;
font-size:1.0em;
}
textarea#comments{
display:block;
width:50%;
min-width:300px;
max-width:350px;
overflow:scroll;
border-radius:3px;
}
p#buttons{
margin:0 auto;
text-align:center;
width:50%;
display:block;
}
#button{
width:100px;
background-color:#FFF;
font-family: 'hotpapis';
font-size:1.25em;
margin:10px;
border-radius:3px;
height:50px;
}
/* ============================
==== Form Shadow Effect ====
============================ */
.form:before, .form:after{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 45%;
height:25px;
max-width:600px;
background: rgba(0, 0, 0, 0.7);
box-shadow: 0 20px 15px rgba(0, 0, 0, 0.7);
transform: rotate(-3deg);
}
.form:after{
transform: rotate(3deg);
right: 10px;
left: auto;
}
simplest solution:
form {
background: none repeat scroll 0 0 grey;
}
make the form grey not the .form