[CodeSnippet] Twitter-like Input Using CSS3

Twitter has a nice effect in presenting their tweet box by adding outer glow effect on it while the tweeps are tweeting. If you’re webkit-based browser user you must’ve notice that glowing effect works with the animation. We’ve discussed that technique on previous post (Stylize Input Element Using CSS3), the thing we’ve not yet do is adding the animation on it.

Just like the previous post, for creating glowing effect we can use box shadow property on the input and for adding the animation on it we can add css animation property (transition) on the input (in this case textare) element, set the duration property into 0.3 seconds and timing function property into ease-in-out. Take a look at following script :

textarea {
	padding: 5px;
	font-size: 15px;
	text-shadow: 0px 1px 0px #fff;
	outline: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border: 1px solid #ccc;
	-webkit-transition: .3s ease-in-out;
  	-moz-transition: .3s ease-in-out;
}

	textarea:focus {
		border: 1px solid #fafafa;
		-webkit-box-shadow: 0px 0px 6px #007eff;
		-moz-box-shadow: 0px 0px 5px #007eff;
		box-shadow: 0px 0px 5px #007eff;
	}

Since the textarea element has css transition on it, it will have glowing effect with animation when the textarea has a focus state. The animation works beautifully on Safari 4.0.5 and Chrome 5.0.375.38, the demo won’t work on current Firefox version since Firefox will support css transition on version 3.7.