On October 28, 2011 In User interface with , tags

Using gradients in your html templates

Everybody is using cool gradients in their html design. So, today we will be learn two useful method for implementing gradients

  1. Using gradient image
  2. Using CSS3 background gradients

Using gradient image

This is pretty old technique used before the release of CSS3. For creating a gradient image we will be using Photoshop.In this case we are creating a gradient button

Create a new file with height = 50px and width = 50px (width is negligible if we are using background repeat-x)

Create a new photoshop file

Now fill with any color of your choice. Now Right click > blending options then select gradient overlay

Gradient overlay photoshop

Now add some color starting from #ffffff to #eeeeee with angle -900. Once done save for web & devices (Alt + Shift + Ctrl + S).

In the same fashion create another gradient image starting from # ff8352 to #ff4800 with angle -900 then save for web and devices.

This is how my two images looks

preview of two gradient images

You may have noticed that we created two gradient images one for the hyperlink (a_link) and the second for the hyperlink state hover (a_hover).

CSS for using gradient images

/* Gradient Image styling for link */
background:url(a_link.png) repeat-x;

/* Gradient Image styling for hover*/
background:url(a_hover.png) repeat-x;

PROS : Work’s with all devices like mobile, tablet and pc

CONS : Height should be fixed, if resized looks ugly

Using CSS3 background gradients

With the release of CSS3 template designing became much easy and there is lots of great code like curved corner, box shadows, text shadows , gradients etc,..

Generating gradient code is easy simply visit colorzilla . The interface looks like Photoshop

gradient generator photoshop like ui

Now on your left there are options like present style and gradient options. Use gradient options as you have used them in Photoshop and create gradients once done on your right you can grab the code.

CSS for using CSS3 background gradients

/* ----- Gradient styling for link ----- */
 	/* Old browsers */
	background: #ffffff;
	/* FF3.6+ */
	background: -moz-linear-gradient(top,  #ffffff 0%, #eeeeee 100%);
	/* Chrome,Safari4+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eeeeee));
	/* Chrome10+,Safari5.1+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#eeeeee 100%);
	/* Opera 11.10+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#eeeeee 100%);
	/* IE10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#eeeeee 100%);
	/* W3C */
	background: linear-gradient(top,  #ffffff 0%,#eeeeee 100%);
	/* IE6-9 */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );

/* ----- Gradient styling  for hover ----- */
	/* Old browsers */
	background: #ff8352;
	/* FF3.6+ */
	background: -moz-linear-gradient(top,  #ff8352 0%, #ff4800 100%);
	/* Chrome,Safari4+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8352), color-stop(100%,#ff4800));
	/* Chrome10+,Safari5.1+ */
	background: -webkit-linear-gradient(top,  #ff8352 0%,#ff4800 100%);
	/* Opera 11.10+ */
	background: -o-linear-gradient(top,  #ff8352 0%,#ff4800 100%);
	/* IE10+ */
	background: -ms-linear-gradient(top,  #ff8352 0%,#ff4800 100%);
	/* W3C */
	background: linear-gradient(top,  #ff8352 0%,#ff4800 100%);
	/* IE6-9 */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8352', endColorstr='#ff4800',GradientType=0 );

PROS : Very flexible and pretty clean when resized compared to gradient images and No need to specify height

CONS : Work’s with devices which supports html5 and css3

Lets create gradient buttons

add following code to your css which creates two classes (.button and .button2). .button is gradient image generated button and .button2 is css generated gradient

<!---- simple markup ---->
<a href="#" class="button">Some text</a>
<a href="#" class="button2">Some text</a>

css style

/*
common styling for button and button2
*/
.button,
.button2{
	/* hyperlink is a inline element we are converting it to inline-block element */
	display:inline-block;
	/* font size */
	font-size:14px;
	/* remove's underline */
	text-decoration:none;
	/* text color */
	color:#bbbbbb;	
	/* adds margin to the button*/
	margin:0 10px;
	/* curved corners around the button in mozilla */
	-moz-border-radius:.3em;
	/* curved corners around the button in Safari and chrome */
	-webkit-border-radius:.3em;	
	/* curved corners around the button in remaining all browser */
	border-radius:.3em;
	/* drop-shadow for the button in mozilla */
	-moz-box-shadow:0 0 5px #cccccc;
	/* drop-shadow for the button in Safari and chrome */
	-webkit-box-shadow:0 0 5px #cccccc;	
	/* drop-shadow for the button in remaining all browser */
	box-shadow:0 0 5px #cccccc;
}
.button:hover,
.button2:hover{
	color:#ffffff;
}
/* NOTE: 1. hover state won't work on some touch screen mobiles
		 2. border radius and box shadow work on all major browsers */

/* ---- Creating a button using gradient image ---- */

.button{
	/* Gradient Image */
	background:url(a_link.png) repeat-x;
	/* height of the image to align text vertically center*/
	line-height:50px;
	/* adds padding to the button */
	padding:0 10px;
}
.button:hover{
	/* Gradient Image on hover */
	background:url(a_hover.png) repeat-x;
}

/* Creating a button using css3 background gradients */
.button2{
 	/* Old browsers */
	background: #ffffff;
	/* FF3.6+ */
	background: -moz-linear-gradient(top,  #ffffff 0%, #eeeeee 100%);
	/* Chrome,Safari4+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eeeeee));
	/* Chrome10+,Safari5.1+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#eeeeee 100%);
	/* Opera 11.10+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#eeeeee 100%);
	/* IE10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#eeeeee 100%);
	/* W3C */
	background: linear-gradient(top,  #ffffff 0%,#eeeeee 100%);
	/* IE6-9 */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
	line-height:1.8em;						/* Adds space between lines */
	padding:10px;							/* adds room to breath on top,right,bottom and left */
}
.button2:hover{
	/* Old browsers */
	background: #ff8352;
	/* FF3.6+ */
	background: -moz-linear-gradient(top,  #ff8352 0%, #ff4800 100%);
	/* Chrome,Safari4+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8352), color-stop(100%,#ff4800));
	/* Chrome10+,Safari5.1+ */
	background: -webkit-linear-gradient(top,  #ff8352 0%,#ff4800 100%);
	/* Opera 11.10+ */
	background: -o-linear-gradient(top,  #ff8352 0%,#ff4800 100%);
	/* IE10+ */
	background: -ms-linear-gradient(top,  #ff8352 0%,#ff4800 100%);
	/* W3C */
	background: linear-gradient(top,  #ff8352 0%,#ff4800 100%);
	/* IE6-9 */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8352', endColorstr='#ff4800',GradientType=0 );
}

We have created a comparison chart so you can decide which one suits you gradient image or gradient css. hope you enjoyed this tutorial