The five best design links, every weekday

Category: Css

All Categories

kittygiraudel.com

CSS Pie Timer Revisited

Almost 9 years ago, I wrote about making a pure CSS pie timer. It’s something I struggled with and was very proud of solving at the time.

kittygiraudel.com

An accessible toggle

Toggles (or sometimes “toggle switches”) are heavily used in modern interfaces.

css-irl.info

Paper Snowflakes: Combining Clipping and Masking in CSS

Just after Christmas I made a fun little Codepen demo recreating realistic-looking paper snowflakes in CSS, inspired by our homemade decorations!

ishadeed.com

Inspect Element As A Way To Increase Your Curiosity

One of the best gifts we have as front-end developers is inspect element.

blog.jim-nielsen.com

CSS Is, In Fact, Awesome

This is the power of CSS. It gives you options. Use them or don’t.

callumhart.com

CSS Variables That Mimic Chameleons

Choosing CSS variable names that adapt to different contexts.

moderncss.dev

Developing For Imperfect: Future Proofing CSS Styles

How do we plan future-proof styles in a world with an infinite degree of device and user ability variance?

piccalil.li

Container Queries are actually coming

After years of asking and memes, we’re finally getting container queries and they will transform UI design, just like media queries did.

tonsky.me

Font size is useless; let’s fix it

What happens when you set fontSize: 32 in your favorite editor?

joshwcomeau.com

Building a Magical 3D Button

Every action we take on the web starts with a button click, and yet most buttons are ho-hum and uninspired.

css-tricks.com

Tools for Auditing CSS

Auditing CSS is not a common task in a developer’s everyday life, but sometimes you just have to do it.

calibreapp.com

How to Improve CSS Performance

Learn the most common speed issues caused by CSS and how to avoid them.

web.dev

Compat2021: Eliminating five top compatibility pain points on the web

Google is working to fix the top five browser compatibility pain points for web developers.

ishadeed.com

Handling Text Over Images in CSS

Learn how to handle text over images in CSS by taking accessibility in mind.

chartscss.org

Charts.css

CSS data visualization framework.

css-tricks.com

Taming Blend Modes: `difference` and `exclusion`

Up until 2020, blend modes were a feature I hadn’t used much because I rarely ever had any idea what result they could produce.

css-tricks.com

Did You Know About the :has CSS Selector?

I think the :has CSS selector is going to have a big impact on how we write CSS in the future.

smashingmagazine.com

CSS Generators

From CSS shadows to easing gradients to CSS overlays to CSS doodles.

css-tricks.com

Creating Patterns With SVG Filters

For years, my pain has been not being able to create a somewhat natural-looking pattern in CSS. I mean, sometimes all I need is a wood texture.

dev.to

CSS Grid Cheat Sheet Illustrated

Let's refresh Our CSS Grid Memory. Here's a Cheat Sheet of everything you can do with Grid to get started in 2021!