CSS Icon

CSS

Styling the web and views since 1996.
183 Stories
All Topics

Bryan Braun bryanbraun.com

Flying toasters (and other old screensavers) in CSS

Bryan Braun:

Do you longingly reminisce about the days when flying toasters graced your screen? Do words like ā€œConfetti Factoryā€ and ā€œDaredevil Danā€ make your heart skip a beat?

If so, then never fear—CSS is here! Using modern CSS techniques like animations and transforms, we can imitate several of your favorite After Darkā„¢ screensavers.

The animations were made with CSS alone. No animated gifs or JavaScript.

Flying toasters (and other old screensavers) in CSS

GitHub pragmaticpineapple.com

Sneaking custom HTML & CSS in to your GitHub README

Nikola Đuza lays out a way you can customize your README to stand out from the crowd:

GitHub supports adding HTML in Markdown, but it is pretty aggressive when removing HTML that can be potentially dangerous to users. Things like scripts, iframes, and similar will get removed or ā€œsilencedā€ to avoid malicious content from being served to users.

Luckily, there’s one way to sneak in some HTML (or a web page) inside the README. You can do it via SVG and foreignObject SVG element.

Sneaking custom HTML & CSS in to your GitHub README

Tailwind CSS jakelazaroff.com

Tailwind is a leaky abstraction

Jake Lazaroff spent the last few months learning Tailwind with an open mind and he’s ready to share his opinion of the popular CSS framework:

Tailwind is commonly described as ā€œutility classesā€, but that’s a bit of an understatement. It’s essentially a small language you write in the class attributes of your HTML that compiles to a combination of CSS rules and selectors — an abstraction over CSS. But all abstractions leak, and Tailwind is very leaky.

When an abstraction leaks, it means you still have to be aware of (and sometimes deeply so) the underlying layer that’s being abstracted. In this case, Jake is saying that you still need to know CSS to use Tailwind and lays out a few scenarios in which this is the case.

This might be unfair to Tailwind. To my knowledge, the team has never promoted it as a CSS replacement. At its core, it really is just a set of class names that apply styles. But even after working with it for months, there’s still a mental translation layer between ā€œTailwind CSSā€ and ā€œreal CSSā€.

Sacha Greif CSS-Tricks

Is there too much CSS now?

Now that we’re out of the ā€˜dark times’ where CSS was so limited that we spent countless hours developing hacks, tricks, and workarounds… Sacha Greif wonders if the pendulum has swung the other way:

we are now faced with an embarrassment of CSS riches, and it can be hard to catch up. CSS Grid started being supported in major browsers almost five years ago, yet I still check a reference every time I use it. And as cool as subgrid seems, I’ve yet to even try it out.

Perhaps CSS is even starting to reach over into areas best handled by HTML or JavaScript?

CSS daverupert.com

Modern alternatives to BEM

Dave Rupert brainstorms some new CSS organization acronyms.

I’m not anti-BEM nor anti-roboclasses, but as we enter a new era for CSS I think we have an opportunity to rethink best practices around architecting CSS. Before we get lost rethinking the wheel, let’s hold on to some good principles from the past decade or so:

  • We want to author in components
  • We generally want low-specificity to avoid collisions
  • We want a bucket of global utility classes/variables for ad-hoc composition or customizations

With those principles, let’s dive into some CSS architecture alternatives.

He goes on to describe CUBE, HECS, WILS, GPC, and other systems that haven’t even been named yet šŸ˜†

HTML web.dev

A course that breaks down every aspect of modern PWA development

This course from the folks at web.dev targets beginners and advanced developers alike.

You’ll learn PWA fundamentals like the Web App Manifest, service workers, how to design with an app in mind, what’s different from a classic web app, how to use other tools to test and debug your PWA. After these fundamentals, you’ll learn about integration with the platform and operating system, how to enhance your PWA’s installation and usage experience, and how to offer an offline experience.

Changelog Interviews Changelog Interviews #500

The legacy of CSS-Tricks

Episode 500!!! And it has been a journey! Nearly 13 years ago we started this podcast and as of today (this episode) we’ve officially shipped our 500th episode. As a companion to this episode, Jerod and Adam shipped a special Backstage episode where they reflect on 500 episodes. And…not only has it been a journey for us, but it’s also been a journey for our good friend Chris Coyier and CSS-Tricks — which he grew from his personal blog to a massively popular contributor driven model, complete with an editor-in-chief, a wide array of influential contributors, and advertisers to help fund the way. The news, of course, is that CSS-Tricks was recently acquired by DigitalOcean in March of 2022. We get into all the details of this deal, his journey, and the legacy of CSS-Tricks.

Robb Owen robbowen.digital

Holograms, light-leaks and how to build CSS-only shaders

Robb Owen:

Why let JS have all the fun? With mix-blend-mode finally gaining wide browser-support, we now have access to many of most common shading techniques in CSS. With some choice images and a bit of careful layering it’s possible to build some surprisingly high-quality effects without the need for introducing any JS dependencies.

If you’ve ever used Photoshop’s Blend Modes… you can basically do that in CSS now. So cool! Check out Robb’s entire article. He includes a lot of great examples.

Player art
  0:00 / 0:00