Category: color

Creating a VS Code Theme

Everyone has special and perhaps, particular, tastes when it comes to their code editor. There are literally thousands of themes out there, and for good reason: a thing of beauty and enhancement to productivity for one can be a hindrance to another. It’s been an item on my bucket list to create my own theme. I was co...

HSL() / HSLa() is great for programmatic color control

If you ever need to hand-manipulate a color in native CSS, HSL is pretty much the only way. HSL (the hsl() and hsla() functions in CSS) stands for hue, saturation, lightness, and optionally, alpha. We’ve talked about it before but we can break it down a little more and do some interesting things with it. Hue: T...

The Equilateral Triangle of a Perfect Paragraph

Still, too many web designers neglect the importance of typography on the web. So far, I’ve only met a few that really understand typography and know how to apply that knowledge to their work. And the lack of knowledge about typography doesn’t come from ignorance. I learned that web designers are commonly e...

Some Math Links

I read a few stories about math lately. One of them is a story by Kevin Hartnett about Francis Su, who believes math can be a gateway to a better life. To Live Your Best Life, Do Mathematics.: Christopher, an inmate serving a long sentence for armed robbery who had begun to teach himself math from textbooks he had ord...

Color in UI Design

Erik D. Kennedy: So if color theory doesn’t provide a solid basis for color in UI design, what does? Let me throw an opinion at ya’: color modifications. It’s the tweaking of color that counts, not the picking of them from the color theory hat. Ahmad Shadeed with some similar thinking an examples. Direct Link to...

A Thing To Know about Gradients and “Transparent Black”

Say you have a gradient in CSS that goes from red to transparent. Easy, right? Like this: .element { background: linear-gradient( to bottom, red, transparent ); } There is a pretty big gotcha here, though. In Chrome (also Android), Firefox, and Edge, you’d be all good. But in Safari (also iOS),...

ColorMe / CSS Color Level 4

Does this look weird? .element { background: color(#eb8fa9 alpha(75%) blackness(20%)); } That’s the “color function” from a draft spec from the CSS working group. I think it’s all about making colors a little easier and more intuitive to work with. Looks awesome to me, as someone who uses Sass...

High Contrast, A PostCSS Plugin Story*

The following is a guest post by Eduard Pochtar from ShiwaForce. Eduard is going to walk us through they why and how of a plugin he and his team built to process existing CSS to make a high contrast version of a web site. It involved a little thinking and a little strong arming to make it happen. *Based on true events...

Color Fonts

Adobe explaining: OpenType-SVG is a font format in which an OpenType font has all or just some of its glyphs represented as SVG (scalable vector graphics) artwork. This allows the display of multiple colors and gradients in a single glyph. Because of these features, we also refer to OpenType-SVG fonts as “color fonts...

The Power of the rgba() Color Function in CSS

One of the things that I’m really interested in about CSS is the new color-mod function. It will give us the ability to do color manipulations right in the browser. For example, when hovering over a button, you can change the color by using something like color: color(black darkness(50%));, without the use of any...