Search
Copy the Browser’s Native Focus Styles
28.8.2020
Remy documented this the other day. Firefox supports a Highlight keyword and both Chrome and Safari support a -webkit-focus-ring-color keyword. So if you, for example, have removed focus from something and want to put it back in the same style as the browser default, or want to apply a focus style...
A CSS-only, animated, wrapping underline
21.8.2020
Nicky Meuleman, inspired by Cassie Evans, details how they built the anchor link hover on their sites. When a link is hovered, another color underline kinda slides in with a gap between the two. Typical text-decoration doesn’t help here, so multiple backgrounds are used instead,...
Chapter 3: The Website
19.8.2020
Previously in web history…
Berners-Lee, motivated by his own curiosity, creates the World Wide Web at CERN. He releases its technologies to the public domain, which enables the development of several new browsers for every operating system. Mosaic proves to the most popular, and...
Every Website is an Essay
7.8.2020
Every website that’s made me oooo and aaahhh lately has been of a special kind; they’re written and designed like essays. There’s an argument, a playfulness in the way that they’re not so much selling me something as they are trying to convince me of the thing. They use words and type and color...
How-to guide for creating edge-to-edge color bars that work with a grid
1.7.2020
Hard-stop gradients are one of my favorite CSS tricks. Here, Marcel Moreau combines that idea with CSS grid to solve an issue that’s otherwise a pain in the butt. Say you have like a 300px right sidebar on a desktop layout with a unique background color. Easy enough. But then say you want...
A Complete Guide to Dark Mode on the Web
1.7.2020
“Dark mode” is defined as a color scheme that uses light-colored text and other UI elements on a dark-colored background. Dark mode, dark theme, black mode, night mode… they all refer to and mean the same thing: a mostly-dark interface rather than a mostly-light interface.
The post A Complete...
CSS background-repeat: round
23.6.2020
The CSS spec is full of gems that sneak their way past most of us web designers and developers. Stuff like :focus-within, prefers-reduced-motion, and prefers-color-scheme suddenly make their way into CSS without us really finding out for months or years. One such example is background-repeat:...
Patternico
20.6.2020
I remember searching for tutorials for making seamless patterns in Photoshop¹ all the time back in the day.
It’s fun to see this little website for building repeating patterns as its one job. It does everything you’d expect: pick a background, drag some decorations onto it and position...
How to Get All Custom Properties on a Page in JavaScript
8.6.2020
We can use JavaScript to get the value of a CSS custom property. Robin wrote up a detailed explanation about this in Get a CSS Custom Property Value with JavaScript. To review, let’s say we’ve declared a single custom property on the HTML element:
html {
--color-accent: #00eb9b;
}
In JavaScript...
Understand why CSS has no effect with the Inactive CSS rules indicator in Firefox DevTools
5.6.2020
It’s useful when DevTools tells you that a declaration is invalid. For example, colr: red; isn’t valid because colr isn’t a valid property. Likewise color: rd; isn’t valid because rd isn’t a valid value. For the most part, a browser’s DevTools shows...
The Expanding Gamut of Color on the Web
27.5.2020
CSS was introduced to the web all the way back in 1996. At the time, most computer monitors were pretty terrible. The colors of CSS — whether defined with the RGB, HSL, or hexadecimal format — catered to the monitors of the time, all within the sRGB colorspace.
Most newer devices have a wide-gamut...
No-Comma Color Functions in CSS
4.5.2020
There have been a couple of viral tweets about this lately, one from Adam Argyle and one from Mathias Bynes. This is a nice change that makes CSS a bit more clear. Before, every single color function actually needs two functions, one for transparency and one without, this eliminates that need...
How to Display Mode-Specific Images
4.5.2020
Now that we have most of the basics of HTML and CSS in the browser, we’ve begun implementing new features that I would consider “quality of life” improvements, many of which have been inspired by mobile. One great example is the CSS prefers-color-scheme media query, which allows...
@property
25.4.2020
The @property is totally new to me, but I see it’s headed to Chrome, so I suppose it’s good to know about!
There is a draft spec and an “intent to ship” document. The code from that document shows:
@property --my-property {
syntax: "<color";
initial-value: green;
...
8 Daring Examples of Cyberpunk Design
24.4.2020
Cyberpunk design was a discovery of the previous year. Although it did not take the web by storm like flat style or material design did once, it was undoubtedly...
The post 8 Daring Examples of Cyberpunk Design appeared first on Onextrapixel
Creating Playful Effects With CSS Text Shadows
20.4.2020
Let’s have a look at how we can use the CSS text-shadow property to create truly 3D-looking text. You might think of text-shadow as being able to apply blurred, gradient-looking color behind text, and you would be right! But just like box-shadow, you can control how blurred the shadow is, including...
Creating Color Themes With Custom Properties, HSL, and a Little calc()
16.4.2020
Before the advent of CSS custom properties (we might call them “variables” in this article as that’s the spirit of them), implementing multiple color schemes on the same website usually meant writing separate stylesheets. Definitely not the most maintainable thing in the world. Nowadays, though,...
How to build a bad design system
31.3.2020
I didn’t realize this until it was far too late, but one of the biggest mistakes that’s made on a design systems team is a common mismanagement issue: there are too many people in a meeting and they have too many dang opinions.
Is there a conversation about the color of your buttons that’s taking...
Wide Gamut Color in CSS with Display-P3
31.3.2020
Here’s something I’d never heard of before: Display-P3 support in CSS Color Module Level 4 spec. This is a new color profile supported by certain displays and it introduces a much wider range of colors that we can choose from.
Right now the syntax looks something like this in CSS:
header...
Programming Sass to Create Accessible Color Combinations
12.3.2020
We are always looking to make the web more accessible. Color contrast is just math, so Sass can help cover edge cases that designers might have missed.
The post Programming Sass to Create Accessible Color Combinations appeared first on CSS-Tricks