Skip to main content
CSS is fun and cool and I like it.
Article

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.… Read article

Article

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 color manipulation functions quite a bit.… Read article

Article

High Contrast, A PostCSS Plugin Story*

*Based on true events

It’s hard to imagine life without internet today. Many people’s lives are less or more tied with internet. Think about everything we rely on it for: communication, education, shopping, business control, home management, entertainment, etc. It’s like a world inside another world, with it’s own rules and diversity.

Around 80 million people in the EU are disabled and this number is growing. The unfortunate truth is that many of them can't use all the opportunity of … Read article

Article

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”.

Support so far: Firefox 26+, Edge 38+ … Read article

Article

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 CSS preprocessor like Sass.

But as the support of these CSS color functions is zero nowadays, we can temporarily use PostCSS and compile them … Read article

Article

A Nerd’s Guide to Color on the Web

There are a lot of ways to work with color on the web. I think it’s helpful to understand the mechanics behind what you’re using, and color is no exception. Let's delve into some of the technical details of color on the web.… Read article

Article

8-Digit Hex Codes?

Weird right? 4-digit hex codes too. They are a way put alpha transparency information into the hex format for colors. You might be seeing it more all the sudden if you use Chrome, because it dropped in 52, and the DevTools seem to be defaulting to showing alpha transparent colors in this format even if you set it originally using something else.

Firefox supports it too, for the record.… Read article

Article

RGBa Browser Support

This article was originally published on February 2, 2009 and is now being updated to clarify the concept and update the information for modern browsers.

RGBa is a way to declare a color in CSS that includes alpha transparency support. It looks like this:

div {
   background: rgba(200, 54, 54, 0.5); 
}

This allows us to fill areas with transparent color; the first thee numbers representing the color in RGB values and the fourth representing a transparency value between 0 … Read article