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

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

The Tutorial

The tutorial jQuery look: Tim Van Damme gave me a great foundation for what I wanted to accomplish on my website. There were just a few tweaks that I need to make to have it work smoothly for my website. To focus on just the animation part of the tutorial, navigate to the beginning of the “Accordion bounce” section. Follow the rest of Remy’s tutorial to accomplish all of the animation effects. There were some problems in Internet Explorer for me because of my container’s transparent background. To solve this, I removed the following line in the jQuery script:

// (4) If the browser supports opacity, fade the panels out
  if ($.support.opacity) {
    $panels.stop().animate({opacity: 0 }, delay);
  }

That’s it

Now you should have a nice animated site courtesy of jQuery and jQuery for Designers. Stay tuned for the next tutorial in the series that will teach you how to design the buttons used in “Connect With Me” section of my portfolio.

Related Articles

• New Portfolio Design Tutorial 1: The Background

This is the first tutorial in the series that I will teach you how I created the site. In this tutorial, you will learn how to recreate the background of my website.

Create the gradient

In Photoshop, create a new document and make it the size you want. For my background, I used 1920 pixels x 1200 pixels. Next, create a new layer (Layer -> New -> Layer) and name it “Gradient”. Fill this layer with any color. It doesn’t matter what color you use, because the gradient will be all you see.

Next, add some blending options to the layer (Layer -> Layer Style -> Blending Options). In the layer style window, select Gradient Overlay and use the properties in the screenshot below.

For the actual gradient, you may use whatever colors you want. I chose to use a variety of colors in the spectrum. Once you applied the gradient, you should have something that looks similar to the following:

Darken the Edges

To add more depth, you can darken the edges. This adds depth to the graphic, and creates a subtle border. This step is simple, and a matter of preference.

Create a new layer above the gradient layer to separate the image effects and name it “Edges”. Use a large soft brush with black as the color (I used around a brush size of around 300.) Next, go around the edges of the image and paint the black. The easiest way to achieve this effect is to zoom out of your image so you can see the grey document background. Once you have zoomed out, paint with your only a quarter of your brush over the actual image, and the rest of the document background. Put more of the brush on the image to create a darker area. Repeat this process until you are please with the look. After this step, you should have something that looks similar to the following:

Adding Lines for More Depth

The next step is where the background comes to life. Create a new layer above the dark edges, name it “Lines”, and fill it with any color. Add blending options to the new layer, and select Gradient Overlay. This time, we are going to use a noise gradient instead of a solid gradient. This layer will be desaturated in the end, so colors do not matter. Use the properties in the screenshot below.

To get different effects, use the Randomize button in the Gradient Editor. You can keep hitting the button until you find a pattern that you like. Make sure you are focusing on the lines that it is creating, and not the colors. Remember, this layer will be desaturated in the end, so colors do not matter.

After the blending options have been set, and you are satisfied with the look, you need to separate the layer style from the layer. This is done by selecting the layer, and then selecting Layer -> Layer Style -> Create Layer. This creates a new layer for all of the layer styles applied in the Blending Options.

Once the new layer was created, you can delete the original “Lines” layer. Rename the “Lines’s Gradient Fill” layer to “Lines”. Next, desaturate the layer so the original gradient’s colors can be shown. This is done by selecting Image -> Adjustments -> Desaturate. The desaturate property will remove all color from the layer. Finally, select the “Lines” layer and change it to a Hard Light layer with 75% Opacity. This allows what is under the layer to show through the “Lines” layer. You should end up with something that looks like the following:

Add Highlight Lines

The final step adds another level of depth to the image, but this time with highlights. This step is depends entirely on preference. Create a white line using the Line tool that follows the existing lines. The best way to do this is to zoom out of your image so you can see the document background as well. Then, when creating the line, hold in the shift button so you create a line that has an angle of 45°. Also, when you create the line, make sure that it extends the entire height of the image. See below for an example of what the plain line should look like (located in the middle).

Next, line up the highlight line with one of the existing lines. This will keep up with the consistency of the image and make the highlights more fluid. Finally, add a mask to the line shape layer. This step will be for the lines in the middle that come up from the edge, and fade near the middle of the image.

For the mask, use a large soft black brush and paint over the areas of the line you don’t want to appear on the image. Make sure that you keep the soft edge of the brush towards the part of the line that you want to appear in the image. That way, you will have a smooth fade. Once the mask is complete, adjust the layer’s opacity so it blends with the image, and doesn’t look out of place. For the four highlight lines that I created, I used one 25% opacity layer and three 40% opacity layers. The level of opacity will depend on the colors you used, and your preference. Repeat these steps to create more highlight lines until you are satisfied.

You’re Done

The final image should look similar to the following:

Feel free to use this tutorial to create backgrounds for your own website, design, or desktop! Tune in for the next tutorial in the series that will teach you how to create the animation effect for the different pages of the portfolio.

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

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.