Our Top 3 CSS3 Tricks

We’ve put together some of the latest and greatest CSS3 tricks that you can use on elements within a website as effects or hover states!

Filter: Brightness

A great way to put a slight darkening effect on an image. The code sample below will darken the image to 50% of its original brightness. This could then be removed upon hover.
img {
filter: brightness(0.5);
-webkit-filter: brightness(0.5);
-moz-filter: brightness(0.5);
-o-filter: brightness(0.5);
}

Transform: Rotate

Easily rotate an element such as an image or text. The rotate function works clockwise. The different formats are needed to cover a range of different browsers.
img {
transform: rotate(354deg);
-webkit-transform: rotate(354deg);
-moz-transform: rotate(354deg);
-o-transform: rotate(354deg);
-ms-transform: rotate(354deg);
}

Background: RGBA

A great way to generate an element with a background colour that can have transparency too! The first three values are the RGB values of the colour, and the last is the alpha transparency. In the below case, this is black with an 80% transparency, as shown on the image below.
div {
background: rgba(0, 0, 0, 0.8);
}


So, there we have it! Some great CSS3 tricks for your perusal. If you’d like to learn more or get our web team to create some of these great effects for you, then contact us today.

Written by Rich Tarr

Senior Front End Developer

Follow Rich on Twitter