HTML & CSS – Gradients and Transitions

Hello all, this week we went a little bit deeper inside CSS color and performance. Nowadays, CSS3 has allowed us to modify any background page just specifying the color within CSS, instead to upload an image file, as was practiced before.

Using CSS3 gradients, we can define transitions between two or more colors at the same time. There are two types of transitions in CSS3: Linear Gradients and Radial Gradients. Both we can define the percentage of each radial-gradient colors and space color stops. Also in linear gradients we can establish color directions and transparency.

Linear Gradient – to bottom

Linear Gradient – to left

Linear Gradient – to right

Linear Gradient – mix colors

Radial Gradient

Radial Gradient

Using CSS3 transition effects, we can add some animation in those elements. They move one property value to another pre-established it. It can be used in many CSS properties, such as width, height, color and gradients.

Transition – before

Transition – after