Skip to main content

Geoff Graham

Read, write, coffee, web, repeat.

Article

Recreating Netlify’s Neat-o Sliding Button Effect

Have you seen Netlify's press page? It's one of those places where you can snag a download of the company's logo. I was looking for it this morning because I needed the logo to use as a featured image for a post here on CSS-Tricks.

Well, I noticed they have these pretty looking buttons to download the logo. They're small and sharp. They grab attention but aren't in the way.

They're also interactive! Look at the way they expand and … Read article

Article

A Quick Look at the First Public Working Draft for Color Adjust Module 1

We've been talking a lot about Dark Mode around here ever since Apple released it as a system setting in MacOS 10.14 and subsequently as part of Safari. It's interesting because of both what it opens up as as far as design opportunities as well as tailoring user experience based on actual user preferences.

This week, we got an Editor's Draft for the Color Adjust Module Level 1 specification and the First Public Working Draft of it. All of this … Read article

Snippet

Unordered List as a Timeline

A refreshingly simple (yet crafty) way to create a vertical timeline using a straight-up, semantic unordered list (<ul></ul>) from Peter Cooper.… Read article

Link

Designing An Aspect Ratio Unit For CSS

Link

The #StateOfCSS 2019 Survey

Link

Gradians and Turns: the quiet heroes of CSS angles

Link

Successful WordPress Freelancing

Article

2018 Staff Favorites

Last year, the team here at CSS-Tricks compiled a list of our favorite posts, trends, topics, and resources from around the world of front-end development. We had a blast doing it and found it to be a nice recap of the industry as we saw it over the course of the year. Well, we're doing it again this year!

With that, here's everything that Sarah, Robin, Chris and I saw and enjoyed over the past year.… Read article

Almanac

color-adjust

The color-adjust property is described by the spec as "preserving colors in different-capability devices." You know how there are phones, tablets and other devices out there without retina-quality screens? Well, this property provides the browser with a hint to make decisions about how to handle colors based on that quality.… Read article

Almanac

scrollbar-gutter

The scrollbar-gutter property provides flexibility to determine how the space the browser uses to display a scrollbar that interacts with the content on the screen. The spec describes it "reserving space for the scrollbar" and that makes sense since that's what a gutter ultimately is: a container that reserves space for whatever is in it and separates it from other elements.… Read article

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