A Few Interesting Ways To Use CSS Shadows For More Than Depth — Smashing Magazine
We often think of shadows in CSS as something to reach for when we want to add depth to a design. But shadows can be used for more than depth. Let’s experiment with different shadows — two CSS properties and a filter — to make interesting hover effects, different text styles, and even casting shadows on other shadows.
Words To Avoid in Educational Writing | CSS-Tricks
I'm no English major, but as a writer and consumer of loads of educational (mostly tech) writing, I've come to notice a number of words and phrases that come
Advanced Form Control Styling With Selectmenu And Anchoring API — Smashing Magazine
Thanks to the Open UI working community group, there’s a new element on the horizon, selectmenu, that will make styling this type of form control a whole lot better. You’re going to walk through an early implementation of this new experimental element by creating a pattern that you would never have thought possible with CSS alone — a radial selection menu.
Modern CSS For Dynamic Component-Based Architecture | Modern CSS Solutions
Explore modern project architecture, theming, responsive layouts, and component design. Learn to improve code organization, dig into layout techniques, and review real-world, context-aware components that use cutting-edge CSS techniques.
Creating a Fluid Type Scale with CSS Clamp | Aleksandr Hovhannisyan
Fluid typography allows each font size in a modular scale to vary responsively between a min and max. Learn the math behind fluid typography and how to programmatically generate a fluid type scale with CSS clamp and Sass.
Anchor positioning might be one of the most exciting features coming to CSS. It is currently available under an experimental flag in Chrome Canary, and after playing with it for a bit, I couldn’t stop myself from sharing what I found. In this article, I will show you some of my experiments.
Solving Media Object Float Issues With CSS Block Formatting Contexts — Smashing Magazine
This article covers common problems using CSS floats and how to solve them using a block formatting context (BFC). Whether you are a beginner or an experienced web developer, you will learn valuable insights and practical solutions for dealing with CSS float issues.
Vertical rhythm using CSS lh and rlh units | pawelgrzybek.com
Vertical rhythm is a design concept that helps to create a harmonious layout by following consistent spacing between elements, typically using the height of a line as a base.
Several years ago, I made a plea to save scoped CSS. One of the top features on my CSS wishlist was on the chopping block, and despite a pretty big push from th
I first got into web design/development in the late 90s, and only as I type this sentence do I realize how long ago that was. And boy, it was horrendous. I mean, being able to make stuff an
The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. It can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-element's originating element is returned.
CSS has a great new feature where you can specify the color space to use by adding in to the gradient (not yet supported in Firefox). This is especially useful
CSS has been undergoing a quiet renaissance lately. Lots of big features which previously required an external tool to use, are now native parts of the language, and its growing more and more all the time. If you haven't used CSS in a long time, for whatever reason, now is the time to take a look again.
light-dark() Saw Bramus post about this. :root { color-scheme: light dark; –text-color: light-dark(#333, #ccc); } Apparently, this is just a first step on the way toward a more robust schemed…
Modular CSS and different ways to structure your stylesheets
This week, I’ve written about classless vs. class-based CSS, and how I approach CSS architecture. I’ve also written a fair bit recently about how I’m starting to consider build tools and anti-pattern.
This has led to a few conversations about how to structure CSS and and work with modular files if you’re not using a compiler like Sass. Today, I wanted to talk about that.
Let’s dig in!
Modular files and build tools One of the big benefits of using a build tool like Sass or css-nano is that you break your CSS up into smaller, more modular files, then combine them into one file for deployment.