CSS Tricks!

This page is dedicated to showing off some cool and useful features of Cascading style sheets.

All of these effects are achived with css only!

Spin the Text!

Hover over the text below to see it spin!

This is one of my favorite uses of CSS. This takes advantage of the keyframes feature to make the text spin on hover.

Hover here!

Checkbox Styles!

Checkboxes are boring. Let's make them fun!

Check out this example of a styled checkbox. This is a great way to make your forms more visually appealing.

Hover color effects

Hover over the text below to see the color change!

This is a simple example of how you can change the color of text when you hover over it. This is a great way to make your site more interactive.

Hover over me!

Circle to square

Hover over the circle below to see it turn into a square!

This is a powerful example of how css can perform geometric transitions!

Transform!

Grow the square!

Hover over the square below to see it grow!

This is an example of how an element can change in one direction, this might be able to be used for something like a loading bar

hover here!