Backgrounds & Gradients - Part2

Radial Gradient Background

While the linear gradient is perfect for building a gradient propagating in one direction, often the need for a radial gradient arises. Radial background gradients work just like linear gradients and share a lot of the same values. However, radial gradients can be quite complex with values for location, size, radius, and more. We’ll cover the basics, but please feel free to take a deeper dive into radial gradients.

div {
  background: #70bf32;
  background: url('radial-gradient.png') 50% 50% no-repeat;
  background: radial-gradient(#a1e048, #6a942f);
}

Radial Gradient Background

CSS3 Gradient Background Generator

Programming CSS3 gradients from hand can be quite a task, especially if you are not all that familiar with them. Fortunately, quite a few CSS3 gradient generators have popped up. Each generator works a little differently, some coming with presets and examples and some having an expansive list of options. If interested, I recommend doing some research to find the right generator for your needs.

Gradient Background Stops

So far we have discussed transitioning a gradient from one color to another, however if you want to transition more than two colors you can use color stops. Instead of declaring two color values, you can declare numerous values. The browser will transition from one to the next accordingly. Adding a length value to these color stops determines at what position and distance the transition will take place. If no length value is declared the gradient will transition evenly between all colors declared.

div {
  background: #6c9730;
  background: url('linear-gradient-stops.png') 0 0 repeat-y;
  background: linear-gradient(to right, #8dc63f, #d8ad45, #3b4b94);
}

Gradient Background Stops

Navigation Background Example

HTML

<ul>
  <li class="play"><a href="#">Play</a></li>
  <li class="back"><a href="#">Skip Backward</a></li>
  <li class="stop"><a href="#">Pause/Stop</a></li>
  <li class="forward"><a href="#">Skip Forward</a></li>
</ul>

CSS

ul {
  background: #f4f4f4;
  background: linear-gradient(#fff, #eee);
  border: 1px solid #ccc;
  border-radius: 6px;
  display: inline-block;
  height: 22px;
  list-style: none;
  margin: 0 0 20px 0;
  padding: 0 4px 0 0;
}
li {
  height: 16px;
  float: left;
  padding: 3px;
  text-indent: -9999px;
  width: 16px;
}
.play {
  background: #f4f4f4;
  background: linear-gradient(#fff, #eee);
  border: 1px solid #ccc;
  border-radius: 30px;
  left: -4px;
  padding: 7px;
  position: relative;
  top: -5px;
}
li a {
  background: url('controls.png') 0 0 no-repeat;
  display: block;
  height: 16px;
  width: 16px;
}
.play a:hover {
  background-position: 0 -16px;
}
.back a {
  background-position: -16px 0;
}
.back a:hover {
  background-position: -16px -16px;
}
.stop a {
  background-position: -32px 0;
}
.stop a:hover {
  background-position: -32px -16px;
}
.forward a {
  background-position: -48px 0;
}
.forward a:hover {
  background-position: -48px -16px;
}

Demo

• Play
• Skip Backward
• Pause/Stop
• Skip Forward

Multiple Background Images with CSS3

It used to be if you wanted an element to have more than one background you would have to wrap it with another element and assign a background to the wrapping element. This created bloated code for the simple use of adding additional backgrounds. Now with CSS3 we can use multiple background images on a single element by chaining these background values together.

div {
  background:
    url('foreground.png') no-repeat 0 0,
    url('middle-ground.png') no-repeat 0 0,
    url('background.png') no-repeat 0 0;
}

Not only can you chain background property values, you can also chain together background-repeat,background-position, and other background related properties.

Multiple Background Images Example

HTML

<div>Dinosaur with Grass and Clouds</div>

CSS

div {
  background: 
    url('dyno.png') no-repeat 380px 18px, 
    url('grass.png') no-repeat 0 100%, 
    url('sky.jpg') no-repeat 0 0;
  border-radius: 6px;
  height: 200px;
}

Demo

Dinosaur with Grass and Clouds

New CSS3 Background Properties

Along with gradient backgrounds and multiple background images, CSS3 also introduces three new CSS properties,background-size, background-clip, and background-origin.

CSS3 Background Size

The background-size property allows you to specify a specific size for your background image. The first value declared is the width of the image and the second value is the height. These values may include any length measurement or keyword, most notably pixels and percentages. If only one value is declared, the auto keyword may be used to keep the proper image proportions.

div {
  background: url('shay.jpg') 0 0 no-repeat;
  background-size: 85% auto;
  border: 1px dashed #8c9198;
  height: 240px;
  width: 200px;
}

Cover & Contain Values

The cover keyword value specifies that the background image should be resized proportionally to completely cover an element. How the background will be resized depends on the dimensions of the background and element. While the background will hold its dimensions proportionally, the quality of the image may be resized in a way that it distorts the image. Always make sure to check your work.

The contain keyword value will resize a background image proportionally to keep it within the confines of the element. This may mean that there are parts of the element without a background, however the entire background image will be visible. As with the cover keyword value, the resizing of the background image will be proportional to the image’s dimensions, however it may result in a distorted image.

CSS3 Background Clip & Background Origin

The background-clip property specifies the area a background image will cover and the background-originproperty specifies where the background-position should originate. The introduction of these two new properties also includes three new values: border-box, padding-box, and content-box. Each of these three values may be used to set a value for the background-clip and background-origin properties.

BACKGROUND CLIP & ORIGINdiv {
  background: url('shay.jpg') 0 0 no-repeat;
  background-clip: padding-box;
  background-origin: border-box;
}

Fig. 5.03The border-box value extends into the border of an element.

Fig. 5.04The padding-box value extends into the padding of an element, but is contained within any border.

Fig. 5.05The content-box value is contained within the border and padding of an element.