Best of CSS-Tricks — 2023

1. 1
   Article

   CSS-Tricks·3y

   Moving Backgrounds | CSS-Tricks

   Learn how background images can provide more context or experience, how to change the position of a background image using JavaScript, and how to implement the Ken Burns effect using CSS.

   108

   4
2. 2
   Article

   CSS-Tricks·3y

   Animating CSS Grid (How To + Examples) | CSS-Tricks

   CSS Grid has technically supported animations for a long time, as it’s baked right into the CSS Grid Layout Module Level 1 spec. But animating these grid properties only recently gained supported by all three major browsers. Here, we take a look at some examples to get the creative juices flowing.

   57

   2
3. 3
   Article

   CSS-Tricks·3y

   A Fancy Hover Effect For Your Avatar | CSS-Tricks

   A Fancy Hover Effect For Your Avatar for your Avatar is a neat hover effect you can use on something like your own avatar. Kilian Valkhof actually re-created that here on CSS-Tricks a while back. I have a similar idea but tackled a different way and with a sprinkle of animation.

   53

   1
4. 4
   Article

   CSS-Tricks·3y

   Creating a Clock with the New CSS sin() and cos() Trigonometry Functions | CSS-Tricks

   Creating a Clock with the New CSS sin() and cos() Trigonometry Functions are here. They happen to be perfect for the idea I have in mind, which is to place text along the edge of a circle. That's been covered here on CSS-Tricks when Chris shared an approach that uses a Sass mixin.

   20
5. 5
   Article

   CSS-Tricks·3y

   5 Mistakes I Made When Starting My First React Project | CSS-Tricks

   Using create-react-app to start a project TL;DR. Use Vite or Parcel to set up a new React project. Create React App(CRA) creates a development environment with the best configuration options. Babel is a tool that allows you to use newer JavaScript features, even if some browsers don't support them.

   15