SH1802

CSS3 Properties
I. Linear Gradients
A. Creating Linear Gradients
• CSS gradients enable you to display smooth transitions between two (2) or more specified
colors. CSS defines two (2) types of gradients: Linear and Radial.
• To create a linear gradient, you must define at least two (2) 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.
• For example:
o The CSS:
DIV {
float: left;
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background:-moz-linear-gradient(DeepSkyBlue, Black);
}
o The HTML:
<DIV>Linear Gradient</DIV>

B. Color Stops
• Color can be added one (1) after the other, separated by a comma. The browser will then
determine each color stop position.
• For example:
• The CSS:
DIV {
float: left;
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background: linear-gradient(blue,
yellow, green, pink, white);
}
• The HTML:
<DIV>Multiple Colors</DIV>

• Color stop positions can be specified for each color.

• The CSS:
DIV {
float: left;
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background: linear-gradient(blue 20%,
yellow 30%, green 85%);
}

11 Handout 1 *Property of STI

 [email protected] Page 1 of 9
 SH1802

C. Direction of the Gradient

• The direction of the gradient can be changed.
• For example:
o The CSS:
div.first {
float: left;
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background:-webkit-linear-gradient(left, blue, green, white);
}
div.second {
float: left;
width: 300px;
height: 100px;
margin: 4px;
background:-webkit-linear-gradient(bottom, blue, green, white);
}

o The HTML:
<DIV CLASS="first">Left to Right</DIV>
<DIV CLASS="second">Bottom to Top</DIV>

D. 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.
o The CSS:
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);
}
o HTML:
<DIV class="first">Bottom Left</DIV>
<DIV class="second">100 deg</DIV>

11 Handout 1 *Property of STI

 [email protected] Page 2 of 9
 SH1802

E. Repeating a Linear-Gradient
• The repeating-linear-gradient() function is used to repeat a linear gradient.
o The CSS:
DIV {
float: left;
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background: repeating-linear-
gradient(blue, green 20px);
}
o HTML:
<DIV>Repeating Gradient</DIV>

II. Radial Gradients

A. Radial Gradients
• To create a radial gradient, you must define at least two (2) 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);

B. 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.
• For example:
o The CSS:
div.first {
height: 150px;
width: 200px;
color: #FFF;
background: -webkit-radial-gradient(green,
yellow, blue);
}
div.second {
height: 150px;
width: 200px;
color: #FFF;
background: -webkit-radial-gradient(circle,
green, yellow, blue);
}
o The HTML:
<DIV CLASS="first">Ellipse (Default)</DIV>
<BR />
<DIV CLASS="second">Circle</DIV>

11 Handout 1 *Property of STI

 [email protected] Page 3 of 9
 SH1802

C. 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, percentages
values, or some combination of these.
• For example:
o The CSS:
div.first {
height: 150px;
width: 200px;
color: #FFF;
background: -webkit-radial-gradient(top
left, green, yellow, blue);
}
div.second {
height: 150px;
width: 200px;
color: #FFF;
background: -webkit-radial-gradient(green
5%, yellow 15%, blue 60%);
}
o The HTML:
<DIV class="first">Top Left</DIV>
<BR />
<DIV CLASS="second">In Percentages</DIV>

D. 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 is a simple circular gradient with color stops:
o The CSS:
DIV{
height: 150px;
width: 200px;
color: #FFF;
background: -webkit-radial-gradient(circle, green 40%,
yellow 50%, blue 70%);
}
o The HTML:
<DIV>Color Stops</DIV>

III. CSS3 Background

A. 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:
o The CSS:
DIV {
height: 150px;
width: 200px;

11 Handout 1 *Property of STI

 [email protected] Page 4 of 9
 SH1802

border: 1px solid #000;

background:
url("http://www.sololearn.com/uploads/css_logo.png")
no-repeat 50% 50%;
background-size: 100px 100px;
}
o The HTML:
<DIV></DIV>

B. The background-size Values

• The two (2) other values for background-size are the keywords contain and cover.
• The contain keyword scales the image so that it fits the container.
o The CSS:
DIV {
height: 150px;
width: 200px;
border: 1px solid #000;
background:
url("http://www.sti.edu/uploads/css_logo.png")
no-repeat 50% 50%;
background-size: contain;
}
o The HTML:
<DIV></DIV>

• The 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.
o The CSS:
background-size: cover;
}

E. The background-clip Property

• The background-clip property specifies the painting area of the background.
• The property takes three (3) 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.
• For example:
o The CSS:
#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;
}

11 Handout 1 *Property of STI

 [email protected] Page 5 of 9
 SH1802

o The HTML:
<DIV ID="first">
<P>background-clip: padding-box</P>
</DIV>
<BR />
<DIV ID="second">
<P>background-clip: content-box</P>
</DIV>

D. Background-clip with Images

• The background-clip also applies to background images.
o The CSS:
DIV {
background-image: url("image.png");
background-clip: content-box;
border: 2px dotted black;
padding: 20px;
}
o The HTML:
<DIV>
<p>background-clip: content-box</p>
</DIV>

E. 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, and the last on the
bottom.
• For example:
o 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;
}
o The HTML:
<DIV></DIV>

IV. CSS3 Transitions

A. Transitions
• CSS3 transitions allow us to change from one (1) property value to another over a given
duration.
• transition-property - specifies the property to be transitioned.
• transition-duration - specifies the duration over which transitions should occur.
• transition-timing-function - specifies how the pace of the transition changes over its
duration.
• transition-delay - specifies the delay (in seconds) for the transition effect.

11 Handout 1 *Property of STI

 [email protected] Page 6 of 9
 SH1802

• For example:
o The CSS:
transition:transform 5s ease-in;

B. The Transition Property

• For example:
o The HTML:
<DIV></DIV>
o The CSS:
DIV {
width: 50px;
height: 50px;
background: #32CD32;
transition: width 3s;
}
DIV:hover {
width: 250px;
}

C. The transition-timing-function
• The transition-timing-function property specifies the speed curve of the transition
effect. It can have the following values:
• ease - the animation starts slowly, then accelerates quickly.
• ease-in - starts slowly, then accelerates, and stops abruptly.
• ease-out - starts quickly, but decelerates to a stop.
• ease-in-out - similar to ease, but with subtler acceleration and deceleration.
• linear - constant speed throughout the animation; often best for color or opacity changes.
• Finally, we have cubic-bezier(), which allows you to define your own values in the cubic-
bezier function. Possible values are numeric values from 0 to 1.
o The CSS:
width: 50px;
height: 50px;
background: #32CD32;
transition: width 3s;
transition-timing-function: cubic-bezier(0,0,1,1);
-webkit-transition: width 3s;
-webkit-transition-timing-function: cubic-bezier(0,0,1,1);
}
DIV:hover {
width: 250px;
}

V. CSS3 Transforms
A. The transform:rotate() Property
• CSS3 transforms allow you to translate, rotate, scale, and skew elements.
• A transformation is an effect that allows an element to change its shape, size, and
position.
• CSS3 supports 2D and 3D transformations. The following is an example of rotate
transformation.

11 Handout 1 *Property of STI

 [email protected] Page 7 of 9
 SH1802

o The CSS:
DIV {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
}
• Now let us apply the DIV element to rotate by 10deg.
o The CSS:
DIV {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(10deg);
}

B. Using Negative Values

• As previously mentioned, using a positive value will rotate an element clockwise, and
using a negative value will rotate the element counter-clockwise.
o The CSS:
DIV.positive {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(10deg);
}
DIV.negative {
width: 200px;
height: 100px;
margin-top: 30px;
background-color: #32CD32;
transform: rotate(-10deg);
}

C. The scale() Method

• The scale() method increases or decreases the size of an element according to the
parameters given for the width and height. 1 stands for the original size, 2 for twice the
original size, and so on.
o The HTML:
<DIV CLASS="first"></DIV>
<br />
<DIV CLASS="second"></DIV>
o The CSS:
DIV.first {
width: 200px;
height: 100px;
background-color: #8BC34A;
transform: scale(0.7, 0.7);
color:white;
}
DIV.second {

11 Handout 1 *Property of STI

 [email protected] Page 8 of 9
 SH1802

margin: 60px;
width: 200px;
height: 100px;
background-color: #8bc34a;
transform: scale(1.5,1.5);
color:white;
}

D. Multiple Transforms
• Multiple transforms can be used at once. Rotating and scaling the size of an element at the
same time is an example of multiple transforms.
• Here is an example with two (2) transforms defined:
o The CSS:
DIV{
width: 200px;
height: 100px;
background-color: #8BC34A;
transform: rotate(45deg) translate(100px);
-webkit-transform: rotate(45deg)
translate(100px);
color:white;
}

References
SoloLearn. (n.d.). HTML. Retrieved on July 19, 2018, from https://www.sololearn.com/Play/HTML
Beaird, J. & George, J. (2014). The principles of beautiful web design. Collingwood, AU: SitePoint
Pty. Ltd.

11 Handout 1 *Property of STI

 [email protected] Page 9 of 9