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.
…

CSS layout properties may intimidate you, especially if you’re learning web development for the first time. Especially the position property. Some even claim it’s an advanced subject. Nevertheless, it is essential to understand how CSS affects the alignment of elements on the page. CSS allows a few different methods for positioning elements, and the most common are position, float, and display. We discussed the display property that specifies the display behavior of an element in the previous article, but this time we will learn more about the CSS property, called position. We will learn what position property is, the types, how they affect the position of an element on a page, how they compare to each other, and most of all what is the typical use for each position property. Let’s get started!

…

This article will take you to the very basics of CSS layout. We will look into a display property, which defines the display behavior of an element – if and how the element is positioned in a layout. Every HTML element has a default display value depending on what type of element it is, and the default display value for most elements is either inline or block. We will present a way to create boxes that can (or not) be displayed side by side, that wrap the way we expect them to wrap or to be positioned in the next line. Layouts that we used to create with floats, are now possible with a display property, so we don’t have to clear the floats.
We will explain the difference between display: inline vs inline-block vs block with examples, and will also list a few best practices and when to use each.
…

This article will take you to the very beginning of working with a grid layout. We will present a super simple code for the layout of the page. We will start with a mobile view first and include a media query for a desktop version. We will go through the code and explain why we did this and that. Let’s start at the beginning, but first, let’s take a look at how our page is constructed.
…