Category: 'css'
-
The mythical magical button
How to create a minimal stylesheet with modern CSS that allows you to create a whole new range of buttons with just a single custom property.
-
Slightly enhanced sticky revealing footer
Andy Bell showed a nice little UI effect with his “sticky revealing footer”. However, on some pages, the experience was mediocre. A quest was started to improve it.
-
A modern picture showcase using CSS
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
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”
A guide on using the “previous-sibling combinator” trick to recreate the magnifier effect of the MacOS dock.
-
Using recursive CSS to change styles based on depth
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
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
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
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
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
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
A little CSS trick to get a count of child elements on your parent selector.
-
A nth-child CSS trick
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
How to make an interactive stacked bar chart using only CSS and HTML
-
Dark mode using progressive enhancement
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
One off the most beautiful CSS selectors is the Lobotomized Owl Selector of Heydon Pickering
-
Scalable CSS architecture
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
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
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
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
Fluid interfaces allow you scale elements of your website based on on the available space, without using media-queries