CSS Glow Effects With Box-Shadow

If you’ve visited Twitter’s login screen lately in Safari, you might have noticed that the inputs have this subtle glow when they’re in focus:

I love the way it looks and I think it’s a really nice touch to add to a form, or any other elements you might want to highlight. And it’s easy, too. Here’s how you do it:

input {
    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;
}
 
What I’m doing here is using outline:none; to get rid of the default highlight that Safari shows when an input is in focus, and then I’m setting the transition property to tell the input to animate any change to its properties. Read the CSS Transitions draft to know more about the options you can use. Here, I set it to animate for 0.25 seconds, easing in & out of the animation. I’m also setting the same property with vendor prefixes for WebKit & Mozilla.

input:focus {
    box-shadow: 0 0 5px rgba(0, 0, 255, 1);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1); 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1); 
}
 
Now, when the user focuses on the input, I’m telling it to display a 5-pixels-wide box shadow with no offsets. Since the “shadow” is actually bright blue, it ends up looking like a glow. I’m also using RGBA so I can play with the opacity and make it more subtle if I want to. And again, I’m setting the same property with vendor prefixes so it’ll work with WebKit & Firefox. Since I set the transition property earlier, when the user focuses on the input, the box shadow won’t appear at once, and instead will be nicely animated. (Of course, if you want to apply this effect to other elements, you should target other pseudo-classes, like :hover.)
To make it look a bit nicer, I’m going to give it some rounded corners and a thinner border that will be highlighted when the input has focus:

input {
    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:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border:1px solid rgba(0,0,0, 0.2);
}
input:focus {
    box-shadow: 0 0 5px rgba(0, 0, 255, 1);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1); 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
    border:1px solid rgba(0,0,255, 0.8); 
}
 
ok thanks. see you.. :)
source: tumblr.gesteves.com

Baca Juga Artikel Dibawah Ini!



4 komentar:

  1. Thanks for all of your work on this web page. I am looking forward to reading more of your posts in the future.

    BalasHapus
  2. @Anonymous well, thank you for your comment. Happy to help.

    BalasHapus
  3. Thank you for the blog post. Jones and I have been saving for a new e-book on this issue and your blog post has made all of us to save money. Your thoughts really answered all our issues. In fact, more than what we had thought of prior to when we came across your great blog. I no longer have doubts including a troubled mind because you have really attended to our own needs in this post. Thanks
    HTTP://www.CoolMobilePhone.net

    BalasHapus

Silahkan Berkomentar. Dilarang Live Link. Tidak Memakai Verifikasi Kata. Berkomentarlah Dengan Sopan!.

Entri Populer

 
Copyright © 2012 - 2013 Putupunyablog | Powered by Blogger