Written by Andrei MoraruNov 03, 2020

"Learning CSS with Less" technical tutorial series gets better and better with each article. Each part of this series comes as a new puzzle piece from a whole - and we really feel that the passion and dedication with which Andrei formed this course are the keys that will make this puzzle a successful one in the end. 

We created the Technical Blog section out of a desire to share the knowledge gathered over the years of hard work by senior developers from our community - helping you become one of the top 1% of software developers in the world. 

Note: You can find the other chapters of the course in the Tech section of our blog - here.

Now... Let's discover the next part of "Learning CSS with Less". Enjoy!

  1. Topics of discussion
  2. CSS effects
  3. CSS animations

1. Topics of discussion

In this tutorial, we are going to discuss some ways in which you can use CSS to create some cool effects and animations. So, let's have some fun.

2. CSS effects

To try and tell you about all the possible effects you can create with CSS would be a disservice to all the people who have created CSS effects libraries for anyone to use.

However, it's important to talk about them for a bit because this way, we can learn about some new CSS properties that can be used to create some effects.

One of the most common effects used on elements is adding a shadow to them. This can be obtained by using the box-shadow CSS property. Let's take a look at the values for this property, since it requires at least 3:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]

Let's take a look at what those values mean:

Here is a code example:

  
    
    
 
  

And here is the CSS:

.shadow-container {
  width: 100px;
  height: 100px;
  padding: 20px;
  box-shadow: 5px 5px 5px 0 rgb(100, 100, 100);
  border: 1px solid black;
}

Make sure you play around with the values to see the different behaviors for this property. Also worth noting is that you can have an inner shadow by adding the inset keyword as the first value:

box-shadow: inset [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]

Another cool effect you can create is a gradient background. This can be done by using the linear-gradient CSS function, like so:

.linear-container {
  background: linear-gradient(red 10%, 30%, blue 90%);
  width: 100px;
  height: 100px;
}

By default, the gradient is going to go from top to bottom, but that can be changed, by adding a direction, which can be specified by giving it an actual direction keyword (e.g. to rightto left etc.) or an angle (e.g. 135deg45deg etc.).

Color-wise, you can specify any color and some percentage values. When you have a group of color percentages, the percentage determines the point where the color starts changing. When you add an extra unlabeled percentage like in the example above, that changes the midpoint of the transition.

The idea is that colors transition from one another in a smooth fashion. In our example above, the midpoint of the transition, which would be the place where red and blue are found in an equal amount, would be 50%. However, since we added that extra percentage value, that changed the midpoint to 30%.

Of course, you can have as many colors in there as you like. Here is a more complex example:

.linear-container {
  background: linear-gradient(to right, red 10%, green 30%, blue 50%, yellow 70%, brown 90%);
  width: 100px;
  height: 100px;
}

3. CSS animations

Aside from effects, you can also create animations in CSS. Creating animations is fairly easy. You make use of the animation CSS property, which is a shorthand for abunch of other animation related properties which we will go through shortly.

Note that for each animation you are creating, you have to create a corresponding @keyframes block in which you define what happens at certain points of the animation. This will become clear with an example, so don't worry.

Let's go through the animation-related properties now:

Here is some very basic CSS animation example:

@keyframes test {
  from {background-color: blue;}
  to {background-color: red;}
}

.animation-container {
  width: 100px;
  height: 100px;
  animation: test 3s ease-in normal infinite forwards running;
}

Of course, you can animate just about anything from width to height, to background, you name it. There are plenty of examples out there should you look for inspiration.

And that about covers it for this tutorial. In the next one, we are going to conclude this course and take a look at everything we have learned. See you then.

 

Whether you are in the product discovery phase or are looking for a partner to launch your software development project, CONTACT US! We’re happy to help you discover the advantages of a dedicated remote team!