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

Minified?

What exactly does minified mean? The plugin goes through your entire theme and takes out unnecessary code and space, as well as optimizes it. Extra spacing between elements in your markup and CSS is great for development because it separates everything into sections, but you don’t need these extra spaces for production. Visitors on your website can’t tell if there is extra spacing in the markup or not when just viewing the website, so why have it there? That extra spacing bloats your file size which in turn causes longer load times and increased bandwidth usage.

Customizable and Reversible

Many may be worried that this plugin is going to break your theme. After all those hours and long nights of coding your perfect theme, you don’t want it to all be destroyed by a plugin. Worry not, Theme Minifier understands and has your back. There are various levels that you can minify your theme. The standard level will rip out all the white space in your markup. You can also choose which method to use when the plugin optimizes your JavaScript: JSMin or Packer. JSMin is the default because it is the most popular and most used, and Packer is often considered evil, however it results in smaller file size. You can then take it a step further and optimize your site’s CSS. For now, using this CSS optimization will break any CSS3 styles that you may be using such as any -moz or -webkit tags because it is not valid CSS.

After you choose your settings and the plugin runs, it will create a copy of your theme, and it will not automatically make your site use the new theme. If something in the theme would break and the plugin forced your site to use the new theme, all of your visitors would immediately see the broken theme. You will also have a backup which you can revert to at anytime in case there is a problem.

Having two copies of your theme, one original theme and one minified, has another advantage other than speed and optimization. You can deliver the minified theme to your visitors, and still have the markup laid out the way you like it. The original theme then becomes the development theme, which you can make all of your changes to with ease. When you are done making the changes, you can simply run the plugin again to minify the new changes.

Image Optimization

The Theme Minifier will also analyze and convert your images to whatever file type is the most efficient. Just like your theme, it will create a new version of every image it converts so your original images aren’t gone forever and damaged. Theme Minifier shows you a nice table showing what images it converted and gives you details like how much space you can save by using the new format. If you choose to use the new images, it is up to you to make the necessary changes in the markup.

Risk Free

Since the plugin gives you options and backs up your theme, why not try it out? It will only take a few seconds to install, and just as long to run. Make sure to visit the plugin’s page in the WordPress Plugin Directory or visit the author’s blog about the plugin. After your run the plugin, it will even give you a report on how much you saved, and where it was saved.

How Much Space Did You Save?

After you install and run the plugin, comment below and let us know how much space you saved!

Download SourceDemo

I chose loopedSlider for this slider for many reasons. Nathan Searles is constantly updating the plugin over at GitHub. All of the updates are great because they add new features, and fix any bugs that may come up. This also allows all of the users of the plugin to easily get the latest version of the plugin. I also chose loopedSlider because of all of its features.

About loopedSlider

Unlike other jQuery sliders out there, loopedSlider can do it all, and at only 10kb, or 6kb minified. LoopedSlider’s main attraction is having a constant stream of content. When you reach the end, the slider doesn’t have to slider all the way back to the beginning, it just places the first item after the last, and continues going. LoopedSlider can also use a variety of ways to navigate through the content. You can have pagination links to each slide, or a previous and next arrow. The pagination can also be added dynamically by jQuery, or hardcoded. If you chose, you can also set the scroll speed, auto start, fade speed and auto height.

The Theme

I created a custom theme based on loopedSlider inspired by the iPhone. This custom theme is easy to use and implement into any version of loopedSlider whether it be the current version, or any future versions Nathan Searles’ may put out. It is a full theme including themed pagination, previous button, and a next button with all of the active, hover and “current slide” effects. The complete package, including the CSS, images, demo and jQuery scripts, are available below.

Further Resources

For more information on loopedSlider and the latest versions, visit its home at GitHub.

Download SourceDemo

Social Media Bookmark – 54 icons (2 varieties)

Matte White Square – 108 icons

Old Bottle Crowns – 20 icons

Blue Jelly – 108 icons

Grunge Peeling Stickers – 20 icons

SociaLEGO – 11 icons

Web 2.0 Origami – 15 icons

Social Post Stamps – 13 icons

ColorStroked freehand – 22 icons

CS Social Icons – 15 icons

Hearts v2 – 39 icons

Drinks Web 2.0 – 27 icons

Page Peel – 16 icons

Handy Icons – 24 icons

Aibrean’s Social Icons – 10 icons

Social.me – 30 icons

Handdrawn Icon Set – 11 icons

Extreme Grunge – 9 icons

I will be posting everything from website showcases for inspiration to tutorials and even my favorite tweets. Aside from my blog, you can also follow me on twitter: @cameronbaney where I tweet about everything web design.