Use "translate" to turn off element translations - https://www.stefanjudis.com/today-i-learned/non-translatable-html-elements/
#css
#css
Stefanjudis
Use "translate" to turn off element translations
Use the `translate` attribute to disable localization for HTML elements.
👍1
A simple masonry-like composable layout
A masonry layout is a grid-like layout that has a set column system with a flexible, content-driven row system. What this setup does is allow content to be displayed in a brick wall-like layout — hence the name, masonry. Content is packed into space, rather than adhering to a strict, set row system.- https://piccalil.li/blog/a-simple-masonry-like-composable-layout/
#css
A masonry layout is a grid-like layout that has a set column system with a flexible, content-driven row system. What this setup does is allow content to be displayed in a brick wall-like layout — hence the name, masonry. Content is packed into space, rather than adhering to a strict, set row system.- https://piccalil.li/blog/a-simple-masonry-like-composable-layout/
#css
Piccalilli
A simple masonry-like composable layout
It’s going to be a long time until CSS masonry is ready for us to use in our projects so I’ve got a nice stop-gap here for you that uses composable layouts.
❤1👍1
Balancing Text In CSS
How to make text look more balanced
in CSS. - https://ishadeed.com/article/balancing-text-css/
#css
How to make text look more balanced
in CSS. - https://ishadeed.com/article/balancing-text-css/
#css
Ishadeed
Balancing Text In CSS
Make text look more balanced with text-wrap in CSS.
👍3
Using padding to space an input and label
Darin Senneff shares a technique to space an input and label using padding instead of margins, improving form alignment and consistency. - https://www.darins.page/articles/using-padding-to-space-an-input-and-label
#css
Darin Senneff shares a technique to space an input and label using padding instead of margins, improving form alignment and consistency. - https://www.darins.page/articles/using-padding-to-space-an-input-and-label
#css
Darin Senneff
Using padding to space an input and label - Darin Senneff
Something I started doing lately is using the padding of a <label> element to create the space between it and an <input> instead of a margin or…
👍1
Typecasting and Viewport Transitions in CSS with tan(atan2)
Juan Diego Rodríguez explores the mathematical approach behind CSS transitions using tan(atan2) for smooth viewport-based animations. - https://css-tricks.com/typecasting-and-viewport-transitions-in-css-with-tanatan2/
#css
Juan Diego Rodríguez explores the mathematical approach behind CSS transitions using tan(atan2) for smooth viewport-based animations. - https://css-tricks.com/typecasting-and-viewport-transitions-in-css-with-tanatan2/
#css
CSS-Tricks
Typecasting and Viewport Transitions in CSS With tan(atan2()) | CSS-Tricks
We've been able to get the length of the viewport in CSS since... checks notes... 2013! Surprisingly, that was more than a decade ago. Getting the
👍2
CSS attr() gets an upgrade
Bramus Van Damme details the new capabilities of CSS attr(), allowing type casting for improved dynamic styling and flexibility. - https://www.bram.us/2025/01/20/css-attr-gets-an-upgrade/
#css
Bramus Van Damme details the new capabilities of CSS attr(), allowing type casting for improved dynamic styling and flexibility. - https://www.bram.us/2025/01/20/css-attr-gets-an-upgrade/
#css
Bram.us
CSS attr() gets an upgrade
You can now use `attr()` with any CSS property — not just content – and it can parse values into data types other than .
👍1
Faux Containers in CSS Grid
Tyler Sticka explains how to create visually distinct containers in CSS Grid without extra markup, enhancing design adaptability. - https://cloudfour.com/thinks/faux-containers-in-css-grids/
#css
Tyler Sticka explains how to create visually distinct containers in CSS Grid without extra markup, enhancing design adaptability. - https://cloudfour.com/thinks/faux-containers-in-css-grids/
#css
Cloud Four
Faux Containers in CSS Grids
A simple trick for styling cards with breakout elements.
👍1
Reimagining Fluid Typography
Miriam Suzanne introduces fluid typography techniques in CSS, balancing readability across different screen sizes. - https://www.oddbird.net/2025/02/12/fluid-type/
#css
Miriam Suzanne introduces fluid typography techniques in CSS, balancing readability across different screen sizes. - https://www.oddbird.net/2025/02/12/fluid-type/
#css
OddBird
Reimagining Fluid Typography
Are we responding to the right inputs?
👍1
Love at first slide! Creating a carousel purely out of CSS
Brecht De Ruyte showcases a CSS-only carousel, eliminating JavaScript for a lightweight and accessible slider experience. - https://utilitybend.com/blog/love-at-first-slide-creating-a-carousel-purely-out-of-css
#css
Brecht De Ruyte showcases a CSS-only carousel, eliminating JavaScript for a lightweight and accessible slider experience. - https://utilitybend.com/blog/love-at-first-slide-creating-a-carousel-purely-out-of-css
#css
Utilitybend
Love at first slide! Creating a carousel purely out of CSS | utilitybend
This Valentine's Day, fall in love with a new way to build carousels: pure CSS! Discover the power of CSS scroll-markers to create fully functional sliders without dependencies. Lets take a first look at this new feature.
👍1
Some little ways I’m using CSS :has() in the real world
This is a practical look at how Andy Bell has been using the :has() pseudo-class in actual client projects. He shares a few real-world examples, like adjusting banner layouts based on the presence of a button or using :has() to flexibly style form labels when they contain inputs. Nothing fancy here, but definitely a solid read if you want to see how :has() can make your life easier. - https://piccalil.li/blog/some-little-ways-im-using-css-has-in-the-real-world
#css
This is a practical look at how Andy Bell has been using the :has() pseudo-class in actual client projects. He shares a few real-world examples, like adjusting banner layouts based on the presence of a button or using :has() to flexibly style form labels when they contain inputs. Nothing fancy here, but definitely a solid read if you want to see how :has() can make your life easier. - https://piccalil.li/blog/some-little-ways-im-using-css-has-in-the-real-world
#css
Piccalilli
Some little ways I’m using CSS :has() in the real world
I’ve created some low fidelity demos of :has() snippets that I’ve been using in real-world client projects.
👍1