Deep Tech Point
first stop in your tech adventure
Home / CSS
September 24, 2021 | CSS

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.

September 14, 2021 | CSS

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.

September 11, 2021 | CSS

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.

September 7, 2021 | CSS

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.

September 4, 2021 | CSS

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.

September 1, 2021 | CSS

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.

August 28, 2021 | CSS

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.

August 24, 2021 | CSS

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.

August 20, 2021 | CSS

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.

How do I create linear gradients?

If you want to create a gradient, you must include at least two color stops – where the specified color is “pure” – the basic syntax is the following:

background-image: linear-gradient(direction the transition takes, color-stop1, color-stop2, ...);

The example below is super simple and it takes the default direction of a linear gradient, which is from top to bottom, but you can control the direction of transition, the starting point of a color change, or an angle of transition however you want.

.my-gradient {
  background-image: linear-gradient(aquamarine, whitesmoke);
}

How to include more than two colors in a linear gradient?

.my-gradient {
  background-image: linear-gradient(aquamarine, whitesmoke, gray);
}

The example above is again super simple and it takes the default direction of a linear gradient, which is from top to bottom, starts with pure aquamarine at 0%, which is at the very top, reaches whitesmoke in the very middle of the background, and changes to a solid gray at the very bottom.

Use keywords to control the direction of a linear gradient

If you want to control the direction, include the keyword “direction the transition takes”. Let’s say a linear gradient starts aquamarine from the left and changes to whitesmoke on the right side, simply use the keyword “to right”:

.my-gradient {
  background-image: linear-gradient(to right, aquamarine, whitesmoke);
}

Replace “to right” with “to top” and solid color aquamarine will be positioned at the very bottom and solid whitesmoke at the very top of the background. Between them, a smooth transition will happen.

You can also create diagonal transitions by using keywords such as to top right – so at the left bottom corner, we will have aquamarine background changing to whitesmoke in the top right corner, as simple as that.

.my-gradient {
  background-image: linear-gradient(to top right, aquamarine, whitesmoke);
}

Use angles to have even more control over the direction of the gradient

Instead of using “direction keywords”, you can use angles, and you can express them with degrees. Imagine a circle – it has 360 degrees – we will apply that logic and express “direction keywords” with angles:

  • 0deg = to top
  • 90deg = to right
  • 180deg = to bottom
  • 270deg = to left

Obviously, we can use whatever angle between 0 and 359 (0 degrees = 360 degrees) we want – that’s the point of using degrees. The syntax is very similar to the basic one:

.my-gradient {
background-image: linear-gradient(225deg, aquamarine, whitesmoke);
}

The example above will take the exact “to bottom left” direction.

You can also include transparency in gradients

As you probably already know, if we want to achieve transparency, we have to use rgba color values – these are just an extension of RGB color values with “a” that represents an alpha channel, which is the one that specifies the opacity for a color. “a” ranges from 0 to 1, where 0 means total transparency, and 1 stands for a color that is fully opaque, so no transparency at all. So, basically, we can include in a gradient a color that is transparent and one that is not, just use the rgba() function to define the color stops, as simple as that.

What if I want to control where I want a particular color to start?

Easy peasy. We are talking about “color-stops” here – where the color is “pure”. Let’s say you want aquamarine only a little bit at the beginning of the background and whitesmoke to take up the majority of the space. This means you should position the whitesmoke color-stop very early, let’s say at 5%:

.my-gradient {
  background-image: linear-gradient(to right, aquamarine, whitesmoke 5%);
}

The percentages are color stops that declare where colors start. Values of 0% and 100% are automatically assigned to the first and last colors, this is why the first and last color stops do not require percentage and don’t specify a location. In our case, aquamarine has 0% – if the percentage of the first color-stop is not defined, it is 0% and if the last color-stop is not defined – it is 100%). Whitesmoke has 5% declared, which means that the whitesmoke color-stop will be pure at 5% of the distance from 0% (from the left side because we are creating a gradient from left to the right). The colors between 0% and 5% are some combination of aquamarine and whitesmoke.

Let’s add one more color to the mix and see what’s going on here:

.my-gradient {
  background-image: linear-gradient(to right, aquamarine, whitesmoke 5%, gray 130%);
}

Basically, the beginning of the mix is the same – we start with aquamarine at 0% are reach whitesmoke at 5% background width, but the whitesmoke quickly starts changing to gray – between 5% and 130% we have a combination of whitesmoke and gray. However pure gray is not visible because it is placed outside the visible area of the background at 130% at the right.
If you would like to have whitesmoke a bit more space in the gradient, you can declare one more whitesmoke color-stop between 5% and 130% – wherever you want the color to be distributed.

How can I create columns with an instant color transition?

You have to declare two color stops with the same percentage and the transition between colors will be instant – one solid color will instantly change to another solid color. This can be useful for declaring a full-height background that simulates columns. The code below will produce columns (no gradient) – because the % is the same for both color-stops. At 10% of the width of a background – aquamarine will instantly change to whitesmoke.

.my-gradient {
  background-image: linear-gradient(to right, aquamarine 10%, whitesmoke 10%);
}

How to create a repeating linear gradient?

First of all, you can repeat a linear gradient under a specific angle, just use degrees (as specified above) or “direction keyword”.
Second, if you want your background gradient to repeat you have to specify the percentages. The smaller the percentages, the more time the pattern will repeat:

.my-gradient {
  background-image: repeating-linear-gradient(to right, aquamarine 0%, whitesmoke 7%, gray 30%);
}

In the code above we will start with pure aquamarine at 0% of the width – at the very left of the background, we will achieve pure whitesmoke at 7% of the width, and pure gray at 30% width of the background. Afterward, that same pattern will repeat. The smaller the numbers of percentages, the more time the pattern will repeat.

How can I change how the gradient will move from one color to another?

That is called a color-hint – it declares how the gradient will move from one color to another. The length, which can be expressed either in percentages or length units, defines at which point between two color stops the gradient color should reach the midpoint of the color transition. The default midpoint of the color transition is the midpoint between two color stops (it’s 50%). In our example, the .my-gradient transitions evenly from one color to the next.

.my-gradient {
  background: linear-gradient(aquamarine, whitesmoke);
}

However, you can change that – in the example showing .my-gradient-with-color-hint we tweaked color hits and changed the gradient transition to 10%:

.my-gradient-with-color-hint {
  background: linear-gradient(aquamarine, 10%, whitesmoke);
}
August 16, 2021 | CSS

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.