Rounded shadows with CSS3 and no images
Example 1. Simple rounded drop shadow with box-shadow property.
First create the HTML element which will cast the shadow.
<div class="box css3-shadow">
<h4>Example 1</h4>
Box-shadow css property is used to create the rounded drop shadow effect. Credit goes to <a href="http://www.paulund.co.uk/creating-different-css3-box-shadows-effects" target="_blank">Paulund.co.uk</a> for inspiration.</div>
As you see, the div has 2 classes: box and css3-shadow. Box class will be generic class for all the shadow-casting containers in our case, and the second class will have the :after element which’ll create the actual shadow.
CSS for the box class:
.box {
width:70%;
padding:20px;
background:#fff;
margin:20px auto 60px;
border-radius:2px;
}
.box h4{
background:#eee;
margin:0;
padding:60px 20px;
text-align:center;
-webkit-box-shadow:0 0px 4px rgba(0, 0, 0, 0.2);
box-shadow:0 0px 4px rgba(0, 0, 0, 0.2);
}
CSS for the .css3-shadow class:
.css3-shadow{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
}
/*==================================================
* Drop shadow effect with box-shadow
* ===============================================*/
.css3-shadow:after{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 40px rgba(0,0,0,0.8);
box-shadow:0 0 40px rgba(0,0,0,0.8);
bottom:0px;
left:10%;
right:10%;
width:80%;
height:50%;
-moz-border-radius:100%;
border-radius:100%;
}
Example 2. Simple rounded drop shadow with radial gradients.
Create the HTML element which will cast the shadow.
<div class="box css3-gradient1">
<h4>Example 2</h4>
Radial gradient feature is used to create the rounded drop shadow effect.</div>
CSS for the .css3-gradient1 class:
.css3-gradient1{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
}
/*==================================================
* Drop shadow effect with radial gradient
* ===============================================*/
.css3-gradient1:after{
content:"";
position:absolute;
z-index:-1;
top:100%;
bottom:0;
width:120%;
height:50px;
left:-10%;
right:-10%;
background:-webkit-radial-gradient(50% -3%, ellipse cover, rgba(00, 00, 00, 0.5), rgba(97, 97, 97, 0.0) 40%);
background:radial-gradient(ellipse at 50% -3%, rgba(00, 00, 00, 0.5), rgba(97, 97, 97, 0.0) 40%);
}
Example 3. Complex glows with radial gradients.
Create the HTML element which will cast the shadow.
<div class="box css3-gradient2">
<h4>Example 3</h4>
<p>Radial gradient feature is used to create the glow effect. Weird stuff.</p>
</div>
CSS for the .css3-gradient2 class:
.css3-gradient2{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
}
/*==================================================
* Glow effect with box-shadow
* ===============================================*/
.css3-gradient2:after{
content:"";
position:absolute;
z-index:-1;
top:100%;
bottom:0;
width:120%;
height:90px;
left:-10%;
right:-10%;
background: -webkit-radial-gradient(50% -3%, ellipse cover, rgba(96, 251, 202, 0.8), rgba(112, 220, 255, 0.5), rgba(255, 116, 225, 0.0) 50%), -webkit-radial-gradient(80% 10%, circle contain, rgba(96, 251, 202, 0.8), rgba(255, 255, 255, 0.0) 180%), -webkit-radial-gradient(90% 20%, circle contain, rgba(255, 255, 202, 0.8), rgba(255, 255, 255, 0.0) 60%);
background:radial-gradient(ellipse at 50% -3%, rgba(96, 251, 202, 0.8), rgba(112, 220, 255, 0.5), rgba(255, 116, 225, 0.0) 50%), radial-gradient(circle at 80% 10%, rgba(96, 251, 202, 0.8), rgba(255, 255, 255, 0.0) 2%), radial-gradient(circle at 90% 20%, rgba(255, 251, 202, 0.8), rgba(255, 255, 255, 0.0) 1%);
}
More about...CSS Shadow
ReplyDeleteLing
ReplyDeleteشركة مكافحة الفئران بالمدينة المنورة شركة مكافحة الفئران بالمدينة المنورة
شركة تنظيف كنب بالمدينة المنورة شركة تنظيف كنب بالمدينة المنورة
شركة مكافحة الصراصير بالاحساء شركة مكافحة الصراصير بالاحساء
شركة مكافحة الصراصير بالمدينة المنورة شركة مكافحة الصراصير بالمدينة المنورة
_____
شركة تنظيف شقق بالمدينة المنورة شركة تنظيف شقق بالمدينة المنورة
شركة تنظيف منازل بالمدينة المنورة شركة تنظيف منازل بالمدينة المنورة
شركة مكافحة النمل الابيض بالدمام شركة مكافحة النمل الابيض بالدمام