We can style a lot with CSS, but the main thing is the imagination, the more you can imagine the more uniquely you can represent things. Web designing is becoming a trend nowadays and one of the most competitive field as well. Keeping this in mind I am going to discuss how we can use the box-shadow effect to make a beautiful page up effect and hence contributing a bit to your competition.
The following HTML code is used to show the above page up effect.
<body>
<div id="box">
CSS Box shadow
</div>
</body>
The necessary CSS
Following is the CSS code required to apply the page up effect to an HTML element, in this tutorial we are applying the page up box-shadow effect to the HTML div element with ID #box.#box {
width: 600px;
height: 250px;
background-color: #F5DA81;
position: relative;
left: 400px;
top: 50px;
text-align: center;
line-height: 250px;
font-size: 35px;
border: 1px solid #EECF67;
color: #222222;
font-family: Segoe UI;
}
/*********THE SHADOW ON THE LEFT*********/
#box:before {
content: "";
width: 200px;
height: 50px;
position: absolute;
top: 186px;
left:30px;
-moz-box-shadow: 0px 0px 20px 20px #BDBDBD;
-webkit-box-shadow: 0px 0px 20px 20px #BDBDBD;
box-shadow: 0px 0px 20px 20px #BDBDBD;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
z-index: -1;
}
/*********THE SHADOW ON THE RIGHT*********/
#box:after {
content: "";
width: 200px;
height: 50px;
position: absolute;
top: 186px;
right:30px;
-moz-box-shadow: 0px 0px 20px 20px #BDBDBD;
-webkit-box-shadow: 0px 0px 20px 20px #BDBDBD;
box-shadow: 0px 0px 20px 20px #BDBDBD;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
z-index: -1;
}