Some CSS3 Features

CSS3 has many new features that are not yet available on all browsers. I decided to play around with a few of these features to see how they worked.

I experimented with the :target, keyframe animation, css filters, transforms. This experiment only works properly in webkit browsers, but most of it will work for modern browsers.

:target selects an element based on the url. If the url has a id then that id is targeted by this selector. Keyframe animation lets you create your own animations and then use them on multiple elements. CSS filters let you adjust thing like the saturation or blur of an element. Transforms let you change an element and it does not affect neighboring elements.

I put them all together to create this little gallery. They are not all viable solutions yet, but they could become quite powerful in the future.

Note: All the images in this experiment are from Fotolia.