If you’re unfamiliar with some of the CSS terms like Selector, Attribute Selector, Expression, Declaration, etc. then CSS Vocabulary will come in handy. It’s a page containing a CSS code snippet. You can click on each part of the code (or in the sidebar) to see which part is what. CSS Vocabulary →
Tag Archives: css
Flipping Pages with CSS
Nice pen by Amit Sheen:
Visualizing How Gradient Angles in CSS Work
Nils Binder noticed that Gradient Angles in Sketch, Figma, and CSS don’t behave exactly the same. To dig deeper into the subject he built this wonderful Pen that visualizes how gradient angles in CSS behave: The pen visualizes linear-gradient(var(–angle), #f09, #3023AE, #0ff). Very nice!
Creating 3D Illustrations with CSS
Alex Trost at Frontend Horse: One style I’ve been loving is the 3D work that Ricardo Oliva Alonso creates on CodePen. It’s a style that looks like it was drawn in Adobe Illustrator or modeled with Three.js. Ricardo will often find a piece on Dribbble and recreate it on CodePen, styling it entirely with HTML […]
CSS leading-trim – The Future of Digital Typesetting
Ethan Wang, who works at Microsoft: In a standard text box, there’s almost always extra space above and below the actual text. Because of this, when you use a text box to measure and implement spacing, it ends up larger than you intended. The bigger the line height, the bigger the problem. You can see […]
Feature Detecting CSS Flexbox Gap Support
In my post on Flexbox Gap I wanted to feature detect support for it using @supports. That however failed. As I then noted: In the demo above I wanted to show a warning in browsers that don’t support flexbox gap. For that I tried using @supports, which has proven to be successful before. .warning { […]
“On the origin of cascades“, a talk by @hdv on how CSS came to be
Hidde recently gave a talk at CSS Café on the origins of CSS: It’s been 25 years since the first people proposed a language to style the web. Since the late nineties, CSS lived through years of platform evolution. The cascade, specificity and the enormous choice in values and units set the language up for […]
A Lightweight Masonry Solution
With Masonry being specced in Grid Layout Module Level 2 – and already being implemented in Firefox – Ana Tudor looked into whipping up a lightweight fallback for browsers that don’t support it. 🤔 Masonry Layout? Masonry is a grid layout based on columns, as popularized by Pinterest. Unlike other grid layouts, it doesn’t have […]
The Just in Case Mindset in CSS
Some nice examples of defensive programming in CSS by Ahmad Shadeed. The just in case mindset aims to educate designers and developers to think ahead of time of some possible failure scenarios for a component. I called it just in case because that’s literally what it means. Just in case the title got longer, do […]
Enhancing User Experience With CSS Animations
Great talk by Stéphanie Walter (starting at 39:00): With practical examples, I show why certain animations work better than others and how to find the best timing and duration to build UI animations that “feel right”. I explain how our brain works, why and how animations contribute to improving user experience. And what you need […]