Friday 4 April 2014

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%);
}



2 comments:


  1. شركة مكافحة الفئران بالمدينة المنورة شركة مكافحة الفئران بالمدينة المنورة
    شركة تنظيف كنب بالمدينة المنورة شركة تنظيف كنب بالمدينة المنورة
    شركة مكافحة الصراصير بالاحساء شركة مكافحة الصراصير بالاحساء
    شركة مكافحة الصراصير بالمدينة المنورة شركة مكافحة الصراصير بالمدينة المنورة

    _____

    شركة تنظيف شقق بالمدينة المنورة شركة تنظيف شقق بالمدينة المنورة
    شركة تنظيف منازل بالمدينة المنورة شركة تنظيف منازل بالمدينة المنورة
    شركة مكافحة النمل الابيض بالدمام شركة مكافحة النمل الابيض بالدمام

    ReplyDelete