Gradients and Background

Chapter: 56

Linear Gradients

Creating Linear Gradients

CSS3 gradients enable you to display smooth transitions between two or more specified colors. CSS3 defines two types of gradients: Linear and Radial.

To create a linear gradient, you must define at least two color stops. Color stops are the colors among which you want to render smooth transitions. You can also set a starting point and a direction - or an angle - along with the gradient effect.
In the example below, the colors blue and black are used to create a linear gradient from top to bottom.

div {
float: left;
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background:-moz-linear-gradient(DeepSkyBlue, Black);
}

CSS

This syntax works in Mozilla (-moz). If you work with a different browser, add the corresponding prefix, so that the browser understands the gradient.

Result:

You can use color names, Hex values, RGB, or HSL colors to define the gradient color.

Creating Linear Gradients

What types of color values can NOT be used within the linear gradient property?

HSL

RGB

CMYK

Hexadecimal

Color Stops

Colors can be added one after the other, separated with a comma. The browser will then determine each color stop position.
In the example below, the linear gradient has multiple color stops and runs from top to bottom.

background:-moz-linear-gradient(blue, yellow, green, pink, white);

CSS

Result:Color stop positions can be specified for each color.

background:-moz-linear-gradient(blue 20%, yellow 30%, green 85%);

CSS

Result:

In addition to percentages, you can also use px, em, and so on, to specify the color stops.
If you use the same color stop position for two colors, a sharp line will be created between them.

Direction of the Gradient

The direction of the gradient can be changed.
In the example below, the first gradient starts at left, moving right; the second one runs from bottom to top

div.first {
float: left;
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background:-moz-linear-gradient(left, blue, green, white);
}
div.second {
float: left;
width: 300px;
height: 100px;
margin: 4px;
background:-moz-linear-gradient(bottom, blue, green, white);
}

CSS

Result:

left, right, top, and bottom are supported values for the gradient direction. You can also use their various combinations to specify direction (e.g., bottom right)

Which one of the following directions is not supported for the linear-gradient?

Center

Right

Bottom

Left

Angle of the Gradient

As an alternative to predefined directions (bottom, top, right, left, bottom right, etc.), you can control the gradient's direction by specifying an angle.

The angle is specified as an angle extending between a horizontal line and the gradient line. In other words, 0deg creates a left-to right-gradient, while 90deg generates a bottom-to-top gradient.

div.first {
float: left;
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background:-moz-linear-gradient(bottom left, blue, green, white);
}
div.second {
float: left;
width: 300px;
height: 100px;
margin: 4px;
background:-moz-linear-gradient(100deg, blue, green, white);
}

CSS

Result:

Run the code and see how it works!

Angle of the Gradient

linear-gradient (left, red, yellow); Which one of the following choices is equivalent to the example above?

linear-gradient(red, yellow);

linear-gradient(0deg, red, yellow);

linear-gradient(45deg, red, yellow);

Repeating a Linear-Gradient

The repeating-linear-gradient() function is used to repeat a linear gradient:

background:-moz-repeating-linear-gradient(blue, green 20px);

CSS

Result:

Run the code and see how it works!

Repeating a Linear-Gradient

Which property is correct for creating a repeating gradient?

linear-repeating-gradient

repeating-linear-gradient

linear-gradient-repeat

Chapter: 57

Radial Gradient

Radial Gradients

To create a radial gradient, you must define at least two color stops.
The radial gradient is defined by its center.

The CSS syntax of the radial gradient looks like this:

background: radial-gradient(position, shape or size, color-stops);

CSS

The first value defines the gradient position. We can use a descriptive keyword, such as top, bottom, center, or left; or we can specify, for example, 50% 50% to set the gradient at the center or 0% 0% to set the gradient to start at top left.

The second value defines the shape and the gradient size. There are two arguments to shape gradients: The first is the ellipse, which is the default; and the second is the circle.

Lastly, the third value defines the color combination.

Setting the Shapes

The shape parameter defines the shape. If you do not define the shape of the radial gradient, it will take the ellipse value by default.

In the example below, we didn't specify the shape of the first div’s radial gradient, but for the second, we set the value to circle.
Here is what happened:

The CSS:

div.first {
height: 150px;
width: 200px;
color: #FFF;
background: -moz-radial-gradient(green, yellow, blue);
}
div.second {
height: 150px;
width: 200px;
color: #FFF;
background: -moz-radial-gradient(circle, green, yellow, blue);
}

CSS

Result:

Run the code and see how it works!

Setting the Shapes

What is the default value for the "shape" parameter?

Oval

Ellipse

Circle

Radial Gradient Position

Essentially, we can use the same method used to specify the location of a background image with the background-position CSS property to specify the location of the ellipse’s center. We specify the horizontal position of the background, and - optionally - the vertical position using either keywords (left, center right, or top, center, bottom), length values, percentage values, or some combination of these.

In the example below, the first gradient starts from the top left corner; in the second, we set 5% to the green, 15 % to the yellow and 60% to the blue.

div.first {
height: 150px;
width: 200px;
color: #FFF;
background: -moz-radial-gradient(top left, green, yellow, blue);
}
div.second {
height: 150px;
width: 200px;
color: #FFF;
background: -moz-radial-gradient(green 5% yellow 15% blue 60%);
}

CSS

Result:

In addition to percentages, you can use pixels or ems.

Radial Gradient Position

Which choice is not an acceptable value for "position" parameter?

Percentage

Radian

Pixel

Setting the Color Stops

As with linear gradients, a color stop is specified with a color, plus an optional stop position, which is a length or percentage value.

Here's a simple circular gradient with color stops:

background: -moz-radial-gradient(circle, green 40%, yellow 50%, blue 70%);

CSS

Result:

Run the code and see how it works!

Setting the Color Stops

Add a circular radial gradient to produce black and red colors, with color-stops accordingly at 20 pixels and 70 pixels.

background: radial-gradient

(circle, black

px, red

px);

Chapter: 58

Background-size

The background-size Property

The background-size property adds new functionality to CSS that allows us to specify the size of background images, using either lengths or percentages.

For example:

div {
height: 150px;
width: 200px;
border: 1px solid #000;
background: url("css_logo.png") no-repeat 50% 50%;
background-size: 100px 100px;
}

CSS

Result:

The current versions of most popular browsers - including Firefox, Safari, Chrome, Internet Explorer, and Opera - now support background-size, without the need for vendor prefixes.

The background-size Property

Resize the background image to a height of 100 pixels and a width of 200 pixels.

background-size:

px

px;

The background-size Values

The two other possible values for background size are the keywords contain and cover.

The contain keyword scales the image so that it fits the container.
In other words, the image will grow or shrink proportionally, but the width and height will not exceed the container's dimensions:

CSS syntax looks like this:

background-size: contain;

CSS

Result:background-size also accepts the cover keyword. The image is scaled to fit the entire container; however, if that has a different aspect ratio, the image will be cropped:

CSS syntax looks like this:

background-size: cover;

CSS

Result:

Run the code and see how it works!

The background-size Values

Which property scales the image so that both width and height fit inside the content area?

cover

none

contain

fill

Chapter: 59

Background-clip

The background-clip Property

The background-clip property specifies the painting area of the background.

The property takes three different values:

border-box - (default) the background is painted to the outside edge of the border
padding-box - the background is painted to the outside edge of the padding
content-box - the background is painted within the content box

In the example below, the first div with background-clip is set to padding-box; in the second div it's set to content-box

#first {
border: 2px dotted black;
padding: 20px;
background: LightBlue;
background-clip: padding-box;
}
#second {
border: 2px dotted black;
padding: 20px;
background: LightBlue;
background-clip: content-box;
}

CSS

Result:

Run the code and see how it works!

The background-clip Property

Which value is not used with the background-clip property?

text-box

padding-box

border-box

content-box

background-clip with Images

background-clip also applies to background images.

The CSS:

div {
background-image: url("css-logo.png");
background-clip: content-box;
}

CSS

Run the code and see how it works!

background-clip with Images

Does background-clip work with images?

No

Yes

Chapter: 60 

Transparent Borders

Transparent Borders with background-clip

Setting a transparent border on an element will reveal the element’s own background under the border.
In the example below, we set the borders to be transparent using RGBA, but they actually appear solid gray.

The CSS:

border: 20px solid rgba(0, 0, 0, 0.3);

CSS

Result:By setting the background-clip property to padding-box, the borders will be made transparent.

The CSS:

border: 20px solid rgba(0, 0, 0, 0.3);
-moz-background-clip: padding-box;
background-clip: padding-box;

CSS

Result:

Transparency effect is achieved with the background-clip:padding-box. Without it, the background of the box also goes beneath the borders, making it non-transparent.

Chapter: 61

Multiple Background Image

Multiple Backgrounds

The ability to have multiple background images is a new feature in CSS3.
Multiple background images are specified using a comma-separated list of values for the background-image property. The first image will appear on the top, the last on the bottom.

In the example below, we have two background images: the first is a CSS logo (aligned to the bottom and right); the second is a coding image (aligned to the top-left corner).

The CSS:

div {
width: 400px;
height: 300px;
background-image: url(csslogo.png), url(csscode.jpg);
background-position: right bottom, left top;
background-repeat: no-repeat;
}

CSS

Result:

Run the code and see how it works!

Multiple Backgrounds

The last image in the background-image list will appear at the ...

Top

Bottom

Multiple Backgrounds

The position of the background images can be changed, using the background-position property.
For example:

div {
width: 400px;
height: 300px;
background-image: url(csslogo.png), url(csscode.jpg);
background-position: right top, left top;
background-repeat: no-repeat;
}

CSS

Result:

Multiple backgrounds can also be specified using the background: shorthand property.

background: url(csslogo.png) right top no-repeat,
url(csscode.jpg) left top no-repeat;

CSS

Run the code and see how it works!

Chapter: 62

Opacity

The opacity Property

CSS opacity property provides an excellent means of adding opacity to any element.
In the example below, we set different levels of opacity to the same picture, so you can clearly see the difference.

#img1 {
opacity: 1;
}
#img2 {
opacity: 0.5;
}
#img3 {
opacity: 0.25;
}

CSS

Result:

The opacity property value must be a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Opacity in Internet Explorer

To have the opacity property work in all versions of IE, use the filter:alpha(opacity=x) along with the opacity property. x can take a value from 0 to 100.
The value 0 results in a completely transparent element (i.e., 100% transparent), whereas the value 100 makes the element completely opaque (i.e., 0% transparent).

For example, in order to have the code work properly with IE, when the opacity of the image is set at 0.5, it should look like this:

#img {
opacity: 0.5;
filter: alpha(opacity=50);
}

CSS

The alpha filter is a Microsoft-only property, not a standard CSS property.

Opacity in Internet Explorer

Fill in the blank to add support for IE8.

:alpha(opacity=30);

Chapter: 63

Module 6 Quiz

In the background-clip property, which value allows for the creation of transparent borders?

padding-box

margin-box

none

border-box

Drag and drop from the options below to make the background image of the element 100 x 100 pixels in size. Also, set the opacity of the element to 50%:

#element {

background-image:

url

('test.jpg');

background-

size

: 100px 100px;

opacity

:

0.5

;

}

Drag and drop from the options below to apply 50% opacity to the div, and make it also work in IE:

div {

opacity:

0.5

;

filter

:

alpha

(opacity=

50

);

}