CSS

05 of february of 2024

Disclaimer: This post has been translated to English using a machine translation model. Please, let me know if you find any mistakes.

Parts of CSS (selector, properties, values)

In CSS, we can talk about three main parts:

Selector: It is the part that selects the element to which the style will be applied.
Property: It is the part that defines the style to be applied to the element.
Value: It is the part that defines the value of the property to be applied to the element.

To add comments in CSS, use /* comment */.

The line that has property: value; is called a **declaration**.

selector {
property: value;   /* comment */
}

Selectors

There are several types of selectors:

Universal selector: Selects all elements on the page. It uses the asterisk *.
Type selector: Selects all elements of a type. It uses the name of the element type. For example, p selects all paragraphs.
Class selector: Selects all elements that have a class. The class name is used. For example, .class selects all elements that have the class class. This is useful because if we want all buttons to be the same, in the HTML we put <button class="button"> and in the CSS we put .button { /* styles */ }. This way, all buttons will have the same styles, and if we want a button to be different, we give it another class.
Pseudo-class selector: Selects all elements that have a pseudo-class. It uses the name of the pseudo-class. For example, :hover selects all elements that are being targeted by the mouse. This is useful because if we want a button to change color when the mouse is over it, in the CSS we put .button:hover { /* styles */ }. This way, the button will have the desired styles when the mouse is over it. Some pseudo-classes are:
:hover: Selects all elements that are being targeted by the mouse.
:active: Selects all elements that are being selected by the mouse and are being pressed.
:focus: Selects all elements that are being targeted by the mouse and are being pressed, and also have focus.
:first-child: Selects all elements that are the first child of their parent. This is useful, for example, with the <li> items in lists, because if we want the first element of the list to have a different style, in the CSS we put li:first-child { /* styles */ }. This way, the first element of the list will have the styles we want.
:last-child: Selects all elements that are the last child of their parent. This is useful, for example, with the <li> items in lists, because if we want the last element of the list to have a different style, in the CSS we put li:last-child { /* styles */ }. This way, the last element of the list will have the styles we want.
:nth-child(n): Selects all elements that are the nth child of their parent. For example, :nth-child(2) selects all elements that are the second child of their parent.
:nth-last-child(n): Selects all elements that are the n-th child of their parent, counting from the end. For example, :nth-last-child(2) selects all elements that are the second child of their parent, counting from the end.
:nth-of-type(n): Selects all elements that are the n-th child of their parent, of the same type. For example, :nth-of-type(2) selects all elements that are the second child of their parent, of the same type.
:nth-last-of-type(n): Selects all elements that are the n-th child of their parent, of the same type, starting from the end. For example, :nth-last-of-type(2) selects all elements that are the second child of their parent, of the same type, starting from the end.
:first-of-type: Selects all elements that are the first child of their parent, of the same type.
:last-of-type: Selects all elements that are the last child of their parent, of the same type.
:only-child: Selects all elements that are the only child of their parent.
:only-of-type: Selects all elements that are the only child of their parent, of the same type.
:empty: Selects all elements that have no children.
ID selector: Selects an element that has a specific id. It uses the name of the id. For example, #id selects the element that has the id id. This is useful because if we want an element to be unique, in the HTML we put <p id="unique"> and in the CSS we put #unique { /* styles */ }. This way, that element will have the styles we want, and if we want another element to be the same, we give it a different class.
Combined selectors: Select elements that meet multiple conditions. Use the selectors you want, separated by a space. For example, p .clase selects all elements that have the class clase and are children of a paragraph. This is useful because if we want all buttons within a paragraph to be the same, in the HTML we put <p class="parrafo_que_quiero_cambiar"><button class="boton"> and in the CSS we put .parrafo_que_quiero_cambiar .boton { /* styles */ }. This way, all buttons inside a paragraph with the class parrafo_que_quiero_cambiar will have the same styles, and if we want a button to be different, we give it another class.
First-level combined selector: Select elements that meet several conditions, but only if they are at the first level. Use any selectors you want, separated by a >. For example, p > .class selects all elements that have the class class and are direct children of a paragraph. This is useful because if we want all buttons inside a paragraph to be the same, in the HTML we put <p class="paragraph_i_want_to_change"><button class="button"> and in the CSS we put .paragraph_i_want_to_change > .button { /* styles */ }. This way, all buttons inside a paragraph with the class paragraph_i_want_to_change will have the same styles. If we want a button to be different, we give it another class.
General sibling combinator selector: Select elements that meet multiple conditions, but only if they are at the same level. Use any selectors you want, separated by a ~. For example, p ~ .class selects all elements with the class class that are at the same level as a paragraph. This is useful because if we want all buttons at the same level as a paragraph to be the same, in the HTML we put <p class="paragraph_i_want_to_change"></p><button class="button"> and in the CSS we put .paragraph_i_want_to_change ~ .button { /* styles */ }. This way, all buttons at the same level as a paragraph with the class paragraph_i_want_to_change will have the same styles. If we want a button to be different, we give it another class.
Adjacent sibling combinator selector: Selects elements that meet several conditions, but only if they are at the same level and adjacent. We use the selectors we want, separated by a +. For example, p + .class selects all elements that have the class class and are at the same level and adjacent to a paragraph. This is useful because if we want all buttons that are at the same level and adjacent to a paragraph to be the same, in the HTML we put <p class="paragraph_to_change"></p><button class="button"> and in the CSS we put .paragraph_to_change + .button { /* styles */ }. This way, all buttons that are at the same level and adjacent to a paragraph with the class paragraph_to_change will have the same styles, and if we want a button to be different, we give it another class.

It is common to use the class selector, because this way we can reuse the styles.

Styles

Color

The color can be set in several ways:

Name: You can put the name of the color. For example, red is red.
Hexadecimal: The color can be set in hexadecimal. For example, #ff0000 is red.

If you want to add transparency, you can use #ff000080, which is red with 50% transparency.

If only three numbers are provided, they repeat. For example, #f10 is the same as #ff1100. If you want to add transparency, you can use #f108, which is the same as #ff110088.

RGB: The color can be set in RGB. For example, rgb(255, 0, 0) is red.

If you want to add transparency, you can use rgb(255 0 0 / 0.5), which is red with 50% transparency. You can also set the transparency as a percentage, rgb(255 0 0 / 50%). You can find the legacy way of setting transparency with rgba(255, 0, 0, 0.5), which is red with 50% transparency, but it's best to use the modern method.

HSL: You can set the color in HSL. For example, hsl(0, 100%, 50%) is red.

OKLCH: The color can be set in OKLCH. For example, oklch(0 100% 50%) is red.

In HSL and OKLCH there is a wider color scale than in RGB, so if you need more colors, it's better to use HSL or OKLCH.

Transparency can also be added by including the statement color:transparent.

Current Color

There is a color value that is currentColor, which is the current color. For example, if we have some text and set its color to red, and then add a border to this text, if we put border: 1px solid currentColor;, the border will be red.

p {
color: red;
border: 1px solid currentColor;
It seems like you didn't provide any Markdown text to translate. Please provide the Markdown text you want translated to English.

Inheritance

When a style is applied to an element, this style is inherited by the child elements. For example, if we have a div with some text, and we set the color to red for the div, the text will also be red.

<div>
<p>Text</p>
</div>

div {
color: red;
It seems like you didn't provide any Markdown text to translate. Please provide the Markdown text you want translated to English.

By doing this, the text will be red.

We can indicate in the child which styles are inherited. For example, suppose we have a parent and a child

<div class="parent">
<p class="child">Text</p>
</div>

.parent {
color: red;
}

.son {
color: inherit;
}

By doing this, the text will be red, because the child inherits the color from the parent.

The possible options are:

inherit: Inherits the style from the parent.
initial: Sets the style to its default value.
unset: Resets the style
revert: Revert the style

Not all styles are inherited, for example, the background is not inherited. To know which styles are inherited without listing them all, one way is to go to MDN and check if the style has the Inherited property set to yes (within Formal definition).

Sources

When loading fonts, they can be loaded in several ways:

Local: A local font can be loaded. For example, font-family: Arial; loads the Arial font.
URL: A font can be loaded from a URL. For example, font-family: url(https://fonts.googleapis.com/css2?family=Roboto); loads the Roboto font from Google Fonts.
Generic: A generic font can be loaded. For example, font-family: sans-serif; loads a sans-serif font. This font depends on the operating system, so it will be Arial on Windows, Helvetica on Mac, and DejaVu Sans on Linux.

Multiple fonts can be loaded, and if one is not available, the next one is loaded. For example, font-family: Arial, sans-serif; loads Arial, and if it is not available, it loads a sans-serif font.

A font can also be loaded with multiple styles. For example, font-family: Arial, sans-serif; font-weight: 700; loads Arial in bold, and if it is not available, it loads a sans-serif font in bold.

As sans-serif is a generic font, it's best to always put it last, so that if the font we want is not available, the generic one will be loaded.

p {
font-family: url(https://fonts.googleapis.com/css2?family=Roboto), url(https://fonts.googleapis.com/css2?family=Roboto+Slab), Ubuntu, sans-serif;
}

Border and Outline

We can add a border to an element with border: 1px solid red;. This adds a border that is 1px thick, solid, and red.

If we want to add an outline, we can use outline: 1px solid red;. This adds a 1px thick, solid, and red outline.

The difference between border and outline is that border takes up space, while outline does not. For example, if we have a div with some text, and we add a border, the text will move to make room for the border. If we add an outline, the text will not move, because the outline does not take up space. This can be observed if we change the style in the :hover pseudo-class. If we add a border, when we hover over it, the text will move, but if we add an outline, the text will not move.

Waterfall

The cascade is the order in which styles are applied. The order is:

User styles: These are the styles that the user has configured. For example, if the user has set the text to be red, the text will be red.
Author styles: These are the styles that the author has configured. For example, if the author has configured the text to be blue, the text will be blue.
Browser styles: These are the browser's styles. For example, if the browser is configured to have text in green color, the text will be green.

User styles prevail over author styles, and author styles prevail over browser styles.

But within the author's styles, the styles that are lower in the code prevail. For example, if we have a div with some text, and we set the color to red, and then set the color to blue, the text will be blue.

<div>
<p>Text</p>
</div>

div {color: red;
}

div {
color: blue;
}

In this example, the text will be blue. The red color is overridden with the blue color.

Fallback

One of the benefits of the cascade is that we can apply a very new style, but in case the browser the user is using does not support it, we can set an older style beforehand just in case. For example, styling the color with oklch is something new, which might not be supported by the browser the user is using, so we can set an older style beforehand just in case.

p {
color: rgb(255, 0, 0);
color: oklch(0 100% 50%);
It seems like you've provided an incomplete or incorrect Markdown text to translate. Please provide the full Markdown text you want translated into English.

This way, the browser will first try to style with oklch, and if it can't, it will style with rgb.

Specificity

An HTML element can have several ways to refer to it. For example

<p class="clase" id="id">Text</p>

p {
color: red;
}

.class {
color: blue;
}

#id {
color: green;
}

In this example, the text will be green. This is because the id selector has more specificity than the class selector, and the class selector has more specificity than the type selector. Therefore, the id selector overrides the class selector, and the class selector overrides the type selector.

If we had in the CSS

p {
color: red;
}

p.class {
color: blue;
It seems like you have provided an incomplete or incorrect Markdown text to translate. Please provide the full Markdown content so I can assist with the translation.

The text would be blue. This is because the class selector has more specificity than the type selector, so the class selector overrides the type selector.

Inline styles have more specificity than author styles. For example

<p style="color: red;">Text</p>

p {
color: blue;
It seems like you might have accidentally sent an incomplete or incorrect Markdown text. Could you please provide the actual Markdown content that needs to be translated?

In this example, the text will be red. This is because the inline style has more specificity than the author's style.

If !important is added to the end of the declaration, this declaration will have more specificity than any other. For example

<p class="clase" id="id">Text</p>

p {
color: red;
}

.class {
color: blue;
It seems like there might be a missing Markdown text to translate. Could you please provide the Markdown content that needs to be translated?

#id {
color: green;
}

p.class {
color: yellow !important;
}

In this example, the text will be yellow. This is because the declaration with !important has more specificity than any other.

Units

Units of length

Absolute Units

If we want to set a fixed size, we can use absolute units. For example, px is a pixel, cm is a centimeter, mm is a millimeter, in is an inch, pt is a point, pc is a pica.

Relative units

However, if we want the size to be relative, we can use relative units. For example, em is the font size, rem is the root element's font size, vw is the viewport width, vh is the viewport height, vmin is the viewport width or height, whichever is smaller, vmax is the viewport width or height, whichever is larger, ch is the width of a character, ex is the x-height, and fr is a fraction of the available space.

Box Model

In HTML, everything is boxes, but there are two ways to view the boxes: inline and block. For example, <span> elements are inline, and <div> elements are block.

Inline boxes `inline`

When the element is inline, width and height cannot be set, and the element behaves as if it were text. For example, if we have a span with some text, and we set a width and height, the width and height will not be applied, and the element will behave as if it were text.

<span>Text</span>

span {
width: 100px;
height: 100px;It seems like you've only provided a closing brace `}` without any Markdown content to translate. If you have a specific Markdown text that needs translation, please provide it, and I'll be happy to help!

In this example, the width and height will not be applied, and the element will behave as if it were text.

Additionally, when the element is inline, if multiple elements are placed together in the HTML, these elements will be displayed together. For example, if we have several span elements with text, and we place them together in the HTML, these elements will be displayed together.

<span>Text</span>
<span>Text</span>
<span>Text</span>

In this example, the elements will be displayed together ==> TextTextText.

But if we want the elements to be displayed on different lines, we can use display: block;. For example, if we have several span elements with text, and we set display: block; for them, these elements will be displayed on different lines.

<span>Text</span>
<span>Text</span>
<span>Text</span>

span {
display: block;
It seems like you might have intended to provide a Markdown text for translation but didn't include it. Please provide the Markdown text you want translated to English.

In this example, the elements will be displayed on different lines

⬇

Text

Boxes `block`

When the element is block, the width and height can be configured, and the element behaves as if it were a block. For example, if we have a div with some text, and we set a width and height, the width and height will be applied, and the element will behave as if it were a block.

<div>Text</div>

div {
width: 100px;
height: 100px;}

In this example, the width and height will be applied, and the element will behave as if it were a block.

Additionally, when the element is block, if multiple elements are placed together in the HTML, these elements will be displayed one below the other. For example, if we have several div with text, and we place them together in the HTML, these elements will be displayed one below the other.

<div>Text</div>
<div>Text</div>
<div>Text</div>

In this example, the elements will be displayed one below the other

⬇

Text

But if we want the elements to be displayed on the same line, we can use display: inline;. For example, if we have several div with text, and we set display: inline;, these elements will be displayed on the same line.

<div>Text</div>
<div>Text</div>
<div>Text</div>

div {
display: inline;
}

In this example, the elements will be displayed on the same line ==> TextTextText.

Margin, Border, Padding and Content

Now that we know that in HTML everything is boxes, we can see that each box has 4 parts:

Margin: It is the space between the box and other boxes.
Border: It is the border of the box.
Padding: It is the space between the border and the content.- Content: It is the content of the box.

All these properties can be configured. For example, if we have a div with some text, and we set a width and a height, the width and height will be applied, and the element will behave as if it were a block.

<div>Text</div>

div {
width: 100px;
height: 100px;
margin: 10px;
border: 10px solid red;
padding: 10px;
}

As they are size properties, length units can be used. For example:

If we want the margin to be 10 pixels, we put margin: 10px;.
If we want only the left margin, we put margin-left: 10px;.
If we want only the right margin, we put margin-right: 10px;.
If we want only the top margin, we put margin-top: 10px;.
If we want it to be only the bottom margin, we put margin-bottom: 10px;.
If we want each margin to be a different size, we put margin: 10px 20px 30px 40px;. The order is top, right, bottom, left, as if they were the hands of a clock.
If we want to change the margins on the horizontal and vertical axes, we put margin: 10px 20px;. The order is top and bottom (10px), left and right (20px).

Box Size When Changing Padding

If we have a div with some text, and we set its width and height, the width and height will be applied, and the element will behave as if it were a block.

<div>Text</div>

div {
width: 100px;
height: 100px;
}

This way the div will have a width and height of 100px.

But if we now apply a padding of 10px, the width and height will remain the same, but the box size will be 120px, because the padding is added to the width and height.

<div>Text</div>

div {
width: 100px;
height: 100px;
padding: 10px;
}

This way the div will have a width and height of 100px, but the box size will be 120px.

Box Size When Changing the Border

If we have a div with some text, and we set its width and height, the width and height will be applied, and the element will behave as if it were a block.

<div>Text</div>

div {
width: 100px;
height: 100px;
It seems like you've provided an incomplete or incorrect Markdown structure. Could you please provide the full Markdown text for translation?

This way the div will have a width and height of 100px.

But if we now apply a border of 10px, the width and height will remain the same, but the box size will be 120px, because the border is added to the width and height.

<div>Text</div>

div {
width: 100px;
height: 100px;
border: 10px solid red;
}

In this way, the div will have a width and height of 100px, but the box size will be 120px.

Box Size When Changing the Margin

In the case of margins, the size of the box does not change, but the space between the boxes does. For example, if we have two div with text, and we set a width and a height, the width and height will be applied, and the element will behave as if it were a block.

<div>Text</div>
<div>Text</div>

div {
width: 100px;
height: 100px;
}

This way the div will have a width and height of 100px.

But if we now apply a margin of 10px, the width and height will remain, but the space between the div elements will be 20px, because the margin is added to the space between the div.

<div>Text</div>
<div>Text</div>

div {
width: 100px;
height: 100px;
margin: 10px;
}

This way the div will have a width and height of 100px, but the space between the div will be 20px.

Box Size

Therefore, what occupies the box is:

Width: width + padding + border.
Height: height + padding + border.

The margin does not count, because the margin is the space between the boxes.

Box-sizing

By default, the box-sizing property is set to content-box. This means that the width and height do not include the padding or the border. For example, if we have a div with some text, and we set a width and a height, the width and height will be applied, and the element will behave as if it were a block.

<div>Text</div>

div {
width: 100px;
height: 100px;
}

This way the div will have a width and height of 100px.

But if we now apply a padding of 10px, the width and height will remain the same, but the box size will be 120px, because the padding is added to the width and height.

<div>Text</div>

div {
width: 100px;
height: 100px;
padding: 10px;
It seems like you've provided an incomplete or incorrect Markdown structure. Could you please provide the full Markdown text for translation?

In this way, the div will have a width and height of 100px, but the box size will be 120px.

If we changed the box-sizing property to border-box, the width and height would include the padding and border. For example, if we have a div with some text, and we set a width and height, the width and height will be applied, and the element will behave as if it were a block.

<div>Text</div>

div {
width: 100px;
height: 100px;
box-sizing: border-box;
}

This way the div will have a width and height of 100px.

But if we now apply a padding of 10px, the width and height will remain, and the box size will also be 100px, because the padding is not added to the width and height.

<div>Text</div>

div {
width: 100px;
height: 100px;
box-sizing: border-box;
padding: 10px;
It seems like you didn't provide any Markdown text to translate. Please provide the Markdown text you want translated to English.

This way the div will have a width and height of 100px, and the box size will also be 100px.

It's important to note that when the box-sizing property is changed to border-box, the width and height include the padding and border, so we cannot set a width and height smaller than the padding and border. For example, if we have a div with some text, and we set a width and height, the width and height will be applied, and the element will behave as if it were a block.

<div>Text</div>

div {
width: 100px;
height: 100px;
box-sizing: border-box;
}

This way the div will have a width and height of 100px.

But if we now apply a padding of 110px, the width and height will remain the same, but the box size will be 220px, because the padding is added to the width and height.

<div>Text</div>

div {
width: 100px;
height: 100px;
box-sizing: border-box;
padding: 110px;
}

In this way, the div will have a width and height of 100px, but the box size will be 220px.

Overflow

One of the most famous CSS memes is the following

And this happens when the content size is larger than the box size. For example, if we have a div with some text, and we set a width and height, the width and height will be applied, and the element will behave as if it were a block.

<div>Text</div>

div {
width: 100px;
height: 100px;
}

This way the div will have a width and height of 100px.

But if we now apply a very long text, the text will overflow the box because the content size is larger than the box size.

<div>Very long text</div>

div {
width: 100px;
height: 100px;
It seems like you've provided an incomplete or incorrect Markdown text to translate. Could you please provide the full text you want translated?

This way the div will have a width and height of 100px, but the text will overflow the box.

This happened because in CSS the overflow property is set to visible. This means that the content can extend beyond the box. But we have other options:

hidden: The content cannot overflow the box and is clipped.
scroll: The content cannot overflow the box, and a scrollbar is added.
auto: The content cannot overflow the box, and a scrollbar is added if necessary. In this case, it depends on the device, because if the device has a scrollbar, a scrollbar will be added, and if the device does not have a scrollbar, no scrollbar will be added.

Between scroll and auto, the recommended option is auto, because if the device has a scrollbar, it will add a scrollbar, and if the device does not have a scrollbar, it will not add a scrollbar.

Overflow hidden

In the case of choosing hidden, the content cannot overflow the box, and it gets clipped. In this case, we have the property text-overflow, which allows us to configure what happens with the text that overflows the box. The options are:

clip: The text is clipped.
ellipsis: The text is truncated, and ... is added to the end of the text.

In the future, a custom symbol will be able to be set, but for now it cannot.

Styling the Bar

In case of overflow, the scrollbar can be styled, but it is recommended not to style the page's scrollbar and only do so for scrollbars of internal boxes. For example, if there is a sidebar index on the page, and we want to change the size and color of the scrollbar to make it look better, we can do that.

At scrollbar.app we have an editor to style the scrollbar and get the necessary code

Position

In html elements are stacked, by default they are positioned statically, this is because by default in CSS they have the attribute position with the value static. This means that the element is positioned statically, and cannot be moved. The possible values are

static: The element is positioned statically and cannot be moved.
relative: The element is positioned relative to its normal position, and can be moved.
absolute: The element is positioned absolutely, and can be moved.
fixed: The element is positioned fixed and can be moved.
sticky: The element is positioned in a sticky manner and can move.

Position relative

When we want an element's position to be relative to another, we use position: relative;. But we need to put position: relative; on the parent, and position: absolute; on the child. For example, if we have a div with some text, and we want the text to be in the top right corner of the div, we can do that.

<div>
<p>Text</p>
</div>

div {
position: relative;
}

p {position: absolute;
top: 0;
right: 50px;
}

This way the text will be in the top right corner of the div.

Position absolute

When the element is absolute, the element is positioned absolutely to the first parent element that is not static. In the previous example, we saw that if we have a div with some text, and we want the text to be in the top right corner of the div, we can do it.

<div>
<p>Text</p>
</div>

div {
position: relative;
It seems like there might be some missing content in your request. Could you please provide the Markdown text that needs to be translated?

p {position: absolute;
top: 0;
right: 50px;
It seems like you have provided an incomplete or incorrect Markdown text to translate. Could you please provide the full text you want translated?

In this example, the div has position: relative;, so the p is positioned absolutely to the div, in the top right corner.

If there is no parent element that is not static, the element will be positioned absolutely to the body, that is, to the page.

<p>Text</p>

p {
position: absolute;
top: 0;
right: 50px;
}

In this example, the p has no parent element that is not static, so the p is positioned absolutely with respect to the body. That is, at the top right of the page.

Thanks to the relative and absolute properties, we can center a div both horizontally and vertically. For example, if we have a div with some text, and we want the text to be centered both horizontally and vertically, we can do that.

<div>
<p>Text</p>
</div>

div {
position: relative;
}

p {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
It seems like you didn't provide any Markdown text to translate. Please provide the Markdown text you want to be translated into English.

In this example, the div has position: relative;, so the p is positioned absolutely to the div, in the top right corner. Additionally, the p has top: 0;, right: 0;, bottom: 0;, and left: 0;, so the p occupies the entire div. Finally, the p has margin: auto;, so the p is centered both horizontally and vertically.

This is not the best way to center content in a div, but it can be very useful in some cases, such as in a modal.

Position fixed

When the element is fixed, the element is positioned fixed to the window. It's similar to absolute, but instead of positioning itself relative to the first non-static parent element, it positions itself relative to the window. Additionally, if the window moves, the element moves with it, meaning that if you scroll, the element will always remain in the same position.

For example, if we have a div with some text, and we want the text to be in the top right corner of the window, we can do it.

<div>
<p>Text</p>
</div>

p {
position: fixed;top: 0;
right: 50px;
}

In this example, the p is fixed to the window, in the upper right corner, and when scrolling, the p will always remain in the same position.

Position sticky

When the element is sticky, the element is positioned in a sticky manner relative to the first parent element that is not static.

It is similar to relative, but when the element reaches the top of the window, the element is positioned fixed to the window. Additionally, if the window moves, the element moves with it, meaning that if we scroll, the element will always remain in the same position.

For example, if we have a div with some text, and we want the text to be in the top right corner of the div, we can do that.

<div>
<p>Text</p>
</div>

div {
position: relative;
}

p {position: sticky;
top: 0;
right: 50px;
}

In this example, the div has position: relative;, so the p is positioned relatively to the div, in the top right corner. Additionally, the p has top: 0;, which means the p sticks to the div. That is, when the p reaches the top of the viewport, the p becomes fixed to the window.

Z-index

As we have seen, when changing the position of an element, the element is positioned on top of other elements. Therefore, we need to have control over which element is or will be visible above the others. For this, we have the z-index property. By default, all elements have z-index: auto;, but we can change it. For example, if we have a div with some text, and we want the text to be on top of the div, we can do that.

<div>
<p>Text</p>
</div>

div {
position: relative;
z-index: 0;
It seems like you have not provided any Markdown text to translate. Could you please provide the text you want translated into English?

p {position: absolute;
top: 0;
right: 50px;
z-index: 1;
}

In this example, the div has position: relative; and z-index: 0;, so the div is positioned relatively to the div, and the div has a z-index of 0. Additionally, the p has position: absolute;, top: 0;, right: 50px; and z-index: 1;, so the p is positioned absolutely to the div, in the top right corner, and the p has a z-index of 1. Therefore, the p will be on top of the div.

If the z-index is not specified, children have a higher z-index than their parents. However, for example, in the case of position: sticky;, the z-index of the child element is greater than that of its parent, but when scrolling, if at any point the child overlaps with another parent, the other parent will be on top.

If we want that child to appear above the other parents, we can control it with the z-index.

In the CSS course by Google you can see very well how the z-index works.

Flexbox and Grid

There are two ways to create layouts in CSS, with flexbox and with grid. Flexbox is older, and grid is newer. Flexbox is one-dimensional, and grid is two-dimensional. Flexbox is for simple layouts, and grid is for complex layouts.

Flexbox

As we have seen, we have containers that have display: block;, and containers that have display: inline;. The former are displayed on different lines, and the latter are displayed on the same line. Therefore, if we have several divs they will be displayed one below the other, and if we have several spans they will be displayed on the same line.

But if we want the divs to appear on the same line and also in a flexible manner, we can create a parent container that contains them and make the parent container have display: flex;.

<section>
<div>Text</div>
<div>Text</div>
<div>Text</div>
</div>

section {
display: flex;
It seems like there was an issue with your request. Could you please provide the Markdown text you would like to be translated?

This way the divs will be displayed on the same line and also flexibly, meaning if they don't fit on the same line, they will move to the next line.

Flex-direction

Flexbox is one-dimensional, meaning that only one direction can be set. By default, the flex-direction property is set to row. This means that items are displayed on the same line. However, we can change it to column, so that items are displayed on different lines.

<section>
<div>Text</div>
<div>Text</div>
<div>Text</div>
</section>

section {
display: flex;flex-direction: column;
It seems like you've provided an incomplete or incorrect Markdown text to translate. Could you please provide the full Markdown content so I can assist you with the translation?

This way the divs will be displayed on different lines.

This is very useful for creating responsive layouts, because we can change the direction of the elements depending on the screen size.

We can also specify the direction sense with flex-direction: row-reverse; or flex-direction: column-reverse;. For example, if we have several divs and want them to be displayed in the same line but in reverse order, we can do so.

<section>
<div>Text</div>
<div>Text</div>
<div>Text</div>
</section>

section {
display: flex;flex-direction: row-reverse;
}

This way the divs will be displayed on the same line, but in reverse order.

This is very useful when we want to reverse the order of elements, for example, if we have a ul with a list and we want the list to be displayed in reverse order. This way, there's no need to program anything and it can be done with CSS.

Direction

Another way to indicate the direction sense is with the direction property. By default, the direction property is set to ltr. This means that the direction sense is from left to right. But we can change it to rtl, so that the direction sense is from right to left.

<section>
<div>Text</div>
<div>Text</div>
<div>Text</div>
</section>

section {display: flex;
direction: ltr;
}

Flex-wrap

When the elements don't fit on the same line, they are placed on the next line. But we can change this behavior with the flex-wrap property. By default, the flex-wrap property is set to nowrap. This means that the elements cannot be placed on the next line. However, we can change it to wrap, so that the elements can be placed on the next line.

<section>
<div>Text</div>
<div>Text</div>
<div>Text</div>
</section>

section {
display: flex;flex-wrap: wrap;
}

This way the divs can be placed on the next line.

Flex-flow

One way to set the direction and wrapping of elements is with the flex-flow property. By default, the flex-flow property is set to row nowrap. This means that the items are displayed on the same line, and cannot be placed on the next line. However, we can change it to row wrap, so that the items are displayed on the same line, and can be placed on the next line.

<section>
<div>Text</div>
<div>Text</div>
<div>Text</div>
</section>

section {
display: flex;flex-flow: row wrap;
}

This way the divs will be displayed on the same line, and can be placed on the next line.

Flex-grow, Flex-shrink and Flex-basis

We can set the size of the items with the properties flex-grow, flex-shrink, and flex-basis.

flex-grow: Indicates whether the element can grow or not. By default, the flex-grow property is set to 0, which means that the element cannot grow. However, we can change it to 1, so that the element can grow.
flex-shrink: Indicates whether the element can shrink or not. By default, the flex-shrink property is set to 1, which means the element can shrink. But we can change it to 0, so that the element cannot shrink.
flex-basis: Indicates the size of the element. By default, the flex-basis property is set to auto, which means the element has an automatic size. But we can change it to 100px, so that the element has a size of 100px.

For example, if we have several divs, and we want the first div to have a size of 100px, and the others to share the remaining space, we can do that.

<section>
<div>Text</div>
<div>Text</div>
<div>Text</div>
</section>

section {
display: flex;
}

section div:first-child {flex-grow: 0;   /* Since it's 0 by default, there's no need to set it */
flex-shrink: 0; /* As it defaults to 1, there's no need to set it */
flex-basis: 100px;
It seems like there was an issue with your request. Please provide the Markdown text you would like to be translated into English.

section div {
flex-grow: 1;
flex-shrink: 1;     /* As it defaults to 1, there's no need to specify it */
flex-basis: auto;   /* Since it defaults to auto, there's no need to specify it */
It seems like you have not provided any Markdown text to translate yet. Please provide the Markdown text you want translated into English.

This way, the first div will have a size of 100px, and the others will share the remaining space.

The three values can be modified at once with the flex property. For example, if we have several divs, and we want the first div to have a size of 100px, and the others to share the remaining space, we can do this.

<section>
<div>Text</div>
<div>Text</div>
<div>Text</div>
</section>

section {
display: flex;
It seems like you have not provided any Markdown text to translate yet. Please provide the Markdown text you want translated into English.

section div:first-child {flex: 0 0 100px;
It seems like you might have accidentally sent an incomplete or incorrect markdown text. Could you please provide the actual markdown content to be translated?

section div {
flex: 1 1 auto;
It seems like you didn't provide any Markdown text to translate. Please provide the Markdown text you want translated to English.

This way, the first div will have a size of 100px, and the others will share the remaining space.

Or it can also be modified at once with flex: initial;, which is the same as flex: 0 1 auto;. Or with flex: auto;, which is the same as flex: 1 1 auto;. Or with flex: none;, which is the same as flex: 0 0 auto;. Or with flex: 1;, which is the same as flex: 1 1 0%;.

Another way to modify flex is by using numbers, which will indicate the relative space of the container. For example, if we have several divs and we want the first one to have twice the space of the second, and the second to have twice the space of the third, we can do that.

<section>
<div>Text</div>
<div>Text</div>
<div>Text</div>
</section>

section {
display: flex;
}

section div:first-child {
flex: 4;
}
section div:nth-child(2) {
flex: 4;
}

section div:nth-child(3) {
flex: 1;
}

This way, the first div will have twice the space of the second, and the second will have twice the space of the third.

Order

We can order the elements inside a container with the order property. By default, the order property is set to 0. But we can change it to 1, so that the element appears after the elements that have order: 0;. Or we can change it to -1, so that the element appears before the elements that have order: 0;.

It's like z-index, but for the order of elements. The higher the order, the later the element will be placed. For example, if we have several divs and want the first div to come after the second, we can do that.

<section>
<div>Text 1</div>
<div>Text 2</div>
<div>Text 3</div>
</section>

section {
display: flex;
}

section div:first-child {
order: 1;
}

section div {order: 0;
It seems like you've provided an incomplete or incorrect Markdown text to translate. Please provide the full Markdown text you want translated into English.

The result will be

Text 2

Text 3

Text 1

Justify-content

As Flexbox is one-dimensional, we can configure the justification of the container's elements along the Flexbox axis of the container. That is, if the Flexbox axis of the container is horizontal, we can configure the justification of the container's elements on the horizontal axis. And if the Flexbox axis of the container is vertical, we can configure the justification of the container's elements on the vertical axis.

The possible values are:

flex-start: The items are justified to the beginning of the Flexbox container's axis.
flex-end: The items are justified to the end of the Flexbox container's main axis.
center: The items are justified to the center of the Flexbox container's axis.
space-between: The elements are justified with the same space between them. No space is left on the sides of the first and last element.
space-around: The elements are justified with the same space around them.
space-evenly: The elements are justified with the same space between them and around them. That is, it is similar to space-between, but space is left on the sides of the first and last element. The space on the sides is the same as the space between the elements.

Gap

Suppose we have several elements inside a container and we've set justify-content: center;. This will make the elements centered in the container, but they will be touching each other. If we want there to be space between the elements, we can set gap: 10px;. This way, there will be a 10px gap between the elements.

<section>
<div>Text 1</div>
<div>Text 2</div>
<div>Text 3</div>
</section>

section {
display: flex;
justify-content: center;
gap: 10px;
}

I'm unable to view or interpret images directly. However, if you can describe the image or provide details about it, I'd be happy to help you with any questions or information you're looking for!

Align-items

So far we have seen how to distribute elements along the main axis of the Flexbox. But what about the cross axis? For that, we have the align-items property. This property allows us to align items along the cross axis of the Flexbox.

<section>
<div>Text 1</div>
<div>Text 2</div>
<div>Text 3</div>
</section>

section {display: flex;
align-items: center;
}

Align-content

With align-content we can align the content of the container on the cross axis. This property is similar to align-items, but instead of aligning the items, it aligns the content of the container.

<section>
<div>Text 1</div>
<div>Text 2</div>
<div>Text 3</div>
</section>

section {
display: flex;align-content: center;
flex-wrap: wrap;
height: 200px;
}

Align-content vs Align-items

As there can be confusion between align-content and align-items, let's look at an example to see the difference between these properties.

<section>
<div>Text 1</div>
<div>Text 2</div>
<div>Text 3</div>
<div>Text 4</div>
<div>Text 5</div>
<div>Text 6</div>
<div>Text 7</div>
<div>Text 8</div>
<div>Text 9</div>
</section>

section {
display: flex;
align-items: center;
align-content: center;
flex-wrap: wrap;
height: 200px;
It seems like you might have accidentally sent an incomplete or incorrect Markdown text. Could you please provide the actual Markdown content that needs to be translated?

With align-items we align the items along the cross axis, while with align-content we align the content of the container along the cross axis. That is, with align-items we align the items relative to each other, whereas with align-content we align the content of the container. In the previous example, we can see that with align-items the items are aligned relative to each other, while with align-content the content of the container is aligned along the cross axis.

Align-self

Sometimes we need to align an element on the cross axis differently from the rest of the elements. For this, we have the align-self property. This property allows us to align an element on the cross axis differently from the rest of the elements.

So far we aligned the elements in the parent, but with align-self we can align an element on the cross axis differently from the other elements.

<section>
<div>Text 1</div>
<div>Text 2</div>
<div>Text 3</div>
</section>

section {
display: flex;
align-items: center;
}

section div:nth-child(2) {
align-self: flex-end;
}

Flexbox Practice

A good resource to practice Flexbox is Flexbox Froggy.

Grid

If we need to create a more complex layout, we can use Grid. Grid is a two-dimensional grid system that allows us to create more complex layouts than with Flexbox.

Grid container

Let's see an example of how to layout with Grid. For this, we will use the following HTML structure.

<section>
<div>Text 1</div>
<div>Text 2</div>
<div>Text 3</div>
<div>Text 4</div>
<div>Text 5</div>
<div>Text 6</div>
<div>Text 7</div>
<div>Text 8</div>
<div>Text 9</div>
</section>

To create a Grid, we need to create a container with the property display: grid, remember that by default containers have display: block by default. This container is known as the Grid container.

section {
display: grid;
}

This code will create a Grid with a single column and as many rows as we have items.

If we want to change the number of columns, we can use the grid-template-columns property. This property allows us to define the number of columns our Grid will have. To define the number of columns, we can use units of measurement such as px, em, rem, fr, etc.

As many columns as defined measurement units will be created. In the following example, we will create 3 columns of 100px each.

section {
display: grid;
grid-template-columns: 100px 100px 100px;}

With this example, we have created a Grid with 3 columns, each 100px wide.

We can define the width of one of the columns with auto and the rest with a measure, this way the column with auto will adapt to the content, while the other columns will have the width we have defined.

When setting auto, the browser will decide the column width based on the space available in the container and the space occupied by the column content.

section {
display: grid;
grid-template-columns: auto 100px 100px;
}

The first column will adjust to the content, while the other two will have a width of 100px.

If we define two columns with auto, the browser will distribute the space between the two columns, but it doesn't have to be the same space for each column, since, as we've said, the space will depend on the container's space and the content's space.

section {
display: grid;
grid-template-columns: auto auto 100px;
}

In this example, the first two columns will adjust to the content, while the third will have a width of 100px.

Fraction

There is a unit of measurement that only exists in Grid and it is fr. This unit of measurement allows us to define the width of the columns based on the available space in the container.

section {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

In this example, the three columns will have the same width, as the available space in the container will be distributed among the three columns.

section {display: grid;
grid-template-columns: 1fr 2fr 1fr;
}

In this example, the second column will be twice as wide as the other two, since the available space in the container will be distributed among the three columns, but the second column will have twice as much space as the other two.

We can do the same with rows, for this we use the grid-template-rows property.

section {
display: grid;
grid-template-columns: 1fr 2fr 1fr;grid-template-rows: 1fr 2fr 1fr;
It seems like there was an issue with your message. Could you please provide the Markdown text you would like translated to English?

Empty Grid

We have said that we can divide the Grid into columns and rows, for which we set as many units of measurement as columns or rows we want. But what happens if we set more units of measurement than we need.

<section>
<div>Text 1</div>
<div>Text 2</div>
<div>Text 3</div>
<div>Text 4</div>
<div>Text 5</div>
<div>Text 6</div>
<div>Text 7</div>
<div>Text 8</div>
<div>Text 9</div>
</section>

section {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}

In this example, a Grid with 4 columns and 4 rows will be created, but we only have 9 elements, while we have created a grid of 16 elements. What happens to the 7 extra elements? The browser creates them as empty.

Grid-auto-rows

If when creating the Grid we only define the value of grid-template-columns, the browser will create the necessary rows for the columns we have defined, but it will create them with the default size, that is, the size of the content.

If we want to define the size of the rows, we can use the grid-auto-rows property. This property allows us to define the size of the rows that are created by default.

section {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-rows: 100px;
It seems like you might have intended to provide a Markdown text for translation but didn't include it. Could you please provide the Markdown text you want translated?

In this example, a Grid will be created with 4 columns and as many rows as we have items, but the row size will be 100px.

Suppose we have also defined grid-template-rows, but we have defined the size of the first rows and not all the necessary rows. With grid-auto-rows, we can define the size of the missing rows.

section {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
grid-auto-rows: 50px;
}

In this example, a Grid will be created with 4 columns and as many rows as we have items, but the size of the first two rows will be 100px, while the size of the remaining rows will be 50px.

This is very useful when we don't know how many elements we are going to have, since we can define the size of the first rows and the size of the rows that are created by default.

Repeat

Let's imagine we want to create a Grid with 100 columns and all of the same size. We would have to write the unit of measurement we want to use 100 times. To avoid this, we can use the repeat property.

section {
display: grid;
grid-template-columns: repeat(100, 1fr);
It seems like you've only provided a closing brace `}` without any Markdown content to translate. Could you please provide the full text you'd like translated?

With repeat we can define the number of columns we want and the unit of measurement we want to use.

We can use repeat with subparts of the grid. For example, imagine we want to create 100 columns again, but we want the first and last columns to have a width of 100px and the rest of the columns to have a width of 1fr.

section {
display: grid;
grid-template-columns: 100px repeat(98, 1fr) 100px;
}

Now suppose we have a column pattern that repeats every 3 columns. We can use repeat to define this pattern.

section {
display: grid;
grid-template-columns: repeat(3, 100px 1fr);
}

This way we create a grid of 6 columns, where the pattern repeats every 2 columns.

minmax

Maybe we don't know the exact size of a row or a column, but what we want is for it to occupy a size between a minimum and a maximum. For this, we can use the minmax property.

section {
display: grid;
grid-template-columns: minmax(100px, 1fr) 1fr 1fr 1fr;
}

In this example, we want each column to have 25% of the container's width, but the first column should have a minimum width of 100px. That is, if the space occupied by the first column is less than 100px, the column will have a width of 100px, but if the space occupied by the first column is greater than 100px, the column will have a width of 25% of the container.

This is very useful, for example, when we have a sidebar index and we want it to occupy a minimum width, but if the available space is larger, it should take up the corresponding space.

<div>
<aside>Index</aside>
<main>Content</main>
</div>

div {
display: grid;
grid-template-columns: minmax(100px, 1fr) 5fr;
It seems like you've only provided a closing brace `}` without any Markdown content to translate. Could you please provide the actual text in Markdown format that needs translation?

This way, the index will have a minimum width of 100px, but if the available space is larger, the index will occupy the corresponding space.

Grid-column-gap and Grid-row-gap

If we want to add space between the columns or between the rows, we can use the grid-column-gap and grid-row-gap properties.

section {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-column-gap: 20px;
It seems like you have not provided any Markdown text to translate. Please provide the Markdown text you want translated into English.

In this example, we have created a Grid with 3 columns of 100px each and a space of 20px between the columns.

section {display: grid;
grid-template-columns: repeat(3, 100px);
grid-row-gap: 20px;
}

In this example, we have created a Grid with 3 columns of 100px each and a spacing of 20px between the rows.

We can define the space between columns and rows with the grid-gap property.

section {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px 10px;
It seems like there might be some missing content in your request. Could you please provide the Markdown text that needs to be translated?

In this example, we have created a Grid with 3 columns of 100px each and a space of 20px between the columns and a space of 10px between the rows.

section {display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px;
}

In this example, we have created a Grid with 3 columns of 100px each and a spacing of 20px between the columns and rows.

Auto-fill and Auto-fit

With auto-fill and auto-fit we can create a Grid with a number of columns or rows that adapt to the available space in the container, thus making the Grid responsive.

section {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
It seems like you didn't provide any Markdown text to translate. Please provide the Markdown text you want translated to English.

In this example, as many columns as can fit in the container will be created, but each column will have a width of 100px.

section {display: grid;
grid-template-columns: repeat(auto-fit, 100px);
}

In this example, as many columns as can fit in the container will be created, but each column will have a width of 100px and if there is extra space in the container, the space will be distributed among the columns.

Now we can make it more complete

section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

In this example, as many columns as can fit in the container will be created, but each column will have a minimum width of 100px, and if there is extra space in the container, it will be distributed among the columns. As we make the browser smaller, the columns will adapt to the available space until a point is reached where they would need to be narrower than 100px to fit, at which point a column will be removed and the space will be redistributed among the remaining columns.

section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 20px;
}

In this example, as many columns as can fit in the container will be created, but each column will have a minimum width of 100px and if there is extra space in the container, the space will be distributed among the columns and there will be a 20px gap between the columns.

Auto-fill vs Auto-fit

The difference between auto-fill and auto-fit is that auto-fill creates as many columns or rows as can fit in the container, while auto-fit creates as many columns or rows as can fit in the container, but if there is extra space in the container, the space will be distributed among the columns or rows.

That is, auto-fill creates as many columns or rows as can fit in the container, but if there is extra space in the container, the space will not be distributed among the columns or rows, while auto-fit creates as many columns or rows as can fit in the container, but if there is extra space in the container, the space will be distributed among the columns or rows.

Grid-column-start and Grid-column-end (bento grid)

So far we have seen how to create a Grid with columns and rows, but what if we want an element to span more than one column or row? For this, we have the properties grid-column-start and grid-column-end.

<section>
<div>Text 1</div>
<div>Text 2</div>
<div>Text 3</div>
<div>Text 4</div>
<div>Text 5</div>
<div>Text 6</div>
<div>Text 7</div>
<div>Text 8</div>
<div>Text 9</div>
</section>

section {display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px;
}

section div:nth-child(2) {
grid-column-start: 1;
grid-column-end: 3;
}

In this example, we have created a Grid with 3 columns of 100px each and a space of 20px between the columns. The second element spans from the first column to the third column.

We can also specify the start and end of the column with the grid-column property.

section {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px;
}

section div:nth-child(2) {
grid-column: 1 / 3;
}

In this example, we have created a Grid with 3 columns of 100px each and a space of 20px between the columns. The second element spans from the first column to the third column.

If we don't want to tell it where to end, but rather how many columns we want it to occupy, we can use the span property.

section {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px;
It seems like you didn't provide any Markdown text to translate. Please provide the Markdown text you want translated to English.

section div:nth-child(2) {grid-column-start: 1;
grid-column-end: span 2;
}

In this example, we have created a Grid with 3 columns of 100px each and a space of 20px between the columns. The second element spans from the first column to the second column, meaning it occupies two columns.

If we want to position them at the end, but don't know how many columns there are, we can use negative numbers.

section {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px;
}

section div:nth-child(2) {grid-column-start: 1;
grid-column-end: -1;
}

In this example, we have created a Grid with 3 columns of 100px each and a space of 20px between the columns. The second element spans from the first column to the last column, meaning it occupies all three columns.

Grid-row-start and Grid-row-end (bento grid)

We can do the same with rows, for which we have the properties grid-row-start and grid-row-end.

<section>
<div>Text 1</div>
<div>Text 2</div>
<div>Text 3</div>
<div>Text 4</div>
<div>Text 5</div>
<div>Text 6</div>
<div>Text 7</div>
<div>Text 8</div>
<div>Text 9</div>
</section>

section {display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px;
It seems like you didn't provide any Markdown text to translate. Please provide the Markdown text you want translated to English.

section div:nth-child(2) {
grid-row-start: 1;
grid-row-end: 3;
}

In this example, we have created a Grid with 3 columns of 100px each and a space of 20px between the columns. The second element spans from the first row to the third row.

We can also specify the start and end of the row with the grid-row property.

section {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px;
It seems like you've provided an incomplete or incorrect Markdown text to translate. Could you please provide the correct Markdown content? I'll translate it to English for you.
section div:nth-child(2) {
grid-row: 1 / 3;
It seems like there was an issue with the input. Please provide the Markdown text you would like to be translated to English.

Just like before, if we don't want to tell it where to end, but rather how many rows we want it to occupy, we can use the span property.

section {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px;
It seems like you might have accidentally sent an incomplete or incorrect markdown text. Could you please provide the full markdown text for translation?

section div:nth-child(2) {grid-row-start: 1;
grid-row-end: span 2;
It seems like you have not provided any Markdown text to translate yet. Please provide the Markdown text you would like translated into English.

In this example, we have created a Grid with 3 columns of 100px each and a spacing of 20px between the columns. The second element spans from the first row to the second row, meaning it occupies two rows.

If we want to position them at the end, but don't know how many rows there are, we can use negative numbers.

section {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px;
}

section div:nth-child(2) {grid-row-start: 1;
grid-row-end: -1;
}

In this example, we have created a Grid with 3 columns of 100px each and a space of 20px between the columns. The second element spans from the first row to the last row, meaning it occupies all three rows.

Element Overlapping

We can position elements so that they overlap each other.

<section>
<div>Text 1</div>
<div>Text 2</div>
<div>Text 3</div>
<div>Text 4</div>
<div>Text 5</div>
<div>Text 6</div>
<div>Text 7</div>
<div>Text 8</div>
<div>Text 9</div>
</section>

section {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px;
}

section div:first-child {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}

section div:nth-child(2) {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
It seems like you didn't provide any Markdown text to translate. Please provide the Markdown text you want translated to English.

In this example, we have created a Grid with 3 columns of 100px each and a 20px gap between the columns. The first element spans from the first column to the second column and from the first row to the second row. The second element spans from the first column to the second column and from the first row to the second row.

To control which of the elements overlaps the other, we can use the z-index property.

section {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 20px;
}

section div:first-child {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
z-index: 1;
}

section div:nth-child(2) {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
z-index: 2;
}

In this example, we have created a Grid with 3 columns of 100px each and a space of 20px between the columns. The first element spans from the first column to the second column and from the first row to the second row. The second element also spans from the first column to the second column and from the first row to the second row. Since the second element has a higher z-index than the first element, the second element overlaps the first one.

Layouts with Grid

Now that we know the basic properties of Grid, let's see how we can create layouts with Grid.

<header>Header</header>
<aside>Aside</aside>
<main>Main</main>
<footer>Footer</footer>

body {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 35px 1fr 100px;
min-height: 100vh;
}

header {
grid-column: 1 / -1;
It seems like you didn't provide any Markdown text to translate. Please provide the Markdown text you want to be translated into English.
main {
grid-column: span 2;
It seems like you didn't provide any Markdown text to translate. Please provide the Markdown text you want translated to English.

footer {
grid-column: 1 / -1;
It seems like there was an issue with the input you provided. Please provide the Markdown text you would like to be translated to English.

In this example, we have created a Grid with 3 columns and 3 rows. The first row has a height of 35px, the second row takes up the remaining available space, and the third row has a height of 100px. The header spans from the first column to the last column, the main spans from the first column to the second column, and the footer spans from the first column to the last column.

We have set min-height: 100vh so that the Grid occupies 100% of the screen height, because if we don't set this, the Grid will only occupy the height of its content.

However, when looking at the CSS it's hard to understand, so we can use the grid-area property.

Grid-area

We can name each of the areas in the Grid and then use that name to position the elements.

<header>Header</header>
<aside>Aside</aside>
<main>Main</main>
<footer>Footer</footer>

body {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 35px 1fr 100px;
min-height: 100vh;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
It seems like there's a missing Markdown text to translate. Please provide the Markdown text you want translated to English.

header {
grid-area: header;It seems like you've provided an incomplete or incorrect Markdown text to translate. Please provide the full Markdown content so I can translate it accurately.

main {
grid-area: content;
It seems like there was an issue with your message. Could you please provide the Markdown text you want to be translated?

footer {
grid-area: footer;
It seems like you have not provided any Markdown text to translate. Could you please provide the text you want translated into English?

aside {
grid-area: sidebar;
It seems like you have not provided any Markdown text to translate yet. Please provide the Markdown text you would like translated into English.

Since we have named each of the areas in the Grid, we can use that name to position the elements. This makes the CSS easier to understand.

If we wanted to make it responsive now, we would only need to change the Grid and the rest of the CSS would remain the same.

body {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 35px 1fr 100px;
min-height: 100vh;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}

@media (width < 400px) {
body {
grid-template-columns: 1fr;
grid-template-rows: 35px 1fr 100px;
grid-template-areas:
"header header sidebar"
"content content content"
"footer footer footer";
}
header {
grid-area: header;
}

main {
grid-area: content;
}

footer {
grid-area: footer;
It seems like you didn't provide any Markdown text to translate. Please provide the Markdown text you want translated to English.

aside {
grid-area: sidebar;
}

Now we have made it so that when viewed on a large device, the sidebar is on the left and the content is on the right, but when viewed on a small device, the sidebar is on top and the content is below.

Suppose we want nothing in an area, we can put a dot.

body {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 35px 1fr 100px;
min-height: 100vh;
grid-template-areas:
"header header header"
"sidebar . content"
"footer footer footer";
}

@media (width < 400px) {
body {
grid-template-columns: 1fr;
grid-template-rows: 35px 1fr 100px;
grid-template-areas:
"header header sidebar"
"content content content"
"footer footer footer";
}
header {
grid-area: header;
}

main {
grid-area: content;
}

footer {
grid-area: footer;
}

aside {
grid-area: sidebar;
It seems like you might have intended to provide a Markdown text for translation but didn't include it. Could you please provide the Markdown text you want translated?

Now on large screens there is a space between the sidebar and the content.

Justify-items, Align-items, Justify-content and Align-content

We can align the content and elements of a Grid using the properties justify-items, align-items, justify-content, and align-content.

Justify-items

We can align the elements on the X-axis of the Grid with the justify-items property.

The values we can use are:

start: aligns the elements to the start of the main axis.
end: aligns the items to the end of the main axis.
center: aligns the elements in the center of the main axis.
stretch: stretches the items so they take up all available space on the main axis.

<section>
<div>Text 1</div>
<div>Text 2</div>
<div>Text 3</div></section>

section {
display: grid;
justify-items: center;
}

Justify-self

With justify-items we align all the elements along the main axis of the Grid, but with justify-self we can align an element along the main axis of the Grid differently from the other elements.

<section>
<div>Text 1</div>
<div>Text 2</div>
<div>Text 3</div>
</section>

section {
display: grid;
justify-items: center;}

section div:nth-child(2) {
justify-self: end;
}

It looks like you've provided an image, but I'm unable to view or interpret images directly. Could you describe what the image contains or provide more context about what you need help with? If it's a specific type of content, such as a diagram, chart, or artwork, let me know, and I'll do my best to assist you!

Align-items

It is very similar to justify-items, but instead of aligning the items on the X-axis, it aligns them on the Y-axis.

The values we can use are:

start: aligns the elements to the start of the cross axis.
end: aligns the items to the end of the cross axis.
center: aligns the elements in the center of the cross axis.
stretch: stretches the items so they take up all available space on the cross axis.

<section>
<div>Text 1</div>
<div>Text 2</div>
<div>Text 3</div></section>

section {
display: grid;
align-items: center;
}

Align-self

With align-items we align all the items along the secondary axis of the Grid, but with align-self we can align an item along the secondary axis of the Grid differently from the other items.

<section>
<div>Text 1</div>
<div>Text 2</div>
<div>Text 3</div>
</section>

section {
display: grid;
align-items: center;}

section div:nth-child(2) {
align-self: end;
}

I apologize, but I'm not able to view or interpret the image you've shared. The image data appears to be a long string of characters, likely encoded in base64 format. Without being able to actually see and examine the contents of the image, I don't have any context about what it depicts or contains.

If you'd like me to comment on or analyze something in an image, could you please describe its contents? Or if there's a specific question you have about the image, feel free to ask that directly. I'm happy to try and help with whatever information or guidance I can provide based on your description or questions!

Place-content

If we want to use justify-content and align-content at the same time, we can use place-content.

The values we can use are:

start: aligns the elements at the beginning of both the main and cross axes.
end: aligns the items at the end of the main and cross axes.
center: aligns the elements in the center of both the main and cross axes.
stretch: stretches the items so they occupy all available space on both the main and cross axes.

<section>
<div>Text 1</div>
<div>Text 2</div>
<div>Text 3</div></section>

section {
display: grid;
place-content: center;
It seems like you have not provided any Markdown text to translate. Please provide the Markdown text you would like translated into English.

Grid Practice

A good resource to practice Grid is Grid Garden.

Center a div

So far we have seen 3 ways to center a div:

With position: absolute.
With display: flex.
With display: grid.

Animations

Within animations, there are two types: transitions and animations

Transitions

In transitions we change an element from an initial state to a target state

Suppose we have the following circle

<div class="pulser"></div>

And its CSS

.pulser {
width: 30px;
height: 30px;
background-color: #09f;
border-radius: 50%;
position: relative;
}

HTML elements can have states, for example the hover state, which is when the user hovers the cursor over the element.

.hover {
scale: 2;
background: purple;
box-shadow: 0 0 10px purple;
It seems like you've provided an incomplete or incorrect Markdown structure with just a closing brace `}`. If you have a specific Markdown text to translate, please provide it so I can assist you properly.

When we use scale, we make it increase in size while occupying the same space. However, if we had changed the width and the height, the button would have moved from its original position.

Transition

The issue is that if we now hover over the circle, it changes state abruptly, so this is where the transition comes in, which is how we tell CSS how to modify the state. For example, if we want the transition to last 1 second

.wristband {
width: 30px;
height: 30px;
background-color: #09f;
border-radius: 50%;
position: relative;
transition: 1s;
}

It's important to put the transition on .pulser and not on .pulser:hover because otherwise, the transition wouldn't apply when returning to the initial state. In other words, when you hover over the circle, the transition will be visible, but when you move the mouse away from the circle, there won't be a transition back; it will abruptly return to the initial state.

What is to be transitioned transition-property

With the above, a transition of color, size, and background would occur, but if we don't want a transition to happen for all properties, we can specify this using transition-property.

.wristband {
width: 30px;
height: 30px;
background-color: #09f;
border-radius: 50%;
position: relative;transition: 1s;
transition-property: background-color, scale;
}

This way, only the transition of background-color and scale will be applied.

Smooth transitions

The default transition is linear, but if we want to change it, we can do so using transition-timing-function.

.wristband {
width: 30px;
height: 30px;
background-color: #09f;
border-radius: 50%;
position: relative;
transition: 1s;
transition-property: background-color, scale;
transition-timing-function: ease-in-out;
}

This way the transition will be smoother at the beginning and end. The possible values are as follows:

linear
ease
ease-in
ease-out
ease-in-out
cubic-bezier(n,n,n,n)

Step-by-step Transitions

If we want the animation to occur in several steps, we can use steps(n), where n is the number of steps we want the animation to have.

.wristband {
width: 30px;
height: 30px;
background-color: #09f;
border-radius: 50%;
position: relative;
transition: 1s;
transition-property: background-color, scale;
transition-timing-function: steps(5);
}

This transition will be carried out in 5 steps over the course of a second

Full control of the transition with cubic-bezier

To perfectly control the transition, we can use cubic-bezier(n,n,n,n), where n is a number between 0 and 1 that indicates the position of the point on the X and Y axes.

.pulser {
width: 30px;
height: 30px;
background-color: #09f;
border-radius: 50%;
position: relative;
transition: 1s;
transition-property: background-color, scale;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

With delay we can indicate the time that must pass before the transition starts.

.pulser {
width: 30px;
height: 30px;
background-color: #09f;
border-radius: 50%;
position: relative;
transition: 1s;
transition-property: background-color, scale;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
transition-delay: 1s;
It seems like you have not provided any Markdown text to translate. Could you please provide the text you would like translated into English?

With delay, you can create loading animations, for example

<section>
Hover to show the elements
<div class="pulser"></div>
<div class="pulser"></div>
<div class="pulser"></div>
</section>

section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}

.pulser {
width: 30px;
height: 30px;
border-radius: 50%;
position: relative;
position: relative;
opacity: 0;
transition: 2s;
transition-timing-function: ease;
}

section {
display: flex;
gap: 16px;
justify-content: center;
align-items: center;
}

section:hover .pulser {
opacity: 1;
It seems like you might have intended to provide a Markdown text for translation but only sent a closing brace `}`. If you have a specific Markdown text that needs to be translated, please share it, and I will translate it for you.

.first-child {
transition-delay: 0s;
It seems like you might have accidentally sent an incomplete or incorrect Markdown text. Could you please provide the actual Markdown content that needs to be translated?

.pulse:nth-child(2) {
transition-delay: 300ms;
}

.last-child {
transition-delay: 600ms;
}

In easings.co we can see and configure the transitions

Everything in one line

In .pulser we have set transition and transition-timing-function, but we can also put it all in one line

.wristband {
width: 30px;
height: 30px;
background-color: #09f;
border-radius: 50%;
position: relative;
transition: background 300ms ease-in-out 2s;
}

With this, what we have told it is to animate the background for 300ms, with a smooth transition at the beginning and end, and to wait 2 seconds before starting the transition.

If we want to specify multiple elements, we can do it in the following way

.wristband {
width: 30px;
height: 30px;
background-color: #09f;
border-radius: 50%;
position: relative;
transition: background 300ms ease-in-out 2s, scale 1s ease-in-out 1s;
It seems like you've provided an incomplete or incorrect Markdown text to translate. Could you please provide the full Markdown content for translation?

What to Transition?

When it comes to adding transitions, you can look up what can be transitioned in Animatable CSS properties, but to avoid wasting time searching, it's best to transition properties thoughtfully, for example, something that can be transitioned is a color, a size, etc.

It is ideal to transition properties with intermediate states, for example, a font does not have an intermediate state and it makes no sense to transition from one font to another.

Different transitions at the beginning and end

We previously mentioned that transitions should be placed on the element and not on the hover, because this way the transition will only be visible when the mouse is over the element and not when you move it away. If we want different animations at the start and end, we can take advantage of this. On the element, we will place the final transition, and on the hover, the initial one.

.wristband {
width: 30px;
height: 30px;
background-color: #09f;
border-radius: 50%;
position: relative;
transition: background 300ms ease-in-out
}

.hover {scale: 2;
background: purple;
box-shadow: 0 0 10px purple;
transition: 1s;
transition-duration: 1s;
}

This way, when we hover over the element, there will be a 300ms transition, and when we remove the mouse, the transition will be 1 second.

Accessibility

Some people might get dizzy with the transitions, so we can add a media query to remove them.

@media (prefers-reduced-motion: reduce) {
.wristband {
transition: none;}
It seems like you might have intended to provide a Markdown text for translation but didn't include it. Could you please provide the Markdown text you want translated?

Animations

Transitions are the animations when we interact with elements, but in animations we don't need to interact with the element; they can run on their own. For example, the typical button that changes and moves every so often to let you know you need to press it.

Keyframes

We go back to the example of the blue ball and remove all transitions.

<div class="pulser"></div>

.wristband {
width: 30px;
height: 30px;background-color: #09f;
border-radius: 50%;
}

We need to tell CSS that we want to create an animation, for this we use @keyframes and give the animation a name.

@keyframes move {
}

Now we have to tell it where this frame starts, for that we use from and where it ends, for that we use to

@keyframes move {
from {
}
to {
It seems like there was an issue with your message. Could you please provide the Markdown text you want to translate?
}

Now we need to indicate which properties we want to change, for example the position

@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
It seems like there's a missing Markdown text to translate. Could you please provide the text?
It seems like you've provided an incomplete or incorrect Markdown text to translate. Could you please provide the full Markdown content? I'll make sure to translate it accurately while preserving its structure and style.

This way, when we enter the page, the blue ball will move 100px to the right

After

In an element, you can place an after which is an element that goes after the main element.

<div class="pulser"></div>

.wristband {
width: 30px;
height: 30px;
background-color: blue;
border-radius: 50%;
It seems like you might have intended to provide some Markdown text for translation but didn't include it. Could you please share the text you want translated?

.pulser::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: blue;
border-radius: 50%;
z-index: -1;
}

This puts a blue circle behind the blue circle, so now we have two blue circles.

Now we define the keyframes

@keyframes move {
0% {
opacity: 0;
It seems like there was an error or incomplete input in your message. Please provide the Markdown text you would like translated to English.
50% {
scale: 1.5;
opacity: 40%;
It seems like you have not provided any Markdown text to translate yet. Please provide the Markdown text you would like translated into English.
100% {
opacity: 60%;
It seems like you've provided an incomplete or incorrect Markdown text to translate. Please provide the full Markdown text you want translated into English.
}

And since we have already defined the keyframes, now we just need to tell CSS that we want the animation to run.

.pulser::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: blue;
border-radius: 50%;
z-index: -1;
    
animation-name: pulse;
animation-duration: 2s;
animation-timing-function: ease-in-out;
It seems like you might have accidentally sent an incomplete or incorrect Markdown text. Could you please provide the actual Markdown content that needs to be translated?

Now when the page loads, it will look as if the blue circle had a heartbeat.

But it only occurs once, to make it occur multiple times we need to add animation-iteration-count

.pulser::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: blue;
border-radius: 50%;
z-index: -1;
    
animation-name: pulse;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}

Now it will produce infinitely

Movement

We can make an element move

<div class="pulser"></div>

.wristband {
width: 30px;
height: 30px;
background-color: blue;
border-radius: 50%;
position: relative;
}

.pulser::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: blue;
border-radius: 50%;
z-index: -1;
    
animation-name: move;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
It seems like you didn't provide any Markdown text to translate. Please provide the Markdown text you want to be translated to English.

@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
It seems like you've only provided a closing brace `}` without any Markdown content to translate. Please provide the full text in Markdown format that you would like translated into English.

Now the blue ball will move 100px to the right

Address

To make the blue ball move to the left, just do animation-direction: reverse

.pulser::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: blue;
border-radius: 50%;z-index: -1;
    
animation-name: move;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: reverse;
It seems like there might be some missing content. Please provide the Markdown text you would like translated to English.

If we want the ball to go back and forth, we need to set animation-direction: alternate

.pulser::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: blue;
border-radius: 50%;z-index: -1;
    
animation-name: move;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate;
It seems like you've provided an incomplete or incorrect Markdown text to translate. Could you please provide the correct Markdown text that needs translation?

Pause animations

Imagine you have cards with animations; maybe you want the animation to pause when you hover over the card. For this, we can use animation-play-state: paused.

.card:hover {
animation-play-state: paused;}

CSS nesting

We have declared in the CSS the properties of the pulser and the properties when it is hovered, but everything can be done together.

.wristband {
width: 30px;
height: 30px;
background-color: blue;
border-radius: 50%;
position: relative;
    
&::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: blue;
border-radius: 50%;
z-index: -1;
        
animation-name: move;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate;
}
    
&:hover::after {
animation-play-state: paused;
}
It seems like you might have intended to provide a Markdown text for translation but didn't include it. Please provide the Markdown text you want translated to English, and I'll handle it for you!

How to End Animations

If we have an animation that only runs once, for example, the blue ball moving to the right, when the animation ends it will suddenly snap back to its initial position. To avoid this, you can use animation-fill-mode: forwards

.pulser::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: blue;
border-radius: 50%;
z-index: -1;
    
animation-name: move;
animation-duration: 2s;
animation-timing-function: linear;
animation-direction: alternate;
animation-fill-mode: forwards;
}

This way, when the animation finishes, the blue ball will remain in the final position.

If we use backwards instead of forwards, the animation will start from the final state.

If we set it to both, the animation will start from the initial state and end at the final state.

Everything in one line

We have a bunch of properties (animation-name, animation-duration, animation-timing-function, animation-direction, animation-fill-mode), but they can all be placed in one line. All of the above could be written like this

.pulser::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;background-color: blue;
border-radius: 50%;
z-index: -1;
    
animation: move 2s linear alternate forwards;
It seems like you've provided an incomplete or incorrect Markdown text to translate. Could you please provide the correct Markdown text that needs translation?

We can create several animations

.pulser::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: blue;
border-radius: 50%;
z-index: -1;
    
animation:
move 2s linear alternate forwards,
enlarge 1s linear 2s both;
}

But since the animation agrandar does not exist, we create it with keyframes

@keyframes enlarge {
0% {
transform: scale: 1;
It seems like you've provided an incomplete or incorrect Markdown text to translate. Could you please provide the full Markdown content for translation?
25% {
transform: scale: 1.5;
}
50% {
transform: scale: 2;
It seems like there might be some missing content in your request. Could you please provide the Markdown text you would like to have translated?
75% {
transform: scale: 1.6;
It seems like you've provided an incomplete or incorrect Markdown structure with just "}". Please provide the full Markdown text for translation to English.
100% {
transform: scale: 2;
It seems like there might be some missing context or content in your message. Could you please provide the Markdown text that needs to be translated?
It seems like you have not provided any Markdown text to translate. Could you please provide the Markdown content that needs translation?

They will play one after the other because enlarge has been given a delay of 2 seconds, which is how long the first animation lasts. But if we want them to play at the same time, we need to remove the delay.

.pulser::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: blue;
border-radius: 50%;
z-index: -1;
    
animation:
move 2s linear alternate forwards,
enlarge 1s linear both;
}

Scroll Animations

Example of progress bar

For example, if we want to make a bar that increases in size as we scroll down the page

<section>
<div id="bar"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</p>
</section>

section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
It seems like you might have intended to provide some Markdown text for translation but didn't include it. Could you please share the Markdown text you want translated?

#barra {
position: fixed;
top: 0;
width: 0%;
background-color: red;
height: 1em;

animation: barra-grow auto linear;
animation-timeline: scroll(root block);
It seems like you didn't provide any Markdown text to translate. Please provide the Markdown text you want translated to English.

@keyframes barra-grow {
from {
width: 0%;
It seems like you've provided an incomplete or incorrect Markdown text to translate. Could you please provide the full text? I'll make sure to translate it accurately while preserving its structure and style.
from {
width: 100%;
}
It seems like there might be a missing Markdown text to translate. Could you please provide the Markdown content that needs to be translated?

Since we set the duration of the animation to auto in animation, the browser will look at animation-timeline, where we indicate that it should pay attention to the scroll. Inside the scroll function, we specify which element it should focus on; in our case, we've used root because we want the page's scroll, but any other element on the page could be specified. Additionally, we need to tell it whether to pay attention to the vertical or horizontal scroll; in our case, we've set block because we want it to focus on the vertical scroll (block is the default value, so you don't have to specify it if you want).

If we want the header to change color when we scroll

<header>
<navigation>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>

header {
position: sticky;
top: 0;
width: 100%;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 2;
animation: header-color linear both;
animation-timeline: scroll(root block);
It seems like there might be a missing markdown text to translate. Could you please provide the markdown content that needs translation?

@keyframes header-color {
from {
background-color: white;
}
to {
background-color: gray;
backdrop-filter: blur(5px);
color: white;
}
It seems like you might have accidentally sent an incomplete request. If you provide me with the Markdown text you want translated to English, I'll be happy to help!

But doing it this way, the header animation only ends when you reach the end of the page, but we want it to end after a bit of scrolling. To achieve this, we remove the both from the animation and set animation-range: 0 200px so that the animation ends after a scroll of 200 px, meaning we are telling it that the animation goes from 0 px to 200 px.

header {
position: sticky;
top: 0;
width: 100%;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 2;

animation: header-color linear;
animation-timeline: scroll(root);
animation-range: 0 200px;
It seems like you've only provided a closing brace `}` without any Markdown content to translate. Please provide the full text in Markdown format that you would like translated into English.

Example of image gallery

Let's imagine we have a bunch of images and we want them to appear as we scroll.

<section>
<img src="img1.jpg" alt="image 1">
<img src="img2.jpg" alt="image 2">
<img src="img3.jpg" alt="image 3">
<img src="img4.jpg" alt="image 4">
<img src="img5.jpg" alt="image 5">
<img src="img6.jpg" alt="image 6">
<img src="img7.jpg" alt="image 7">
<img src="img8.jpg" alt="image 8">
<img src="img9.jpg" alt="image 9">
<img src="img10.jpg" alt="image 10">
</section>

section {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
It seems like you might have intended to provide some Markdown text for translation but didn't include it. Could you please provide the text you want translated?

img {
width: 100%;
height: auto;
opacity: 0;
animation: appear linear both;
animation-timeline: view()
animation-range: entry 20% cover 30%;
}

@keyframes appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
It seems like there was an issue with your request. Could you please provide the Markdown text you want to be translated?

With animation-timeline: view() we are telling it to perform the animation when the image is visible on the screen, and with animation-range: entry 20% cover 30% we are telling it that the animation should start when the image occupies 20% of the screen and end when it occupies 30% of the screen.

By setting both in animation, we are telling it that the animation should occur both when appearing and disappearing. This means that when the image appears, the animation is visible, but when it disappears, the reverse animation is also visible, gradually changing the opacity from 1 to 0.

Continue reading

MCP Elicitation: Implementing Elicitation in Servers with FastMCP and Python

Learn how to implement elicitation in MCP (Model Context Protocol) servers with FastMCP. Complete step-by-step tutorial to create an intelligent travel booking agent that requests user information interactively. Includes server and client code, virtual environment setup with uv, and practical elicitation examples for real-time user data collection.

MCP Durability: Server and Client with Persistence for Long-Running Tasks

Learn to build durable MCP server and client for long-running tasks with persistence. Complete Model Context Protocol tutorial featuring SQLite data persistence, background task management, and real-time monitoring. Implement data migration, batch processing, and ML model training that survive server restarts. Python code examples using FastMCP, resources, tools, and durability patterns for enterprise applications.

Resumable MCP: How to Build Servers and Clients with Automatic Checkpoints

Learn to build resumable MCP servers and clients with automatic checkpoint capabilities. Complete tutorial on implementing task interruption handling, state persistence, and recovery for long-running processes in Model Control Protocol. Includes practical code with FastMCP, persistent session management, and real-world examples for processes that can be interrupted and resumed from where they left off.

Last posts -->

Have you seen these projects?

Horeca chatbot

Naviground

Subtify

View all projects -->

Do you want to apply AI in your project? Contact me!

Do you want to improve with these tips?

Memory profiler

See the memory usage of a script

DataLoader with pin_memory and num_workers

Increase DataLoader performance with pin_memory and num_workers

py-smi

Python library to get GPU data like `nvidia-smi`

Last tips -->

Use this locally

Hugging Face spaces allow us to run models with very simple demos, but what if the demo breaks? Or if the user deletes it? That's why I've created docker containers with some interesting spaces, to be able to use them locally, whatever happens. In fact, if you click on any project view button, it may take you to a space that doesn't work.

Flow edit

FLUX.1-RealismLora

token_hmr

View all containers -->

Do you want to apply AI in your project? Contact me!

Do you want to train your model with these datasets?

short-jokes-dataset

Dataset with jokes in English

opus100

Dataset with translations from English to Spanish

netflix_titles

Dataset with Netflix movies and series

View more datasets -->

Parts of CSS (selector, properties, values)

Selectors

Styles

Color

Current Color

Inheritance

Sources

Border and Outline

Waterfall

Fallback

Specificity

Units

Units of length

Absolute Units

Relative units

Box Model

Inline boxes inline

Boxes block

Margin, Border, Padding and Content

Box Size When Changing Padding

Box Size When Changing the Border

Box Size When Changing the Margin

Box Size

Box-sizing

Overflow

Overflow hidden

Styling the Bar

Position

Position relative

Position absolute

Position fixed

Position sticky

Z-index

Flexbox and Grid

Flexbox

Flex-direction

Direction

Flex-wrap

Flex-flow

Flex-grow, Flex-shrink and Flex-basis

Order

Justify-content

Gap

Align-items

Align-content

Align-content vs Align-items

Align-self

Flexbox Practice

Grid

Grid container

Fraction

Empty Grid

Grid-auto-rows

Repeat

minmax

Inline boxes `inline`

Boxes `block`