Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Shadow with Glow Transition

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 975
    Comment on it

    Hello Readers

    Box-shadow is a very interesting property of CSS3. It gives a glowing and blurring effect to the HTML elements. Box-shadow when used differently gives different visually appealing results. Some of them have been shown here. I have given the demo for default shadow, grow shadow, float shadow, glow shadow, radial shadow, outset shadow and inset shadow. A sample code snippet has been given for all. Transition and Transform property perform the main task here. A time duration for which the shadow would be effective is mentioned. The shadows would be seen on hover.

    HTML:

    <div>
    	<h3>Shadow with Glow Transitions</h3>
    	<a class="btn btn-hvr hvr-shadow" href="#">Shadow</a>
    	<a class="btn btn-hvr hvr-grow-shadow" href="#">Grow Shadow</a>
    	<a class="btn btn-hvr hvr-float-shadow" href="#">Float Shadow</a>
    	<a class="btn btn-hvr hvr-glow" href="#">Glow</a>
    	<a class="btn btn-hvr hvr-shadow-radial" href="#">Shadow Radial</a>
    	<a class="btn btn-hvr hvr-box-shadow-outset" href="#">Box Shadow Outset</a>
    	<a class="btn btn-hvr hvr-box-shadow-inset" href="#">Box Shadow Inset</a>
    </div>
    

    CSS:

    .btn-hvr {
        background: #FFEC33;
        border: 0 none;
        color: #666;
        cursor: pointer;
        display: inline-block;
        line-height: 1 !important;
        margin-top: 6px;
        padding: 14px;
        text-decoration: none;
    }
    /*=== SHADOW ====*/
    .hvr-shadow {
        backface-visibility: hidden;
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        display: inline-block;
        transform: translateZ(0px);
        transition-duration: 0.3s;
        transition-property: box-shadow;
        vertical-align: middle;
    }
    .hvr-shadow:hover, .hvr-shadow:focus, .hvr-shadow:active {
        box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
    }
    /* ==== grow shadow ====*/
    .hvr-grow-shadow {
        backface-visibility: hidden;
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        display: inline-block;
        transform: translateZ(0px);
        transition-duration: 0.3s;
        transition-property: box-shadow, transform;
        vertical-align: middle;
    }
    .hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
        box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
        transform: scale(1.1);
    }
    /* float shadow ==== */
    .hvr-float-shadow {
        backface-visibility: hidden;
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        display: inline-block;
        position: relative;
        transform: translateZ(0px);
        transition-duration: 0.3s;
        transition-property: transform;
        vertical-align: middle;
    }
    .hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
        transform: translateY(-5px);
    }
    .hvr-float-shadow::before {
        background: rgba(0, 0, 0, 0) radial-gradient(ellipse at center center , rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%) repeat scroll 0 0;
        content: "";
        height: 10px;
        left: 5%;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        top: 100%;
        transition-duration: 0.3s;
        transition-property: transform, opacity;
        width: 90%;
        z-index: -1;
    }
    .hvr-float-shadow:hover::before, .hvr-float-shadow:focus::before, .hvr-float-shadow:active::before {
        opacity: 1;
        transform: translateY(5px);
    }
    /* ==== glow ====*/
    .hvr-glow {
        backface-visibility: hidden;
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        display: inline-block;
        transform: translateZ(0px);
        transition-duration: 0.3s;
        transition-property: box-shadow;
        vertical-align: middle;
    }
    .hvr-glow:hover, .hvr-glow:focus, .hvr-glow:active {
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    }
    /* ==== shadow radial ==== */
    .hvr-shadow-radial {
        backface-visibility: hidden;
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        display: inline-block;
        position: relative;
        transform: translateZ(0px);
        vertical-align: middle;
    }
    .hvr-shadow-radial::before, .hvr-shadow-radial::after {
        background-repeat: no-repeat;
        box-sizing: border-box;
        content: "";
        height: 5px;
        left: 0;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        transition-duration: 0.3s;
        transition-property: opacity;
        width: 100%;
    }
    .hvr-shadow-radial::after {
        background: rgba(0, 0, 0, 0) radial-gradient(ellipse at 50% -50% , rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%) repeat scroll 0 0;
        top: 100%;
    }
    .hvr-shadow-radial::before, .hvr-shadow-radial::after {
        background-repeat: no-repeat;
        box-sizing: border-box;
        content: "";
        height: 5px;
        left: 0;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        transition-duration: 0.3s;
        transition-property: opacity;
        width: 100%;
    }
    .hvr-shadow-radial::before {
        background: rgba(0, 0, 0, 0) radial-gradient(ellipse at 50% 150% , rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%) repeat scroll 0 0;
        bottom: 100%;
    }
    hvr-shadow-radial:hover::before, .hvr-shadow-radial:focus::before, .hvr-shadow-radial:active::before, .hvr-shadow-radial:hover::after, .hvr-shadow-radial:focus::after, .hvr-shadow-radial:active::after {
        opacity: 1;
    }
    /* ==== box shadow outset ====*/
    .hvr-box-shadow-outset {
        backface-visibility: hidden;
        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        display: inline-block;
        transform: translateZ(0px);
        transition-duration: 0.3s;
        transition-property: box-shadow;
        vertical-align: middle;
    }
    .hvr-box-shadow-outset:hover, .hvr-box-shadow-outset:focus, .hvr-box-shadow-outset:active {
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
    }
    /* ==== box shadow inset ====*/
    .hvr-box-shadow-inset {
        backface-visibility: hidden;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0.6) inset, 0 0 1px rgba(0, 0, 0, 0);
        display: inline-block;
        transform: translateZ(0px);
        transition-duration: 0.3s;
        transition-property: box-shadow;
        vertical-align: middle;
    }
    .hvr-box-shadow-inset:hover, .hvr-box-shadow-inset:focus, .hvr-box-shadow-inset:active {
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6) inset, 0 0 1px rgba(0, 0, 0, 0);
    }
    

    see the live demo at https://jsfiddle.net/mani_123/ky5yckx6/show/

    I have attached the full code packet at the bottom

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: