My favorite CSS “trick” would have to be these 3 lines of CSS:

• { background-color: rgba(0,255,0,0.1); }

I’ve been using this snippet for years! It makes debugging layouts a breeze and is quite insightful when dealing with the box model.

Today, we are in the early stages of such a revolutionary shift, brought about by CSS Grid Layout. Much of what we know of the possibilities, limitations and best practices surrounding web layouts is effectively rendered obsolete by this new layout module, and in their place we find new possibilities, limitations and best practices that will take us into the next era of web design.

In CSS, you have two techniques for visualizing change that are competing for your attention: Animations & Transitions. In this article, let's examine the similarities and differences between them so that you can know when to use which.

To make the most of this article, it would be helpful for you to be familiar with using both animations and transitions. If you haven't had a chance to get your hands dirty with them, the Creating a Simple CSS Animation and Looking at CSS3 Transitions tutorials will help you get started.

Use scale transforms when animating clips. You can prevent the children from being stretched and skewed during the animation by counter-scaling them.

Use 10% lighten and darken for hover/active states. Used the second darken for the button border

A search form with advanced filtering options and quick link suggestions.

You don’t need JavaScript to create impressive 3D projects in the web browser. In this post I will show how to create and animate a Portal-inspired scene using only CSS.

A mobile-friendly pagination component, that can be easily customized using CSS or Sass.

Spheres

Using the CSS border-radius property, we can create rounded shapes and circles. Add some gradients and they become spheres. Let’s try that, and add some animation to bring them to life.