This media is not supported in your browser
VIEW IN TELEGRAM
🔰 Container queries in CSS
If you have not tried out container queries yet, would highly recommend that you do 🤩
This is a relatively new CSS feature, which is similar to media queries. While media queries are based on the dimension of the entire page, container queries are specific to individual elements in a page.
👉 Here we define a "container" and conditionally style elements inside the container based on the dimensions of the container
👉 Some other examples include, when you want to style an individual card based on its size
If you have not tried out container queries yet, would highly recommend that you do 🤩
This is a relatively new CSS feature, which is similar to media queries. While media queries are based on the dimension of the entire page, container queries are specific to individual elements in a page.
👉 Here we define a "container" and conditionally style elements inside the container based on the dimensions of the container
👉 Some other examples include, when you want to style an individual card based on its size
This media is not supported in your browser
VIEW IN TELEGRAM
🔰 A simple, CSS-only typing effect
In CSS, the ch unit defines the width of a single character. The reason we are using a monospace font is because they have the same width for any character 😁
We use a simple key frame animation to automate the width of the element from 0 to some max size of the text.
✨ The steps animation timing function is important, because it enables to set the width in a staggered manner (1ch, 2ch, 3ch, etc) and not a continuous smooth way
✨ We also disable text wrapping so that the text is presented in a single line irrespective of the width - which is important for this effect
In CSS, the ch unit defines the width of a single character. The reason we are using a monospace font is because they have the same width for any character 😁
We use a simple key frame animation to automate the width of the element from 0 to some max size of the text.
✨ The steps animation timing function is important, because it enables to set the width in a staggered manner (1ch, 2ch, 3ch, etc) and not a continuous smooth way
✨ We also disable text wrapping so that the text is presented in a single line irrespective of the width - which is important for this effect
🔰 Auto fill Pseudo Element in CSS
Default browser highlights in auto-filled fields can clash with a site’s design. By leveraging the
Default browser highlights in auto-filled fields can clash with a site’s design. By leveraging the
:-webkit-autofill pseudo-class, developers can override these styles and ensure consistent branding across modern browsers.Assume you have a 5x5 grid in CSS. There are items spanning different sizes, but no fixed to any specific position.
🤩 For such cases, using a "dense" mode for grid-auto-flow property allows you to "fill in the gaps" created by previous elements, by pushing latter elements that fit into the gap
🖼 This could be helpful for things like an image gallery, where you have random sizes of elements
📁 Sample code snippet:
🤩 For such cases, using a "dense" mode for grid-auto-flow property allows you to "fill in the gaps" created by previous elements, by pushing latter elements that fit into the gap
🖼 This could be helpful for things like an image gallery, where you have random sizes of elements
📁 Sample code snippet:
.grid {
grid-template-rows: repeat(5, 10rem);
grid-template-columns: repeat(5, 10rem);
}
.item-2 {
grid-row-end: span 2;
grid-column-end: span 2;
}