Skip to main content

Geoff Graham

Read, write, coffee, web, repeat.

Article

Rocking California’s “I Voted” Sticker in CSS for Election Day 2018

Oh hey, so tomorrow (tomorrow!) is Election Day here in the United States. We're not in the business of making political endorsements or anything like that at CSS-Tricks, though we do endorse that everyone exercise their right to vote.

I did exactly that two years ago and posted a CSS rendition of the "I Voted" sticker that came with my California mail-in ballot.

Fast forward to today, and I received a new sticker in the ballot sporting a fresh design.

I have a little time, so I'm going to try to re-create this sticker in CSS and walk through my thought process as I do it. Feel free to follow along if you'd like!

Article

Preventing Suicide with UX: A Case Study on Google Search

I came clean about my long-running and ongoing battle with chronic depression last year in a blog post on my personal site. But don't worry, things are no worse than they were then and this post is about something else. This post is about designing empathetic user experiences.… Read article

Article

Having fun with link hover effects

A designer I work with was presenting comps at a recent team meeting. She had done a wonderful job piecing together the concept for a design system, from components to patterns and everything in between that would make any front-end developer happy.

But there was a teeny tiny detail in her work that caught my eye: the hover state for links was a squiggle.… Read article

Article

Slow Websites

The web has grown bigger. Both in expansiveness and weight. Nick Heer's "The Bullshit Web":

The average internet connection in the United States is about six times as fast as it was just ten years ago, but instead of making it faster to browse the same types of websites, we’re simply occupying that extra bandwidth with more stuff.

Nick clearly explains what he means by bullshit, and one can see a connection to Brad Frost's similarly framed Read article

Link

Short note on the accessibility of styled form controls

Article

A Quick Roundup of Recent React Chatter

Like many, many others, I'm in the pool of leveling up my JavaScript skills and learning how to put React to use. That's why Brad Frost resonated with me when he posted My Struggle to Learn React."Read article

Almanac

block-overflow

The block-overflow property truncates text and indicates more content follows by inserting an ellipsis or custom string after a number of lines that is set by the max-lines property.… Read article

Almanac

offset-anchor

The offset-anchor property defines a point within the box it is applied as the anchor that moves along the offset-path.

That's kinda wordy, so let's break that down a bit.… Read article

Almanac

line-clamp

The line-clamp property truncates text at a specific number of lines.

The spec for it is currently an Editor's Draft, so that means nothing here is set in stone because it's a work in progress. That said, it's defined as a shorthand for max-lines and block-overflow, the former of which is noted as at risk of being dropped in the Candidate Recommendation.… Read article

icon-link icon-logo-star icon-search icon-star