I have this html code
and now I want to put this html inside "SHOULD COME HERE" below
<div class="box-text">
<h3>Effect 2</h3>
</div>
with this CSS:
.box-text {
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.2), inset 0 0 50px rgba(0,0,0,0.1);
-moz-box-shadow: 0 0 4px rgba(0,0,0,0.2), inset 0 0 50px rgba(0,0,0,0.1);
background-color: #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.2), inset 0 0 50px rgba(0,0,0,0.1);
margin: 0 auto;
padding: 50px;
position: absolute;
width: 500px;
}
/*==================================================
* Effect 2
* ===============================================*/
.box-text:before, .box-text:after {
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
-moz-transform: skew(-5deg) rotate(-5deg);
-ms-transform: skew(-5deg) rotate(-5deg);
-o-transform: skew(-5deg) rotate(-5deg);
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-5deg) rotate(-5deg);
background: transparent;
bottom: 12px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
content: ' ';
height: 10px;
left: 12px;
position: absolute;
transform: skew(-5deg) rotate(-5deg);
width: 40%;
z-index: -1;
}
.box-text:after {
-moz-transform: skew(5deg) rotate(5deg);
-ms-transform: skew(5deg) rotate(5deg);
-o-transform: skew(5deg) rotate(5deg);
-webkit-transform: skew(5deg) rotate(5deg);
left: auto;
right: 12px;
transform: skew(5deg) rotate(5deg);
}
And if I want to do this, the shadow of the 1st code set disappears. I am new to html/css and it somehow doesn't make sense to me why the shadow would disappear and I would be happy for any tips. If not it's ok as well :) here is the code I want to put it inside:
body {background:#ccc}
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.box-text {
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.2), inset 0 0 50px rgba(0,0,0,0.1);
-moz-box-shadow: 0 0 4px rgba(0,0,0,0.2), inset 0 0 50px rgba(0,0,0,0.1);
background-color: #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.2), inset 0 0 50px rgba(0,0,0,0.1);
margin: 0 auto;
padding: 50px;
position: absolute;
width: 500px;
}
/*==================================================
* Effect 2
* ===============================================*/
.box-text:before, .box-text:after {
-moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
-moz-transform: skew(-5deg) rotate(-5deg);
-ms-transform: skew(-5deg) rotate(-5deg);
-o-transform: skew(-5deg) rotate(-5deg);
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-5deg) rotate(-5deg);
background: transparent;
bottom: 12px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
content: ' ';
height: 10px;
left: 12px;
position: absolute;
transform: skew(-5deg) rotate(-5deg);
width: 40%;
z-index: -1;
}
.box-text:after {
-moz-transform: skew(5deg) rotate(5deg);
-ms-transform: skew(5deg) rotate(5deg);
-o-transform: skew(5deg) rotate(5deg);
-webkit-transform: skew(5deg) rotate(5deg);
left: auto;
right: 12px;
transform: skew(5deg) rotate(5deg);
}<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
<!-- SHOULD COME HERE -->
<div class="box-text">
<h3>Effect 2</h3>
</div>
</div>
</div>