Deep Tech Point
first stop in your tech adventure
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.

August 13, 2021 | CSS

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!

What is position property?

The position property sets how an element is positioned in a document. It goes hand in hand with the top, right, bottom, left, and z-index position properties and helps you manipulate the final position or location of an element. If you want, you can always check the position of an element of your choice through the browser dev tools, just go to the Styles panel and choose computed and search for the position.
The position property can take five values:

  • static
  • relative
  • absolute
  • fixed
  • sticky

Let’s discuss each of them and see how each value determines how an element is positioned in a document.

1. position: static

Position: static is the default value for every HTML element on the page. It means that an element is positioned according to the normal page flow. Position property won’t be affected by properties that can make an impact on other CSS position types, so if there are left, right, top, bottom, and z-index properties set, they will not affect an element with position: static.

  • the default value for every HTML element
  • respects the normal render flow
  • not affect by left, right, top, bottom, and z-index properties

The practical use of position: static

Statically positioned elements (in technical terms these elements are not positioned at all) represent the default value for all elements. In practice, this will work in more than 99% of cases of web development, especially if you’re developing standard websites.

2. position: relative

What the relative position really means is “relative to itself”. It is actually just like the static position, however relative to its static default position this value uses the advantage of using top, right, bottom, left and z-index to determine the final position.
If you set relative position on an element without at least one of the positioning attributes (top, right, bottom, left), the defined position will not affect the element’s positioning at all, and it will stay exactly as it would be if you left the default static position.
In simplified terms, just like with the static value, an element’s original position still follows the render flow of the document, but the properties of top, right, bottom, left and z-index move the element from the original position – they relocate it relative to its initial position. When we want to specify the amount of offset to an element, we need to set the values for at least one of the values, either top, right, bottom, left, or z-index value. However, notice – there will be extra space where the element would have been. Therefore, the offset we specify will not influence the position of any other element on the page. Consequently, the space given to the element in the page layout is the same as if the position was static.
In practice, for example, if you give a relatively positioned element a positioning attribute top: 100px, it will move the element 100px down from where it would be and will leave that extra space where the element would have been if we hadn’t moved it. The moved element doesn’t influence the position of any other element on the page. Even if you don’t set a z-index value, the relatively positioned element will now appear on top of any other statically positioned element, in the example above it will appear above the element that is positioned below (if it’s positioned close enough). This is called a stacking effect, very similar to creating a set of layers that are stacked based on the element with the specified z-index. You can’t fight it by setting a higher z-index value on a statically positioned element, because a statically positioned element doesn’t accept position attributes. So, if you want to avoid that stacking context, we need to set that value to auto.

  • similar to the static position
  • respects the normal render flow
  • left, right, top, bottom, and z-index offsets have an effect
  • extra space left where the element would have been without offset
  • does not influence the position of any other element on the page

The practical use of absolute position: relative

In practice, you will probably use position: relative to “fix position” of elements that do not line up how they should, or at least you would want them to line up (we’re talking about one or two pixels nudge).
Relative positioning could be also used for animation on elements that are statically positioned until JavaScript gets involved. This way we establishing a containing block for absolute positioning so the element itself isn’t moved at all.
It can also be applied to an element when we know the inner element of that element is going to be positioned absolutely. For example, when we have two divs and the outside div is a static block and elements inside the outer div are going to be positioned: absolute relative to the outer div. Then we use position: relative for the outer div and inner div should use position: absolute. Now the inner div elements can be placed anywhere using top, right, bottom, and left attributes of CSS.

3. position: absolute

Absolutely positioned elements are closely connected to their parents. Rather than being positioned according to the viewport, absolute elements are positioned relative to the nearest positioned ancestor (which means that the parent element has to have a position value other than the default position: static). If their closest positioned ancestor does not have that position, an absolute element is positioned relative to the next parent element that is positioned (other than static). And if even that is not the case, the absolute element will be placed relative to the initial containing block and will move with scrolling.
The element with absolute position is removed from the normal document flow. No space is created for that element in the page layout and other elements behave as if that element is not in the document – like the absolute element never existed in the first place – and this is probably the biggest trade-off with absolutely positioned elements. An element with this type of positioning is not affected by other elements and it doesn’t affect other elements. This is a serious thing to consider every time you use absolute positioning. Its overuse or improper use can limit the flexibility of your site.
All the other positional properties – the values of left, top, bottom, right, and z-index will work on the element with absolute position and will determine the final position of the element. If the value of the z-index is not auto, it will create a stacking context.
By default, absolutely positioned elements span 100% of the width of their parent element and are as tall as their child content. The total width and height is their content + padding + border width/height. It is useful to know that absolutely positioned boxes margins do not collapse with other margins.

  • removed from the normal document flow
  • no space is created for that element in the page layout
  • other elements behave as if that element is not in the document
  • the values of left, top, bottom, right, and z-index work and determine the final position
  • positioned relative to the nearest positioned ancestor
  • if there isn’t any positioned ancestor, it is placed relative to the initial containing block

The practical use of absolute position: absolute

The practical use of absolute positioning is quite rigid and makes it difficult to write layouts that respond well to changing content because they are too explicit. However, absolute positioning comes in handy, if you require freely moving elements around a page, such as drag and drop situations. Another example is when you need to overlay elements on top of each other or other layout techniques that would benefit from working on a coordinate system. An example of a chessboard game is a fine reason to use it. An undervalued benefit of absolute positioning is that it allows localized absolute positioning within the nearest positioned (not positioned: static) parent element. Absolute positioning offers precise control over nested elements on a page, without sacrificing the overall page layout.
However, when developing a more standard website, such as a site providing some publicly available service, absolute positioning overrides the default flow layout of browsers and so will reduce accessibility for many users, so it is better to avoid it.

4. position: fixed

Compared to the relative position, the position: fixed does not respect the normal render flow and doesn’t leave any space where the element would have been located in the page layout. A fixed position will force the element to be positioned relative to the viewport (the screen the user can see) – this way the element will stay fixed even if the page is scrolled. The fixed element is positioned relative to the viewport except when one of its ancestors has a transform, perspective, or filter property set to something other than none, and in that case, that ancestor behaves as the containing block.
Compared to the elements that have an absolute position, the fixed positioned elements are removed from the flow of the document too, but unlike absolutely positioned elements, they are always relative to the document and not any particular parent. The scrolling does not affect them, which means they always stay in the same place even if the page is scrolled.
With position: fixed we automatically achieve a new stacking context, and we need to use the top, right, bottom and left values to determine the element’s final position. In printed documents, the element is placed in the same position on every page.

  • similar to absolute position
  • does not respect the normal render flow
  • doesn’t leave any space where the element would have been located in the page layout
  • causes the element to be positioned relative to the viewport and not the parent (like absolute)
  • stays in the same place (creates a “floating” element) even if the page is scrolled

The practical use of absolute position: fixed

Position: fixed is often applied for a navigation bar because you want it to remain visible at all times regardless of the page scroll position. However, there is one concern with fixed positioning, if there isn’t enough space available – it can cause situations where the fixed element overlaps content in a way it becomes inaccessible.

5. position: sticky

Element with a sticky position presents a mix, a sort of compromise between relative and fixed positions – as a result, the element is “stuck” when necessary while scrolling. That means a sticky element acts like a relatively positioned element to anything on the document (it is positioned according to the normal flow of the document) until the scroll location of the viewport reaches a specified threshold – a certain scroll point on the screen – and after that point, the sticky element acts as a fixed element – it takes a fixed position where it remains persistently displayed. From that point, a stickily positioned element is offset relative to its nearest scrolling ancestor and nearest block-level ancestor, including table-related elements, based on the values of top, right, bottom, and left. The element offset does not affect the position of any other elements.
In simple terms, the sticky element depends on the user’s scroll – on how far the user has scrolled – at first, it behaves like a relative element and after the viewport meets a specified position it gets “fixed” in a spot. A sticky element “sticks” to its nearest ancestor that has a “scrolling mechanism” (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn’t the nearest actually scrolling ancestor.

  • a mix between relative and fixed positions
  • depends on how far the user has scrolled
  • acts as a relatively positioned element to anything on the document until a certain scroll point on the screen
  • after that point, the sticky element takes a fixed position
  • at least one of the top, right, bottom or left positions must be defined
  • Internet Explorer does not support position: sticky

The practical use of absolute position: sticky

Stickily positioned elements always create a new stacking context, so stick elements are predominantly used for keeping something shown on the screen throughout scrolling, and we can also hide elements in the same way. A common use for sticky positioning is for the headings in an alphabetized list. For example, The “B” heading will appear just below the items that begin with “A” until they are scrolled offscreen. And then the “B” heading will remain fixed to the top of the viewport until all “B” items have scrolled offscreen, and then it will slide offscreen with the rest of the B items, at this point the “C” heading will show up instead of the “B” heading.

Two position values that work on any CSS property and HTML elements

We could also mention two additional position values, which work on any CSS property, and on any HTML element:

  • initial: sets position property to its default value
  • inherit: keyword specifies that property should inherit its value from its parent

Bootstrap offers three additional values for controlling element position

You should also keep in mind that Bootstrap offers three additional values for controlling element position that are also worth mentioning:

  • fixed-top: fixes the element to the top of the screen (aka top of the viewport), extending from edge to edge
  • fixed-bottom: fixes the element to the bottom of the viewport, from edge to edge
  • sticky-top: fixes the element to the top of the screen, from edge to edge, but only after you scrol past the element
August 10, 2021 | CSS

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.

August 7, 2021 | CSS

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.

August 4, 2021 | CSS

We will take you back to the basis of CSS styling. We will dive into CSS margins, padding, and borders. We will investigate what each of these properties means, what are the differences between them, and when should we use each of them. We will start with borders, and then move to margins and paddings, and see what they are all about. We will compare margins vs paddings and we will take a look at when do we typically use margins and paddings.