Advertisement

CSS3 vs. Photoshop: Complex Backgrounds

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →
This post is part of a series called CSS3 vs. Photoshop.
CSS3 vs. Photoshop: Rounded Corners and Box Shadows

This tutorial will outline how to create complex backgrounds which, in the past, could only be achieved by slicing up a design created in Photoshop or another graphic editor. We're going to look at how to use gradient shades and how to combine them with multiple image backgrounds to create radical effects. Are you ready?


Before Getting Started

This is the first in what will be a series of many examples. Each one will harness CSS3 to achieve visual effects which have traditionally relied on creating images in Photoshop before slicing them up and porting to a web design. This cross-process has created a gap between programmers and designers and slicing a design can sometimes be a very awkward task. The limitations of CSS have made creating something as simple as an angled or oblique gradient impossible. But now, thanks to CSS3, our imagination is the only limit.

Today we will use the multiple backgrounds feature of CSS3 to create a nice, calm landscape from a single div.

Note: All the examples were tested on Mozilla Firefox, Safari and Chrome, if you want to achieve something similar in IE or any other browser leave a comment and I will be glad to help you.


Step1: Gradient Backgrounds

In the past there was only one way to create a gradient background: using Photoshop (or any other graphic editing software). We would follow this process, for instance, for a full page background: Create a Gradient Fill Layer (or apply a Gradient Overlay effect to a box) and set at least two Paint Buckets as stop colors. Then using the Crop or Slice Tool, cut a 1px width image and repeat it using CSS depending on the case, horizontally or vertically. A fairly reasonable process, pretty quick, and almost mechanic for experienced web designers. This process, however, has a couple of limitations:

  • Any image represents a request to a server processor. The loading time is proportional to the number of HTTP requests to our web server, so having multiple images would likely result in some kind of lag loading the page.
  • You could only create horizontal or vertical gradients, an oblique gradient, or a radial gradient (very common in print design) was impossible to achieve with a repeating image. Large image backgrounds started being used with high broadband, but the loading time was obviously affected.

In Photoshop you used to have something like this. You can select a Stop Color from a visual color picker or write both RGB or HEX values. This is pretty much the same as CSS3; you can use Hex or RGB colors for the gradients. In future tips I will show you how to use the RGBA colors to add an Alpha (transparency) percentage.

With CSS3, creating an classic linear background needs a couple more lines of code than using a background image, but the result is worth it. This is the proper syntax to create a gradient with css:


Syntax -moz (view full)

LINEAR: -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )


Syntax -webkit (view full)

-webkit-gradient(linear, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

A important thing to point out is that the gradient is considered a "background-image". In this example we assign a class to our document's body:

<body class="linear">

The CSS then targets that class:

/*Full page linear background */
  body.linear{
  height:100%;/* To add a full page body CSS3 gradient you need to set this height to 100% */
  
  background-repeat:no-repeat;
  
  background-image:-moz-linear-gradient(top, #0096f5, #00416a);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0096f5), to(#00416a), color-stop(1,#FFF));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#0096f5, endColorstr=#00416a);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#0096f5, endColorstr=#00416a)"; /*To avoid have a blank stripe at the bottom, there are a couple of fixes */
  /*background-attachment:fixed;*/ /*Works ok except on IE*/
  background-color:#00416a; /*The background will look nice if there's scroll, adding the bottom color all across the page*/
  }

Step 2: Additional Variants

In graphic software you can set several variants of gradient shapes by changing the number of stop colors, angles, and style (linear/radial).

In CSS3 we can achieve the same results.


Syntax -moz (view full)

LINEAR: -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

RADIAL: -moz-radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )


Syntax -webkit (view full)

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

/*Gradients*/
  .linear_gradient{
  background-image:-moz-linear-gradient(top, #6f828b, #122938);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6f828b), to(#122938), color-stop(1,#FFF));
  }
  
  .angle_gradient{
  background: -moz-linear-gradient(right top 260deg, #ffe930, #ed9700);
  background: -webkit-gradient(linear, right top, left bottom, from(#ffe930), to(#ffa200));
  }
  
  .radial_gradient{
  background: -moz-radial-gradient(50% 50%, circle farthest-corner, #ff0000, #a00000);
  background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, from(#ff0000), to(#a00000));
  }
  
  .stops_gradients{
  background: -moz-linear-gradient(top, #676767 0%, #262626 50%, #1D1D1D 50%, #000000 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(#676767), color-stop(0.5, #262626), color-stop(0.5, #1D1D1D), to(#000000));
}

View Demo


Step 3: Background Images

Obviously, we will not always need only gradients as backgrounds, having elaborate images is still something we'll lean on. CSS3 allows us to add several images to the background, then changes sizes and positions aswell.

For a multiple background image you should define two attributes: "background" and "background-size". The first one sets all the images, the urls, its positions and repeat style - the second sets its respective sizes ("auto" by default).


Syntax

background:
[<url-1> <xpos> <ypos> <repeat-style>],
[<url-2> <xpos> <ypos> <repeat-style>],
[<url-3> <xpos> <ypos> <repeat-style>],
...
[color]
;

background-size:
[<style> || <width-1> <height-1>],
[<style> || <width-2> <height-2>],
[<style> || <width-3> <height-3>],
...
;

This is a simple example of having 2 images (a happy and a sad face) as background of a element (class="image"), with different sizes and positions:

.images{
  
  /*Background Images*/
  background: url(images/smile.png) 50px 50px no-repeat, /* First Smile Face */
  url(images/smile.png) 350px 200px no-repeat, /* Second Smile Face */
  url(images/sad.png) 500px 120px no-repeat, /* Sad Face */
  #000; /*Color*/
  
  /*Background sizes*/ 
  background-size:	auto, /* First Smile Face */
  128px 128px, /* Second Smile Face */
  64px 64px;  /* Sad Face */
  -moz-background-size:	auto, /* First Smile Face */
  128px 128px, /* Second Smile Face */
  64px 64px;  /* Sad Face */
  -webkit-background-size:auto, /* First Smile Face */
  128px 128px, /* Second Smile Face */
  64px 64px; /* Sad Face */
}

View Demo


Step 4: Combining Both

Here comes the fun! Let's create a landscape background. I'm using as a base the images I previously create for my tutorial: Create an Illustrative Single Page Web Design With Photoshop that you can download for free.

Now that you know how to create linear gradients, and add multiple images, you can combine them all as a complex background for a single div. Starting in photoshop you should have something like the screenshot below: A linear gradient background depicting the horizon and the sky, three clouds (which is actually the same image with different sizes) and a little mountain. Then you just need to slice a single instance of the clouds and the mountain with transparent background, or find some similar stock images that you can use.

Now, let's add everything as a single background for our HTML element.


Step 5: Syntax

background:
[<url-1> <xpos> <ypos> <repeat-style>],
[<url-2> <xpos> <ypos> <repeat-style>],
[<url-3> <xpos> <ypos> <repeat-style>],
...
[gradient]
;

background-size:
[<style> || <width-1> <height-1>],
[<style> || <width-2> <height-2>],
[<style> || <width-3> <height-3>],
...
;

In the css file, for the "background" attribute, put the images first and then the gradient with all its respective stop colors. Then for the "background-size" attribute, set the sizes for the images, and leave all the gradient backgrounds' sizes as "auto".

.landscape{
  /*Background Images*/
  background: url(images/cloud.png) 100px 250px no-repeat, /*First Cloud*/ /*images go first*/
  url(images/cloud.png) 510px 170px no-repeat, /*Small Cloud*/
  url(images/cloud.png) 740px 310px no-repeat, /*Smallest Cloud*/
  url(images/mountains.png) 430px 340px no-repeat, /* Mountains */
  -moz-linear-gradient(top, #71B1D5 0%, #FFFFFF 70%, #7CB71D 70%, #5E8113 100%); /*Gradient*/	/*Gradients go last*/
  
  background: url(images/cloud.png) 100px 250px no-repeat, /*First Cloud*/ /*images go first*/
  url(images/cloud.png) 510px 170px no-repeat, /*Small Cloud*/
  url(images/cloud.png) 740px 310px no-repeat, /*Smallest Cloud*/
  url(images/mountains.png) 430px 340px no-repeat, /* Mountains */
  -webkit-gradient(linear, left top, left bottom, from(#71B1D5), color-stop(0.7, #FFFFFF), color-stop(0.7, #7CB71D), to(#5E8113));/*Gradient*/
  
  /*Background sizes*/ 
  background-size:	auto, /*First Cloud*/
  165px 50px, /*Small Cloud*/
  105px 30px, /*Smallest Cloud*/
  auto, /*Mountains*/
  auto; /*Gradient*/ 
  
  -moz-background-size:	auto, /*First Cloud*/
  165px 50px, /*Small Cloud*/
  105px 30px, /*Smallest Cloud*/
  auto, /*Mountains*/
  auto; /*Gradient*/ 
  
  -webkit-background-size:auto, /*First Cloud*/
  165px 50px, /*Small Cloud*/
  105px 30px, /*Smallest Cloud*/
  auto, /*Mountains*/
  auto; /*Gradient*/ 
}

View Demo


Conclusion

And that's it! try to create your own complex background combining gradients and images. Thanks for reading!

.
Advertisement