Latest News

Keith J. Grant:

I want to look at three key characteristics of CSS that set it apart from conventional programming languages: it’s resilient; it’s declarative; and it’s contextual. Understanding these aspects of the language, I think, is key to becoming proficient in CSS.

1. Like HTML, unknown or slightly broken CSS doesn’t stop a site in its tracks.
2. You write something you want to happen in CSS, it happens, and a bunch of related things may happen to. I like Keith’s

…

The post Resilient, Declarative, Contextual appeared first on CSS-Tricks.

What I mean by “CSS images” is images that are created using only HTML elements and CSS. They look as if they were SVGs drawn in Adobe Illustrator but they were made right in the browser. Some techniques I’ve seen used are tinkering with border radii, box shadows, and sometimes clip-path. You can find a lot of great examples if you search daily css images” on CodePen. I drew some myself, including this Infinity Gauntlet, but in …

The post Drawing Images with CSS Gradients appeared first on CSS-Tricks.

Evan Minto:

The question was “How many users browse the main Internet Archive site with a default font size other than the common value of 16 pixels?” By knowing this, we would determine how many users would be affected by sizing with relative units like rems/ems.

Using the methodology I describe below, we found that the answer is 3.08% of our users.

So if you set type in pixels, and your traffic is anything like the Internet Archive’s, 3% of …

The post Users DO Change Font Size appeared first on CSS-Tricks.

From time to time at Stackoverflow, the question pops up whether there is an equivalent to the stroke-dashoffset technique for animating the SVG stroke that works for the fill attribute. But upon closer inspection, what the questions are really trying to ask is something like this:

I have something that is sort of a line, but because it has varying brush widths, in SVG it is defined as the fill of a path.

How can this “brush” be animated?

In …

The post Animate Calligraphy with SVG appeared first on CSS-Tricks.

Eric Bailey takes a hardline position on <input placeholder>.

You might be thinking, as I did: yeah, yeah I know the pitfalls. I’m capable of using placeholder responsibly. But when you look at all the negatives together:

• Can’t be automatically translated;
• Is oftentimes used in place of a label, locking out assistive technology;
• Can hide important information when content is entered;
• Can be too light-colored to be legible;
• Has limited styling options;
• May look like pre-filled information and be

…

The post Don’t Use The Placeholder Attribute appeared first on CSS-Tricks.

I first wrote this post four years ago. I put it on a blog that no longer exists. Funnily enough, I still refer to it myself, so I figured it might be best served in a place where other people can see it. I’ve made only a few minor tweaks to the original content. A lot about how I work has changed, but most of these pieces have not.

I work on many personal projects concurrently. I love doing this, …

The post Balancing Time appeared first on CSS-Tricks.