CSS in 2022
Tag Archives: css
Organic Blobs in CSS with border-radius
Nils and Mirko from 9elements create a handy tool to create blobs using border-radius. When you use eight values specifying border-radius in CSS, you can create organic looking shapes. Like so: border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%; And as that’s CSS, you can also animate that easily: See the Pen Untitled …
The Fundamentals of CSS Layout
At Chrome Dev Summit 2021, Rachel Andrew hosted a workshop “The Fundamentals of CSS Layout”. If you’re looking to get started with CSS Grid and Flexbox, this is the video you’re looking for. In this 90-minute workshop you’ll learn about the key CSS layout methods of flexbox and grid. You’ll learn how these layout methods …
Pico.css — Minimal CSS Framework for semantic HTML
Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled. It’s no coincidence the site looks similar to the one from The Framework That Must Not Be Named 😅 Pico.css →
Create semi-transparent CSS background images by crossfading them with a transparent GIF
Nice work by Chris: when you crossfade an image — using the proprietary -webkit-cross-fade() — with a transparent gif, you can create semi-transparent background images. .el { background-image: -webkit-cross-fade( url(image.jpg), url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7), /* transparent GIF, base64 encoded */ 50% ); Clever! WebKit/Chromium based browsers only though (i.e. no Firefox) Maybe there kinda is background-opacity? →
The CSS :has() selector is way more than a “Parent Selector”
Safari TP 137 just dropped with unflagged support for :has(). Often dubbed “the parent selector”, :has() is way more than that …
Easing Gradients
An issue with linear gradients in CSS is that they often have hard edges where they start and/or end or transition from one color to the other. In 2017, Andreas Larsen wrote about them on CSS-Tricks, eventually leading him to create a nice editor to generate them. Sparked by that post, a CSSWG Issue to …
Broken Hyphens in Chromium 96: An Explanation (and Fix)
12 Days of Web
12 Days of Web is Stephanie Eckles‘s “advent” calendar. A year-end celebration of fundamental web technologies: HTML, CSS, and JavaScript. Three days in, and she has already covered Intersection Observer, <details> + <summary>, and CSS Custom Properties. Good stuff. 12 Days of Web → Related: Find more web advent calendars here.
The State of CSS 2021
Just like last year and the year before, Sacha Greif (with help from a team of contributers and consultants) ran “The State of CSS Survey”. This survey was created to identify upcoming trends in the web development ecosystem in order to help developers make technological choices. As such, these surveys are focused on anticipating what’s …