Two techniques that bypass the black-or-white limit of contrast-color() for custom color palettes.
Una Kravets
https://una.im/ · 131 posts · history since 2013 · active
13 Mar
12 Mar
Let the browser pick the most readable text color for any background with this new CSS function.
19 Feb
Learn about new geometry capabilities with this game-changing experimental CSS feature.
6 Jan
2025 in review.
17 Dec 2025
Style based on scroll direction with this new scroll-state query feature.
8 Dec 2025
Sculpt a more dynamic web, and learn about the new CSS and UI features that landed in Chrome in 2025.
12 Nov 2025
Learn how to use the new range syntax for CSS style queries and the if() function.
29 Oct 2025
Identify and style an anchored element in a fallback anchor position.
11 Sept 2025
Learn how to create a dynamically re-anchored pointer element.
13 Aug 2025
CSS custom functions are a gamechanger. Here are 5 really useful examples.
29 Jul 2025
scroll-target-group is a new CSS feature that lets you create scroll-spy table of contents with basically 2 lines of CSS.
7 Jul 2025
Learn about what exactly this new popover feature does and how it relates to interest invokers.
21 Jan 2025
Advanced attr() is landing in Chrome 133, and I'm really excited for this feature! Here's a bit about it and how you can use it.
10 Jan 2025
Everything that has changed since the RFC post for this feature.
6 Jan 2025
2024 in review.
12 Sept 2024
Learn about the new customizable select component, and try it out today.
12 Jul 2024
The CSS Anchor Positioning API is a game-changer in web development because it lets you natively position elements.
11 Jun 2024
The web platform is alive with innovation, with CSS and web UI features at the forefront of this exciting evolution.
10 May 2024
The CSS Anchor Positioning API is a game-changer in web development because it lets you natively position elements.
25 Apr 2024
Popover provides so many great developer affordances for building layered interfaces like tooltips, menus, teaching UIs, and more.
31 Dec 2023
Annual year in review: 2023 edition.
8 Dec 2023
2023 was a huge year for CSS! Learn about all the Web UI highlights that landed in browsers this year.
23 Oct 2023
The select element gets a small but mighty upgrade where you can now add (horizontal rule) elements into the list of options and they will appear as separators.
16 Aug 2023
These four new features include: animating display and content-visibility on a keyframe timeline, the transition-behavior property, the @starting-style rule, and the overlay property.
20 Jul 2023
Learn how to build a fluid, modern radial menu leveraging new and upcoming CSS capabilities.
5 Jul 2023
Catching up on last year's year-in-review post
23 May 2023
Popovers are everywhere on the web platform. Learn how to use the new web platform primitives to take advantage of them today.
11 May 2023
Popovers are everywhere on the web platform. Learn how to use the new web platform primitives to take advantage of them today.
31 Mar 2023
Build an alpha color system without splitting out channels using this one neat trick.
24 Feb 2023
With style queries landing in stable Chrome, learn about how to use them in applications.
14 Feb 2023
Learn about working with container queries and the polyfill.
15 Sept 2022
Learn about working with container queries and the polyfill.
3 Aug 2022
Leverage the responsive UI power of container queries + :has().
27 Jun 2022
Exploring when and how you would use style queries in your day-to-day work.
1 Feb 2022
Learn about using cascade layers to control the CSS cascade for more targetted styles.
31 Dec 2021
Reviewing 2021's highs, lows, and everything in between.
28 Dec 2021
Behind-the-scenes of designcember.com.
22 Dec 2021
I answer the question "what is one thing you can do to make your site better?"
2 Jun 2021
CSS-related techniques for optimizing Core Web Vitals.
26 May 2021
Controlling macro and micro layout in a new era of responsive web design.
11 May 2021
@container brings us the ability to style elements based on the size of their parent container.
22 Feb 2021
Learn about using cascade layers to control the CSS cascade for more targetted styles.
28 Jan 2021
The new CSS property that helps maintain spacing in responsive layouts.
22 Dec 2020
Well this year absolutely sucked. But I'll try to take a look at the positive.
10 Dec 2020
Supercharging your CSS with Houdini paint worklets is just a few clicks away.
14 Oct 2020
Learn how to control element sizing, maintain proper spacing, and implement fluid typography using these well-supported CSS functions.
5 Aug 2020
Improve initial load time by skipping the rendering of offscreen content.
21 Jul 2020
The Houdini Properties and Values API is coming to your CSS file in Chromium 85.
7 Jul 2020
This post highlights a few powerful lines of CSS that do some serious heavy lifting and help you build robust modern layouts.
27 May 2020
Orchestrating animations with promises, performance improvements with replaceable animations, smoother animations with composite modes, and more.
27 Apr 2020
A study on selective color from a predefined list, using CSS custom properties, a little bit of JavaScript, and some progressively enhanced CSS Houdini.
22 Jan 2020
In the past few years, we’ve seen a lot of change and diversion in regard to web technologies. In 2020, I foresee us as a web community heading toward two major trends/goals: extensibility and interoperability.
16 Jan 2020
The latest update to our density guidelines includes a new systematic approach to applying density and spacing in digital products.
10 Jan 2020
2019 was a massive year for me. I like to reflect on the year and set some goals for the future.
5 Dec 2019
Did you know that you can build custom dynamic color themes without the use of JavaScript or a CSS preprocessor!? Read on!
25 Sept 2019
Creative web design and systematic web design don’t need to be at arms. This post examines how to use a design system (Material) and extend it to make it your own.
3 Jun 2019
Creative web design and systematic web design don’t need to be at arms. This post examines how to use a design system (Material) and extend it to make it your own.
27 Mar 2019
Just a little writeup about what I've learned and what I'm up to next.
26 Mar 2019
Map, reduce, and filter are three very useful array methods in JavaScript that give developers a ton of power. This post makes them a little easier to understand.
9 Jan 2019
I wrote a blog post for LogRocket about CSS Houdini and the Paint API! Complete with demos and illustrations.
8 Jan 2019
With expanding web technoligies, we can now interpret responsive design as the way it affects a user’s context, and how we can be the most responsive to the user’s needs and experience.
4 Jan 2019
Reviewing how my 2018 went, and discussing goals for next year!
26 Jul 2018
The old-third post in my "Solved with CSS" Series, this time detailing how you can use CSS to apply logical styling based on how many elements are inside of a parent.
22 May 2018
A feature on Bustle, sponsored by Windows, on my some of my teammates and myself, where we discuss work, the team, and falling in love with coding.
1 May 2018
A CSS Tricks post on how we can create accessible dropdowns using only vanilla CSS.
30 Mar 2018
A CSS Tricks post on how we can colorize inaccessible SVG backgrounds by using CSS filters, instead!
27 Mar 2018
This is my second Pastry Box Project post: on why working with other people makes projects more rewarding.
31 Dec 2017
Keeping the tradition alive! My 2017 in review and 2018 goals.
14 Dec 2017
This 24-Ways post looks into why the implementation of design systems and how to ensure that yours is successful.
12 Dec 2017
It's hard to stay on task and productive — especially when we've got so much going on in our lives. This post details how I maintain a TODO list system to accomplish just that.
17 Nov 2017
With CSS filter effects and blend modes, we can now leverage various techniques for styling images directly in the browser. However, creating aesthetic theming isn't all that filter effects are good for. You can use filters for web performance, too.
5 Jun 2017
Leveraging CSS Variable scope improves the size, specificity, and semantics of our stylesheets. This article talks all about what CSS Variables are and how we can leverage scope to improve our styling.
24 Apr 2017
VSCode just released custom workspaces! This means you can customize your text editor layout and style for different projects within a single editor!
30 Mar 2017
An awesome CSS grid tool was just released for Firefox, and the web has been buzzing about it. This is a short post about my 3 favorite features!
8 Mar 2017
The best way to learn any new skill is through practice. This post is about how to come up with creative and effective side projects for developers to keep up with today's ever-changing technology.
23 Feb 2017
I was on the Shoptalk Show (hosted by Chris Coyier and Dave Rupert) with Krystal Higgins talking about An Event Apart, speaking, and finding a "thing"
26 Jan 2017
I recently added an option to save blog posts for offline reading. This post details how I did that and how you can too.
28 Dec 2016
It's time for my annual reflection and goal resetting circa 2016
27 Dec 2016
My father, an industrial engineer with over 20 years od experience talks about interface design and the important of simplicity in programming.
6 Nov 2016
From Google's physical web project to the emergence of more affordable virtual reality and augmented reality systems, it's time to take a serious look at how the web is changing, and the exciting possibilities for its application outside of screens.
17 Oct 2016
I was on the Responsive Web Design Podcast, co-hosted by Karen McGrane and Ethan Marcotte, with my coworker Zach Schnackel to discuss the new digitalocean.com
26 Sept 2016
Component libraries can be very useful in terms of organization, unity, and ensuring performance/accessibility. Here are 3 things to understand when embarking on building your own.
17 Aug 2016
We unified the site with our updated branding, and also focused on improving digitalocean.com's accessibility, organization, and performance.
1 Aug 2016
This post started with a simple search and turned into a trove of undocumented knowledge I discovered about finicky cross-browser SVG properties.
11 Jul 2016
Wish media being the biggest performance bottleneck on the web, let's turn our focus to design. This post outlines 3 easy wins for more performant UI's.
1 Jun 2016
Accessibility is often solely discussed in terms of people with disabilities, but in truth, it's something that benefits the majority (if not all) of your users.
19 May 2016
This post for Smashing Magazine looks at one of the most popular image effects, grayscale, to compare its implementation in HTML canvas, SVG, CSS filters, and CSS blend modes.
4 May 2016
This post will walk you through setting up an accessibility testing dashboard from A to Z. Let's make the Internet more better together.
12 Apr 2016
I've learned so much during my time at IBM Design! This is a little wrap up post and an announcement about my next adventure.
8 Apr 2016
Did you know you can make games in CSS? This post explores a relatively obscure CSS property (counter-increment) combined with checkbox inputs to show you how.
5 Apr 2016
I was interviewed for one of my favorite podcasts ever: The Start FM. The conversation is about how I got to be where I am now and what it means to be so young in the industry.
23 Feb 2016
If you know some Sass, you're probably a lot further than you think to understanding and diving into the world of modern JavaScript. This post showcases some of the similarities.
11 Feb 2016
CSS Filters are awesome, but you can't do individual channel manipulation with them. Enter: feColorMatrix, SVG filter effect method that allows for really in-depth pixel value manipulation for even better image filters.
26 Jan 2016
Icons are essential to most pattern libraries and web design systems. Let's take a look at a scalable approach!
13 Jan 2016
I wrote about how I began to code for the new publishing platform SuperYesMore. TL;DR — cartoon dolls and Flash.
28 Dec 2015
It's time for my annual reflection and goal resetting! It's been a crazy year for sure.
15 Nov 2015
An opinionated Sass architecture system for writing modular and scalable libraries. Also, a case in defense of extends.
7 Nov 2015
In the final post of the CSS Image Effects series, we explore the beautiful, surreal world of infrared photography by creating our own faux effect.
2 Nov 2015
A vibrant, unexpected, and fun effect — the Lomography Effect is an opportunity where you can really be creative and try out various CSS image techniques.
25 Oct 2015
CSSgram is a tiny (<1kb gzipped) library for recreating Instagram filters with CSS filters, gradients, and blend modes.
18 Oct 2015
Bokeh textures are very popular in photography. Let's take a look at how to create our own.
9 Oct 2015
This week we'll take a look at one of the most popular photo manipulations: adding a vignette to draw attention to the center of an image.
5 Oct 2015
How do you make 3D-glasses-like graphics in the browser? We'll look at how blend modes work together to create this effect.
2 Oct 2015
The first post in a series on creating custom image effects in CSS. We'll take a look at the vintage washout effect.
24 Aug 2015
From HTTP2, Flexbox, CSS Filters, and ES6, the Internet we know today is built on hacks. Lets explore some of those hacks and solutions.
3 Aug 2015
I was interviewed for the CodeNewbie podcast, where I talk about life, IBM Design, open source, and personal goals.
27 Jul 2015
A journalists take on my OSCON talk — Open Source Design, A Love Story.
14 Jul 2015
With preparations for the fall conference season coming up, here are some travel tips to help make your life a little bit easier.
8 Jul 2015
How designers can contribute to open source, an interview for the OSCon Speaker Interview Series.
7 Jul 2015
A ridiculous frankenstein of a name for a legitimate approach to CSS that pulls ideas from the most popular approaches.
7 Jun 2015
Hacking the :visited selector to show unread posts. We'll look at the limitations and my little work-around.
3 May 2015
Pixel art is so much fun! This blog post walks through how to read a matrix-like list with Sass and generate Mario pixel art from box shadows.
19 Apr 2015
If you use a computer, you could use your terminal to make huge improvements to your work flow. This article talks about getting started and writing aliases to customize your experience.
23 Mar 2015
Some selected sketchnotes from a few talks I went to at the SXSW Interactive 2015 Conference.
17 Mar 2015
Another blog post written for SitePoint about 5 great uses for Sass maps and other thoughts on code at the moment.
19 Feb 2015
A blog post written for SitePoint on why community is at the crux of a thriving code base.
9 Feb 2015
Neuroscience plays a big roll in our design work. This post takes a look at Sensory Memory and how animations that visually link states can improve a user's experience.
24 Jan 2015
Sketchnotes are a great way to document a talk or event. They allow you to doodle and get a little bit creative with your content recording.
18 Jan 2015
I created a tool that lets you architect your Sass project in a single location (your manifest file), and it will build all of the directories and partials for you! This blog explains what a Sass manifest file is, what it does, and why you should use one.
31 Dec 2014
This is a personal post about my 2014 in review (because a lot happened) and my goals for 2015. Happy New Year!
17 Dec 2014
This is a walk through of how to set up Google PageSpeed Insights within your existing gulp project. This way, you can get your page speed score information within your terminal without first needing to push your site to a live server.
14 Dec 2014
I've been doing a lot of research and experimentation lately about how people learn. This post might give you some ideas to improve your own comprehension and think about your own learning style.
19 Nov 2014
When designers and developers work together from the start, it produces better outcomes. But how can we get designers involved and wanting to participate in the open source community from the start?
13 Nov 2014
An alphabetized list of styleguides and pattern libraries and a look into the differences between those two terms.
Our new website for Austin's Sass Meetup is live!
9 Nov 2014
A closer look at one of the reasons why designers don't participate in the open source community. (This links out to designopen.org)
6 Nov 2014
For the past four weeks, I've been keeping a very public and open version of my personal goals on Github. Its definitely made me a lot more productive, and you should give it a try.
27 Oct 2014
The keyboard, where our hands are placed most of the time (as developers), is the fastest navigation method by default. Knowing how to navigate yours system via keyboard will really optimize your workflow.
16 Oct 2014
The Media Queries 4 spec brings insight to technological capabilities that are coming up soon (this is based on the Editor’s Draft, October 10, 2014).
10 Apr 2014
I was on Sass Bites this week!
9 Aug 2013
A behind-the-scenes look at the making of the Proofessor app. (This links out to viget.com)