Search
Mixing Colors in Pure CSS
16.11.2020
Red + Blue = Purple… right?
Is there some way to express that in CSS? Well, not easily. There is a proposal draft for a color-mix function and some degree of interest from Chrome, but it doesn’t seem right around the corner. It would be nice to have native CSS color mixing, as it would give...
Using JavaScript to Adjust Saturation and Brightness of RGB Colors
6.10.2020
Lately I’ve been taking a look into designing with color (or “colour” as we spell it where I’m from in New Zealand). Looking at Adam Wathan and Steve Schroger’s advice on the subject, we find that we’re going to need more than just five nice looking hex codes from a color palette...
PocketBook Color: Čtečka s barevným displejem je lákavá představa, ale…
3.10.2020
PocketBook Color je čtečka elektronických knih s barevným displejem a fundamentální otázka zní: K čemu je to dobré?
S panelem o úhlopříčce 6", rozměry 16 × 11 cm a váhou 160 gramů patří k menším a lehčím čtečkám. Plastové tělo působí zranitelně a pokud hodláte číst jinde než ve vlastních peřinách,
Using a brightness() filter to generically highlight content
12.9.2020
Rick Strahl:
I can’t tell you how many times over the years I’ve implemented a custom ‘button’ like CSS implementation. Over the years I’ve used images, backgrounds, gradients, and opacity to effectively ‘highlight’ a control. All that works of course,...
Working with JavaScript Media Queries
7.9.2020
What’s the first thing that comes to mind when you think of media queries? Maybe something in a CSS file that looks like this:
body {
background-color: plum;
}
@media (min-width: 768px) {
body {
background-color: tomato;
}
}
CSS media queries are a core ingredient in any responsive...
Using @property for CSS Custom Properties
3.9.2020
Una Kravetz digs into how Chrome now allows you to declare CSS custom properties directly from CSS with more information than just a string.
So rather than something like this:
html {
--stop: 50%;
}
…can be declared with more details like this:
@property --stop {
syntax:...
Excluding Emojis From Transparent Text Clipping
2.9.2020
CSS-Tricks has this pretty cool way of styling hovered links. By default, the text is a fairly common blue. But hover of the links, and they’re filled with a linear gradient.
😍
Pretty neat, right? And the trick isn’t all that complicated. On hover…
give the link a linear...
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...