In “CSS Box Sizing Module Level 4” a new aspect-ratio CSS property is defined. Let’s take a look on how to use it …
Native Aspect Ratio Boxes in CSS thanks to aspect-ratio
Tag Archives: css
Native Aspect Ratio Boxes in CSS thanks to
The Raven Technique: One Step Closer to Container Queries
Building further upon The Holy Albatross technique, comes The Raven Technique by Mathias Hülsbusch: I want to get closer to actual container queries! So, what does CSS have offer that I could tap into? I have a mathematical background, so functions like calc(), min(), max() and clamp() are things I like and understand. Next step: …
Continue reading “The Raven Technique: One Step Closer to Container Queries”
Container Queries are coming to Chromium!
Just announced on the Chromium mailing list is an “Intent to Prototype” Container Queries. Let’s take a look at the proposed syntax …
HTML Forms: How (and Why) to Prevent Double Form Submissions
When double clicking a form’s submit button your form will be sent twice. With a tad of JavaScript this can be prevented from happening.
CSS Vocabulary
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 →
Flipping Pages with CSS
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 …
Continue reading “CSS leading-trim – The Future of Digital Typesetting”
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 { …
Continue reading “Feature Detecting CSS Flexbox Gap Support”