Dustin Boston

I was poking around on Detail, getting some inspiration when it occurred to me that the small details really do make a big difference. I know that’s not a huge revelation, but CSS makes it incredibly easy these days.

Chris Coyier has a post about modern CSS two-liners that have a big impact on the design of a website. Here are two more, not as fresh, n <= 2 liners.

Page transitions

You can put a nice fade in/out effect on the entire site in one line. Now when you navigate to any other page on the site, it will look nice and polished.

@view-transition { navigation: auto; }

Selection color

Let’s not forget selection color. Of course, you can make the selection color as wild as you want, but a simple inversion of the main site colors is usually enough to make it look intentional.

::selection {
  color: white;
  background-color: black;
}