In this post, I’ll continue on discovering what animations can be applied to HTML elements. I’ll be looking at 2D transformations; effects that move, rotate, skew, and scale elements.
Category: CSS3
List of posts relating to CSS3
Animation with CSS3: Simple transitions
CSS3 is exciting (well at least I think so :)), as it allows animations to be carried out on HTML elements to move them, change their colour and size, etc. In this post, I’ll be looking at the basics of how CSS3 transitions work, with a few examples along the way.
Drawing a Lego brick with HTML & CSS3
I wanted to challenge myself to draw something with CSS, using some properties at my disposal from CSS3 like gradients, rotation, skew and border-radius. I needed something relatively simple to attempt to draw, and as I frequently think about toys, a Lego brick seemed a good option 🙂
CSS3 text-shadow
Following on from my post on CSS3 box-shadow, we can also add shadows to text which will follow the shapes of the characters, not just outline the text element.
Prefix-free
Prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.
CSS3 box-shadow
In CSS3, we can add shadows to objects without using images. We do need to add prefixes for Mozilla and Webkit browsers, so in effect adding the same styles 3 times (unless we use Prefix free).