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 →
Tag Archives: 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)
In Chrome 96 some fonts render their hyphens as boxes. The fix will ship with Chrome 98, but in the meantime, we can use some CSS to fix it.
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 …
CSS Paint API Linksbag
There’s a bunch of Houdini Paint API posts and demos that I’ve enjoyed lately. Here’s a small roundup …
Checkbox Rasterizer
Fun demo by Emanuel Kluge that processes an image and renders them in a grid of checkboxes. The colouring is done using accent-color. Note that not all browsers support accent-color at the time of writing. Embedded below is a Pen that indicates whether your browser supports it or not. See the Pen CSS accent-color Support …
Advent Calendars For Web Designers And Developers
I was planning on posting about the HTMHell Advent Calendar here on bram.us, but over at Smashing Magazine you a whole list of interesting Advent Calendars. Once again, the web community has been busy with creating some fantastic advent calendars this year. As you’ll see, each and every one of these calendars are sure to …
Continue reading “Advent Calendars For Web Designers And Developers”