Download SourceDemo

The Markup

The markup is simple. All that is needed is a form, a text box and a submit button.

CSS3 Magic

The rest is done with CSS. This includes everything from gradients to rounded corners. CSS3 takes out a lot of the need for images, allowing elements to be more scalable as well as being easier to create. There are regular background colors included in the CSS for browsers that don’t support CSS3. They may not look as spiffy as the CSS3 version, but it will appear somewhat close.

#search-form {
	background: #e1e1e1; /* Fallback color for non-css3 browsers */
	width: 365px;

	/* Gradients */
	background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225)));
	background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%);

	/* Rounded Corners */
	border-radius: 17px;
	-webkit-border-radius: 17px;
	-moz-border-radius: 17px;

	/* Shadows */
	box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
}

/*** TEXT BOX ***/
input[type="text"]{
	background: #fafafa; /* Fallback color for non-css3 browsers */

	/* Gradients */
	background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));
	background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);

	border: 0;
	border-bottom: 1px solid #fff;
	border-right: 1px solid rgba(255,255,255,.8);
	font-size: 16px;
	margin: 4px;
	padding: 5px;
	width: 250px;

	/* Rounded Corners */
	border-radius: 17px;
	-webkit-border-radius: 17px;
	-moz-border-radius: 17px;

	/* Shadows */
	box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
	-webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
	-moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
}

/*** USER IS FOCUSED ON TEXT BOX ***/
input[type="text"]:focus{
	outline: none;
	background: #fff; /* Fallback color for non-css3 browsers */

	/* Gradients */
	background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235)));
	background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%);
}

/*** SEARCH BUTTON ***/
input[type="submit"]{
	background: #44921f;/* Fallback color for non-css3 browsers */

	/* Gradients */
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21)));
	background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%);

	border: 0;
	color: #eee;
	cursor: pointer;
	float: right;
	font: 16px Arial, Helvetica, sans-serif;
	font-weight: bold;
	height: 30px;
	margin: 4px 4px 0;
	text-shadow: 0 -1px 0 rgba(0,0,0,.3);
	width: 84px;
	outline: none;

	/* Rounded Corners */
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;

	/* Shadows */
	box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
	-moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);
	-webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
}
/*** SEARCH BUTTON HOVER ***/
input[type="submit"]:hover {
	background: #4ea923; /* Fallback color for non-css3 browsers */

	/* Gradients */
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
	background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}
input[type="submit"]:active {
	background: #4ea923; /* Fallback color for non-css3 browsers */

	/* Gradients */
	background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
	background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}

Compatibility

CSS3 works in most new browsers, with the exception of Internet Explorer (any version). This has been tested cross-browser and cross-platform. If you have any issues, please comment below and I will try to patch them.

In addition, this tutorial is just to style the search form. You can slap these styles on a search form such as the WordPress search form for functionality.

Download SourceDemo

Supported CSS

There may be some things that you don’t have to change for your mobile site’s CSS. Opera supports all of the advanced CSS selectors and pseudo classes that you have grown to love. Opera also supports the following CSS3 that you may have already been using:

• text-shadow
• RGBA
• outline

Assuming you have been using -webkit specific CSS code, you may need to add some more CSS to get it to look right in Opera. Opera uses a mix of the generic properties, as well as specific Opera properties which has the “-o-” in front of the normal property such as “-o-box-sizing”.

Box Shadows

box-shadow: 1px 1px 2px rgba(0,0,0,.4);

Rounded Corners

border-radius: 5px;

Box Sizing

-o-box-sizing: border-box;

Transforms

Transforms can be done by using the special “-o-” property. In this example I am going to be rotating my element.

-o-transform: rotate(7.5deg);

Gradients

This was one of my favorite CSS3 properties. Unfortunately, this is one of the properties that Opera doesn’t support yet. Since Opera Mini is a regular iPhone app, they can put out regular updates. If they do support CSS gradients eventually, the update will be made available to all users.

More resources

CSS3 Please – A quick guide that lets you see how to create different effects right on the site. The CSS on the site is editable, and all the changes are reflected live on the site.

CSS3 Generator – A very quick tool that lets you select what you want to do, and gives you all CSS code for each browser (if available) to achieve it

Download SourceDemo

Writing the Markup

Create an unordered list with some links in it

Link
Big Link
Bigger Link
Biggest link of them all
Link

Add classes to the elements. In this case, we are going to add the “cbdb-menu” to the unordered list, and colors to the list items.

Link
Big Link
Bigger Link
Biggest link of them all
Link

Styling the buttons with CSS3

That’s all the markup you need. Right now your list looks plain, but CSS will make it look sharp. Let’s start by adding the style for the menu.

.cbdb-menu li {
	display: block;
	float: left;
	line-height: 35px;
	list-style:none;
	margin: 0 5px;
	padding: 0 15px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

This applies these styles to the list items of the unordered list with the “cbdb-menu” class. Notice we are using browser specific tags. Those are the special CSS tags that allow us to achieve the effects we could only get by using images before. The border-radius tag gives the buttons rounded corners, while the box-shadow tag gives them a drop shadow.

With the buttons stylized, the next step is to style the button’s text. Add the following to your stylesheet.

.cbdb-menu li a {
	color: rgba(255, 255, 255, 0.8);
	font: 18px "Myriad Pro","Lucida Grande",Helvetica,Arial,sans-serif;
        font-weight: bold;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}
.cbdb-menu a:hover {
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}
li.dark a {
	color: rgba(0, 0, 0, 0.8);
font-weight: bold;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
}

The properties for .cbdb-menu li a make it look more like a button than a link. The text-shadow property lets the button look inset in the button. The dark class is an optional class that you can put on your list items if you want dark text.

That’s it!

Now you have your own super sexy menu built entirely with CSS3. Since these buttons are made with CSS3, they are easily expandable based on how long the link is. The techniques aren’t limited to creating a menu. The same CSS can be applied to regular links to create easy and great looking call to action buttons, submit buttons, or any other button you can think of!

For even more information about CSS3, visit www.css3.info.

Download SourceDemo