Category "css"

• A modern picture showcase using CSS

  January 6, 2025 My newest favorite way to create adaptable and flexible layouts is by using grid template areas. Especially combined with other modern CSS solutions it becomes extremely powerful. In this article, I use it to create an adaptable picture showcase that can handle many different configurations.

• I cannot wait for the CSS @function

  December 29, 2024 In my quest to apply as much cool CSS tricks as possible, I encountered an issue that navigated me towards a new and exciting CSSWG draft.

• MacOS-like dock effect with a “previous-sibling combinator”

  May 20, 2024 A guide on using the “previous-sibling combinator” trick to recreate the magnifier effect of the MacOS dock.

• Self-modifying variables: the inherit() workaround

  May 8, 2024 external How style queries can be used to calculate the depth of CSS elements, once released to the public

• Using recursive CSS to change styles based on depth

  February 11, 2024 Can CSS be used recursively to change styles based on the depth of an element in a container? Well it can, but it is a little tricky.

• Combining :has and :only-child to change tab containers

  January 15, 2024 For a styling implementation detail, I set the challenge to come up with a CSS-only solution, instead of implementing the logic in a front-end framework.

• Combining :placeholder-shown and :has

  August 19, 2023 Yesterday my wife told me about this :placeholder-shown selector. I had visual question marks above my head because I never heard of it before. But it sparked curiosity about what it could give me.

• Going back to CSS-only after years of SCSS

  July 3, 2023 When migrating my website to Eleventy, it ditched SCSS and went old school. I went removed a complexity layer to see if CSS-only is a viable option these days.

• Different approaches to fluid typography and layouts

  March 7, 2023 Fluid web page design can be more user-friendly, because it adjusts to the user's set up. There are several approaches to achieving this.

• Hiding side content in responsive design

  February 24, 2023 A trick to hide content in specific responsive layout patterns without the need for media queries. But with a few gotchas.

• Use the child-element count in CSS

  February 21, 2023 A little CSS trick to get a count of child elements on your parent selector.

• A nth-child CSS trick

  January 25, 2023 A little CSS trick that allows you to use nth-child values in the CSS calc() function.

• Creating a stacked bar chart using only CSS

  January 22, 2023 How to make an interactive stacked bar chart using only CSS and HTML

• Dark mode using progressive enhancement

  July 30, 2022 Is it possible to create a light-dark switcher without JavaScript, that takes into account system preferences? Let’s find out.

• An ode to the CSS owl selector

  March 5, 2022 One off the most beautiful CSS selectors is the Lobotomized Owl Selector of Heydon Pickering

• Scalable CSS architecture

  January 29, 2022 In the last two years, I found that my CSS architecture was becoming too complex. But, utility-first frameworks were not doing it for me either. I needed a mix, I needed utility-enabled. Then came CUBE CSS and it all clicked.

• Horizontal centering in CSS

  June 20, 2021 Horizontal centering is an ancient problem in CSS. With CSS Grid we are able enhance this layout pattern. But, this gives us other issues. Let's find a better solution.

• Binding CSS and JavaScript with HTML data-attributes

  April 22, 2021 HTML data-attributes allow you to bind CSS and JavaScript more closely to each other. By utilizing this type of attribute, you can reduce the amount of JavaScript required for styling, and move this responsibility back to CSS.

• Modern CSS grid solutions to common layout problems

  July 6, 2020 Responsive layouts are one of the more complicated problems in CSS. With the addition of CSS grids, we are now able to solve complex problems.

• Fluid interfaces using CSS

  June 27, 2020 Fluid interfaces allow you scale elements of your website based on on the available space, without using media-queries