Basic Course Information

Creating Art with CSS

We will begin learning about CSS gradients and all of the different types available for use. We will then proceed to learn about CSS Animation and how we can use that to manipulate HTML elements. Play around with the provided examples and make sure you complete all of the exercises at the end of the section.

Note. We use a lot of Codepen examples in this course to help you understand the material. To view the CSS animation examples in action, click "rerun" in the bottom right corner of the pen.

CSS Gradients

Types of Gradients

In CSS we can use gradients to add color and dimension to our HTML elements. There are 3 types of CSS gradients:

• Linear gradients
• Radial gradients
• Conic gradients

You can apply gradients to the background of any HTML element that is visible on the screen. The basic CSS to apply a gradient to a div for example, would be:

			
		CSS:
		
		div{
			width:300px;
			height:300px;
			background: gradient-type(color,color);
		}
	

Linear Gradients

At its most basic, linear gradients display at least 2 colors blending into each other. However, you can control the position of the colors, and the direction that the gradient goes in. This can be used to give a 3D effect or pattern to HTML elements, and can draw attention to certain elements versus others on the web page.

The basic format for a linear-gradient is:

Direction

We can control the direction the gradient is going in by giving it a degree value in the first parameter of the gradient function. The degrees you can use range from 0-360deg, you can see how it is used in the example below.

linear-gradient(numberdeg,red,yellow);

Examples

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

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

You can also explicitly write where you want the direction of the gradient to go. If you would like the end of the gradient to flow to the top right of your HTML element, you would write for it to go "to top right".

linear-gradient(to top right, red, yellow);

If you would like the gradient to flow straight to the bottom, you would tell it to go "to bottom"

linear-gradient(to bottom, red, yellow);

Position

In gradients, sometimes we don't want to have the colors evenly spread out across the HTML element. We might want one color to start at the top of the element, but the rest of the colors to start much farther from the first color. By writing percentages next to each color, we can position our colors to go where we please.

An important thing to note is the level of blending that occurs between colors at different ranges. With one color starting at 10%, and the neighboring color starting at 90%, there will be a good amount of blending between the 2 colors. However, the closer these numbers are to each other, the more minimal the blending, and the line between the two colors becomes sharper. For example, look at the difference between
linear-gradient(red 10%, yellow 90%);
and
linear-gradient(red 40%, yellow 60%);

Here is another example with 3 colors. As you can see, red and yellow have a firm line between them. But, since blue is set at 90% farther away from the yellow, there is a larger amount of blending between blue and yellow.

We can also use pixels instead of percentages. For example, if we wanted to create the same gradient effect above, we could do background:linear-gradient(red 120px, yellow 135px, blue 270px); Since the square is 300px long, 120px is 40% of the div, 135px is 45% of the div, and so on.

Here are some examples of gradients using the basic format, as well as the direction and position attributes.

See the Pen Linear Gradients by Gabriela Johnson (@gabrielajohnson) on CodePen.

Repeating Linear Gradients

You can also create a repeating-linear-gradient. By putting numbers next to each color in a repeating-linear-gradient, the gradient will repeat until the end of the element. The closer the numbers are to each, the smaller the gradient and the more it will repeat. The opposite is true if the numbers are farther apart, please view the example below.

See the Pen repeating-linear-gradient by Gabriela Johnson (@gabrielajohnson) on CodePen.

Radial Gradients

The radial gradient has its colors expanding from its origin in a circle or ellipse shape. The origin by default is the center of the HTML element, but you can also change the position of the origin.

The basic format for a radial-gradient is:

Size

You can control the size of the gradient circle by using these 4 attributes below:

• closest-side
• closest-corner
• farthest-side
• farthest-corner

View the codepen below to view the differences. For full explanations of these properties, view this page Radial Gradients.

See the Pen Radila Gradients - closest to farthest side by Gabriela Johnson (@gabrielajohnson) on CodePen.

Origin

The origin of a radial gradient can be changed by first setting the gradient shape as a circle or an ellipse, followed by its position in the HTML element. This location can be distinguished by descriptive words such as "center", shown below, or by percentages indicating x and y values.

Format:

Examples

• radial-gradient(circle at center, yellow, blue)
• radial-gradient(ellipse at center, yellow, blue)
• radial-gradient(circle at 0% 50%, yellow, blue)
• radial-gradient(ellipse at 20%% 75% yellow, blue)

See the Pen Radial Gradients - Origin position by Gabriela Johnson (@gabrielajohnson) on CodePen.

Repeating Radial Gradients

You can also create a repeating-radial-gradient. This works the same as a repeating linear gradient, where you can use numbers next to the colors to control the amount of times the gradient rings repeat. If the numbers are close together, the rings will be smaller and repeat more. If they are far apart, the rings will be larger and repeat less.

See the Pen repeating-radial-gradient by Gabriela Johnson (@gabrielajohnson) on CodePen.

Conic Gradients

Conic gradients display your chosen colors around an origin point, this is particularly useful for creating pie charts.

To customize a conic gradient you can move the origin of the gradient, and how far the colors extend using deg, grad, turn and rad. When extending the gradients, instead of using a percentage for each color like in a linear gradient, you will use 2 numbers to denote the start and end of the color in the gradient. You can view this example in "Determining Color Range" below. The range of degrees available for use range from 0-360, around the origin of the conic gradient. However, for the first and last color, you can just use 1 number to denote the range. This is because the degrees used in the color after the first color, and the degrees used in the color before the last color, complete the range for that color. Here are the other code formats below.

Standard Conic Gradient

conic-gradient(color,color);

Examples

Determining Color Range

conic-gradient(color start end, color start end);

Examples

• conic-gradient(red 20deg 30deg, blue 30deg 100deg);
• conic-gradient(yellow 90deg, violet 0.75turn 1.0turn, green 300grad);

Changing the Origin

• conic-gradient(from 0.75turn at 20% 70%, blue, green, purple);
• conic-gradient(from 0deg at 25% 50%,red 10rad, orange 30deg, yellow);

See the Pen Conic Gradients by Gabriela Johnson (@gabrielajohnson) on CodePen.

Background Properties

Now that we have reviewed gradients, let us move on to background properties. Background properties are helpful in customizing your gradients even further. We won't go too in depth into each property in this course, but we will focus on the position, size, and repeat properties.

• background-color: The color used for the background of the HTML element.
• background-image: The image used for the background of the HTML element.
• background-position: Controls the position of the background within the element.
• background-size: Controls the size of the background in the element, usually used to determine if the background should cover the entirety or only a portion of the HTML element.
• background-repeat: Controls if the background repeats horizontally, vertically, both or not at all. The properties used for this are repeat-x,repeat-y,repeat, and no-repeat
• background-origin: Controls whether the background image starts from the upper left corner of the padding box, border-box, or content-box
• background-clip: Controls how far the background will extend within or beyond the edge of the HTML element.
• background-attachment: Controls if the background will or will not scroll with the page.

For more information and examples of background properties, please go to this page

The properties background-position, background-size and background-repeat can be particularly useful in implementing drastic changes to a background. Please view the example below of these properties in use.

See the Pen Background properties by Gabriela Johnson (@gabrielajohnson) on CodePen.

Layering Gradients

As you probably saw in the example above, the 4th div uses 2 gradients and background properties to create its T shape effect. Layering Gradients are incredibly useful, and really open up the possibilities for designing your future webpages.

Here is the code format for layering gradients:

As you can see, every gradient is separated by a comma.

Here are 3 things you should take away from layering gradients:

• The first gradient in the list is the one on top
• You can layer any gradient type on top of each other
• Use transparent or less opaque colors in top gradients so you can see the gradients underneath.

Please view the example below and observe how the background properties affect the layered gradients.

See the Pen Layering Gradients by Gabriela Johnson (@gabrielajohnson) on CodePen.

CSS Gradient Exercises

1. Apply a linear, radial or conic gradient to an HTML element. Use at least 3 colors, and use percentages or pixels to change the position of the colors.

2. Layer at least 2 gradients onto an HTML element. Use either background-size, background-position or background-repeat to further customize the gradient.

Create these exercises on Codepen, once you are done submit the links here.

CSS Animation

CSS Animations are a great way to add pizazz to any site. There are several animatable properties that you can find listed in the link below such as the background, text color, border radius and other properties of an HTML element. You can also move, rotate and change the shape of the element itself.

Please view the video below for a quick intro into CSS Animation.

Animatable CSS properties List

CSS Animation Format

Below is the basic code format to apply an animation to an element. For the animation property, you can set the name of the animation first, then the duration of the animation in seconds.

As you can see, the keyframe animation is split up into two frames that occur at 0% and 100%. Since the animation duration is 4s, that means that the frame at 0% will play right when the animation starts, and the frame at 100% will play at the end of the animation. You can add as many frames as you want using percentages. Here are some more examples below.

Animation Properties

You can use these properties below to control the timing, length and other aspects of your animation. You would place these properties inside the CSS of the element you are animating.

• animation-name: The name of the animation.
• animation-duration: How long the animation lasts.
• animation-delay: How many seconds pass before the animation starts.
• animation-iteration-count: How many times the animation plays.
• animation-direction: Determines whether the animation plays forwards, in reverse, alternate(forwards then backwards) or alternate-reverse(backwards then forwards).
• animation-timing-function: Determines the speed curve the animation plays at.

  There are several of these properties:

  • ease - (Default setting) Animation begins slowly, quickens, then ends slowly
  • linear - Same speed throughout
  • ease-in - Slow beginning
  • ease-out - Slow end
  • ease-in-out - Slow beginning and end
  • cubic-bezier(n,n,n,n) - Custom easing function, different numbers in each slot denote how fast or slow the animation will go at that point in the animation

  Other properties include step-start, step-end, and steps(n,n), but we will not be covering them in this course.

• animation-fill-mode: Determines what the element will look like before and after the animation.
• Forwards: The element will keep the stylings from the end of the animation.
• Backwards: The element will keep the stylings from the beginning of the animation.
• Both: The element follows the rules for both forwards and backwards.
• animation: Instead of writing out all properties individually, you can use this property as a shorthand. The properties would go in this order:
  animation: name duration timing-function delay iteration-count direction fill-mode play-state;

CSS Transform

Transforming elements allows you to move, rotate, and change the size and visual look of an element. Here are the 4 different transform properties below.

• translate
• rotate
• scale
• skew

Note. In all of the examples below, I will also be animating the background-color and border-radius of some of the elements so you can also be exposed to other animatable properties and how they work.

Translate

The translate function moves an element left, right, up, down, forward and backward. Put differently, along the x, y and z axis.

Here are the 5 translate functions

• translate(x,y,z);
• translate3d(x,y,z);
• translateX(value);
• translateY(value);
• translateZ(value);

Please click "rerun" to view the example below.

See the Pen Translate by Gabriela Johnson (@gabrielajohnson) on CodePen.

Rotate

The rotate function can rotate the element along the x, y and z plane. You can use degrees to control the rotation. Please click "rerun" to view the example below.

See the Pen ExPvraR by Gabriela Johnson (@gabrielajohnson) on CodePen.

Scale

Instead of decreasing the size of the shapes by percentages like we use in other functions, we use numbers. If you were to scale an element using scale(1), the element would stay the same size. If you wrote scale(2), the element would double in size by its width and height. Similarly, if you used -1 or -2 to denote the size, the scale would be the same, but the element would reverse itself.

If you would like to just scale the width of the element larger, you would use either scaleX(2) or scale(2,1). The same concept applies for changing the height.

The format for all 3 scale functions are below.

• scaleX(x)
• scaleY(y)
• scale(x,y)

Please view the examples of scale in action below:

See the Pen Scale by Gabriela Johnson (@gabrielajohnson) on CodePen.

Skew

The skew function skews the html element by its width and height. You can use the number measurements deg, turn and, rad to manipulate the skew. Please view an example of how to use skew below, and how it makes the element appear.

@keyframes moveUp{
    50%{
        transform: translateX(200px);
    }
    100%{
        Transform: translateX(300px) rotateX(20deg);
    }
}