Friday, October 25, 2013

Input box glowing border effect with CSS

Hi friends,
So many web sites you are browsing can see new glowing border effect on where you entering text input boxes on forms such as login form, contact form or subscription form etc.  You can see this effect real time at twitter home page  https://twitter.com/

CSS glow effects with box shadow


stackMyCode will gives you CSS code for CSS glow effect in green color.

.shadowglow {
    outline:none;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    border-radius:8px;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border:1px solid rgba(0,0,0, 0.2);
}

.shadowglow:focus {
    box-shadow: 0 0 5px rgba(0, 255, 0, 1);

    -webkit-box-shadow: 0 0 5px rgba(0, 255, 0, 1); 

    -moz-box-shadow: 0 0 5px rgba(0, 255, 0, 1);

    border:1px solid rgba(0,255,0, 0.8); 

}

Your input boxes class must use as shadowglow Example input box code is here :

<input class="shadowglow" id="textinput" name="textinput" type="text" />

0 comments:

Post a Comment