As you probably know Bootstrap is CSS framework or toolkit. It can help you speed up building HTML templates or pages by making a set of CSS classes and JavaScript. However, you need to invest some time to get familiar with it. Is that time investment justified when considering end result? And if yes should you use Bootstrap’s version 4 or 5? Let’s find out.

…

With the CSS transform property, you can apply a 2D or 3D transformation to an HTML element. You can visually control an element by moving, rotating, scaling, or tilting it, and even adjusting the perspective for a 3D transformed element. This article will take you through the CSS transform property – you will learn everything you need to know about 2D and 3D transformations through a few examples. Let’s start.
…

This article will present you with the very basics of CSS – how to add multiple background images to one element. During that process we will take a peek at three other background properties that can be closely connected to the multilayering of images in CSS – in our case background-position, background-size and background-repeat. We’ve already written about background property in detail and you can find more information about it in A complete guide to CSS background property with values explained through examples.
…

The first SVG animation was developed in the late ’90s, and then at the beginning of a millennium, the first browsers started to support them, until in 2011 all major web browsers covered SVG animations. The release of SVG2 happened not long ago, in 2018, and since then, we witness a rise in the popularity of SVG animations in JavaScript and HTML5.
…

This is one of the simplest animations there are. We will animate the <p> element and will make that the text inside the element slide in the user’s view from the left edge of the browser window to the right.
…

CSS animations are not new. They have been around for more than 10 years. CSS animations make it possible to animate HTML elements without using JavaScript or Flash! And this is one of their main advantages. They are super easy to use – you don’t even need to know JavaScript or any other animation technique that is script-driven. The CSS animations have a relatively good performance – at least compared to those in JavaScript, because the rendering engine uses frame-skipping and other techniques to keep the performance as smooth as possible. In addition to that, since the browser controls the animation sequence, the browser is also the one that optimizes performance and efficiency. For example, when the user has several open tabs but is not viewing the tab with animation, the browser will reduce the update frequency of animations. So, yes, CSS animations are great and are in general well supported by newer browsers. However, there are performance issues. There are four things modern browsers can animate without any problems: position, scale, rotation and opacity. However, if you animate anything else, it’s at your own risk.
In this tutorial, we will go through the animation shorthand property and we will explain all 8 subproperties and their values through examples.
…

You know how to declare a background color of an element, right? background-color: red; Boom, let’s go, we have a red background. As simple as that. So, just as you declare a solid color in CSS to the background of an element, (almost) the same way you also declare that background of an element should be a gradient. CSS gradients are smooth transitions between two or more colors – one color that fades into another. And CSS is a great tool to help you control how that color transition happens – how many colors you want to be included, where exactly will the transition happen, will it be super smooth, will it be linear, go down, up, or diagonal, will it be radial, what angle will the color change take, or will the transition repeat. Yes, of course, you can do all that with an actual image file with a help of Photoshop or whatever program you use, but applying gradients through CSS declarations gives you much better control. All that and more we will learn in this simple guide to linear and radial gradients in CSS. Let’s start.
…

We talked about linear gradients in our previous post and if you would like to know more about them and learn a few tricks and how to control them, please read a complete guide to linear gradients in css. In this tutorial, however, we will learn radial gradients and discover how they are different from linear and apply the knowledge we have absorbed so far. Let’s start.
…

CSS gradients are smooth transitions between two or more colors – one color that fades into another. And CSS is a great tool to help you control how that color transition happens – how many colors you want to be included, where exactly will the transition happen, will it be super smooth, will it be linear, go down, up, or diagonal, will it be radial, what angle will the color change take, or will the transition repeat. Yes, of course, you can do all that with an actual image file with a help of Photoshop or whatever program you use, but applying gradients through CSS declarations gives you much better control.

This tutorial will cover only linear gradients, but if you want to learn more about radial gradients, you should take a look at this tutorial. Let’s start.

…

The background property in CSS is used to add the background effect(s) for any element – as a matter of fact – what is underneath the content of that element. It’s a shorthand property, so you can write properties in one single line instead of listing multiple properties.
…