CSS Tricks

CSS gray images

This example shows how to make a grayscale div, no matter what its content is. For this, you need to use .svg (Scalable Vector Graphics) files located within the CSS style folder.

Attention! For Safari < 6 you can use this link

CSS resize transition

This simple CSS example shows how to create a resize effect occurring on mouse over. It should work on all browsers, except for IE < 10.

Opacity for all browsers

This is a simple variable opacity effect (or filter) example using CSS. It should work on all browsers.

CSS rounded corners

This is a very fast and easy way to make rounded borders in CSS, without having to use images. Setting the round radius is fairly easy and straightforward. As always with CSS, different browsers render the same code in quite different ways. The example below is just meant to get you started.


Sign up for inspiration, news and updates