CSS3 Glow for inputs (like on twitter)

Hey all,

Add a glow to your web design

Lot’s of you may have seen on twitter the new “glow effect” they have added recently. It adds a very nice touch and looks really cool on their website I think. It also adds an extra level of user accessibility as you know when you have selected much quicker.This tutorial is very easy to implement and can look great on your website. It can also be easily added to your current website design.

Right lets get to it… So what do we need? Well first of all all you need to do is have your textarea’s set up in your html… like so:

<textarea name="text" id="">Your pre-filled content.....</textarea>

Easy… Let’s assume you know how to attach you’re css file in your html head. And now we need to use standard css2 methods to stylize the textarea. This is all personal preference but I am going to use one I think looks quite cool! Here is my css I am going to use…

textarea#styleid{
color:#666;
font-size:14px;
-moz-border-radius: 8px; -webkit-border-radius: 8px;
margin:5px 0px 10px 0px;
padding:10px;
height:75px;
width:350px;
border:#999 1px solid;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

textarea#styleid:focus{
color:#000;
outline:none;
border:#35a5e5 1px solid;
}

So now we have something that will look pretty good…

Pre-filled content

it’s all down to personal preference though…. Our next step is to Add the glow

To add the glow we need to implement the new CSS3 lines which utilizes the moz-webkit webkit and safari’s webkit. This is the cool bit. Now bare in mind we are using RGBA (A stands for alpha i.e. transparency) This is so we can control the opacity on states which we need to overcome an animation issue.

box-shadow: 0 0 5px rgba(81, 203, 238, 0);
-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 0);
-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 0);

We also need to disable the nasty auto outlining of the textarea that the browser does by default.

Add this into the css: outline:none;

Now we get…..

Try clicking me… see no nasty outline.. (unless your on ie maybe..)

Hokay!… Now let’s add the animation using CSS3′s new animation/transition – which might I add is VERRYY cool. We need to add the transition code to the main styling level of the style id (in other words don’t put it on the focus state like #divid:focus only on the main one #divid…okay?)

transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;


As you can see it’s easy to understand and change… so for example 0.25s can be changed to 0.5s to slow it down and there is various other methods of transitions – to come in later post?
Right ok so now we have our glow css in-place the on-focus and off-focus using transparency (RGBA) and now we’ve added our transition code…

So the full thing is now like this in the css:


textarea#styleid{
color:#666;
font-size:14px;
-moz-border-radius: 8px; -webkit-border-radius: 8px;
margin:5px 0px 10px 0px;
padding:10px;
height:75px;
width:350px;
border:#999 1px solid;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
box-shadow: 0 0 5px rgba(81, 203, 238, 0);
-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 0);
-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 0);
}


textarea#styleid:focus{
color:#000;
outline:none;
border:#35a5e5 1px solid;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}


And finally we have this effect:

As can be found around the web on bigger sites like yebutno.com

Working example:

Click me to test my glowing awesomeness!!