Latest News

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.

You might know Filestack from being an incredible service to add file uploading, storage, and management to your own web apps.

There is another thing Filestack can do for you: convert documents into different formats.

For one thing, it can manipulate documents. Take images. Perhaps you would like to offer some image manipulation for your users uploaded images, like cropping and rotation. That’s a common feature for apps that offer avatar uploading. With Filestack, you got it.

It’s great …

The post Advanced Document Conversions with Filestack appeared first on CSS-Tricks.