Beautiful CSS3 Search Form

An article by qeqnes    4 Comments

You can create a round circle by specifying a very large value with the border-radius property. The following example uses 100px border-radius to make a round circle.

.circle {
	width: 100px;
	height: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
}

Inner Shadow Effect

Specifying inset values with the box-shadow property to create a inner shadow effect. As of now, this feature is only supported by Chrome 4+ and Firefox 3.5+.

.inset {
   -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
   -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
   box-shadow: inset 0 3px 8px rgba(0,0,0,.24);
}

Search Form Example

The following search form demo is created with CSS gradient, border-radius, and box-shadow with inset values (view the demo with Chrome 4+ or Firefox 3.5+). It degrades nicely in non-CSS3 browsers. View source code to learn the CSS code. If you are not familiar with CSS3, read my previous article The Basics of CSS3.