Background-Clip
Background clipping controls the area that a background image "paints" or fills. Values include:
- border-box: the background image fills the element up to the outer edge of the border area
- content-box: the background image fills the element only in the content area
- padding-box: the background image fills the element up to the outer edge of the padding area
Background-Origin
Background-origin specifies where the background image begins. Values include:
- border-box: the background image begins at the upper-left corner of the border
- content-box: the background image begins at the upper-left corner of the content area
- padding-box: the background image begins at the upper-left corner of the padding edge
Background-Size
Background-size gives flexibity in how the size/aspect ratio of the image is displayed. Values include:
- cover: the background image fills the entire background area of the element (while keeping a locked aspect ratio); this sometimes results in part of the image not displaying
- contain: the background image fits completely in the background area (while keeping a locked aspect ratio); sometimes this results in an empty section of the background area
- width and height: specify the width and height values (in that order) for the image in the unit of your choice (aspect ratio of the image can be changed)
Gradients
A Gradient is a smooth transition from one color to another and/or from one value to another. With CSS3 you can make two kinds of gradients - either linear or radial. Colorstop refers to the colors you are changing between. Gradients need a minimum of 2 colorstops but you can have more.
Linear Gradients
Linear gradients move directionally in a straight line. This could be horizontal, vertical, or diagonal.
Syntax
selector {background: linear-gradient(direction, colorstop1, colorstop2);}
Values
Direction: left, right, top, bottomIf you do not set a value for direction, the direction will automatically go from top to bottom.
This gradient has two colorstops: white and cadetblue:
h1 {background: -webkit-linear-gradient(white, cadetblue);
background: linear-gradient(white, cadetblue);}
This gradient has 3 colorstops and the left value to go from side to side:
section {background: -webkit-linear-gradient(left, white, cyan, cadetblue);
background: linear-gradient(to left, white, cyan, cadetblue);}
This diagonal gradient uses 2 values (bottom and left) to go from corner to corner. section {background: -webkit-linear-gradient(bottom left, white, cadetblue);
background: linear-gradient(to bottom left, white, cadetblue);}
If you know the specific angle you would like the gradient, you can use the number of degrees as a value.li {background: -webkit-linear-gradient(65%, white, cadetblue);
background: linear-gradient(65%, white, cadetblue);}
Radial Gradients
Radial gradients are one color in the center and radiate out, changing to another color as it gets closer to the ending boundry.
Syntax
selector {background: radial-gradient( shape, size, colorstop1, colorstop2, colorstop3...);}
Values
CircleEllipse
Values for shape are circle and ellipse. If you do not set a value, the default is ellipse:
h1 {background: -webkit-radial-gradient(circle, white, cadetblue);
background: radial-gradient(circle, white, cadetblue);}
Values to change the position include closest-side, farthest-side, closest-corner, and farthest-corner. These work in conjuction with horizontal and vertical percentages that change the gradient size. These are all optional values if you do not want to change the size/position. Notice the prefixes have a slighlty different syntax then the default property:
selector {
background: radial-gradient(closest-side at % %, colorstop, colorstop);}
The 1st percentage changes the size of the gradient horizontally. The 2nd percentage changes the size of the gradient vertically.
header {background: -webkit-radial-gradient(10% 30%, closest-corner, white, cadetblue);
background: radial-gradient(closest-corner at 10% 30%, white, cadetblue);}
Values for spacing can be set with each color. Adding a percentage after the color changes the spacing:
selector {background:radial-gradient(colorstop %, colorstop %, colorstop %);}
li {background: -webkit-radial-gradient(#ffffff 10%, #fff111 25%, cadetblue 60%);
background: radial-gradient(#ffffff 10%, #fff111 25%, cadetblue 60%);}
Repeating Gradients
Both linear and radial gradients can be set to repeat to create a gradient pattern.
Transparent Gradients
Both linear and radial gradients can be set to different levels of transparency if you use rgba color instead of a hex# or color name.
Linear
Using rgba values as colorstops allows transparency in the gradient. If alpha is set to 1, the color is opaque. If alpha is set to 0, the color is transparent. Numbers between 1 and 0 (such as .5) cause translucency.
section {background: -webkit-linear-gradient(left, rgba(95,158,160,1), rgba(95,158,160,0));
background: linear-gradient(to left, rgba(95,158,160,1), rgba(95,158,160,0));} Radial
Again, the first 3 values represent the proportions of red, green, and blue. The last value sets the level of transparency.
h1 {background: -webkit-radial-gradient(rgba(95,158,160,1), rgba(95,158,160,0));
background: radial-gradient(rgba(95,158,160,1), rgba(95,158,160,0));}