All entries in topic: CSS3

Paul describes the recipe for making cool 3D shapes using a dash of CSS3 and a crap load of HTML elements. The recipe includes the -webkit-transform-style: preserve-3d; statement which I hadn’t seen before. Apparently it makes sure that an element’s children share the same 3D space as their parent, instead of being flattened. Not that I have any real understanding of what that means or anything.

One of the demos on Mozilla’s Web O’(pen) Wonder is The Letter Heads by Simurai. It’s a wonderfully whimsical use of CSS3 text shadows and JavaScript. There’s also some subtle audio. It’ll bring a smile to your face guaranteed.

Tom Robinson and others have created evil.css. It’s a dastardly collection of CSS rules to mess with a user’s mind if you can inject this CSS file into the browser session. It can flip images upside down, make the page blurry, blink headings, cause elements to fade away and so on. It’s hilarious!

Kris Triplett has created the haunting spectre of Darth Vader’s head out of nothing but HTML and CSS3. It’s really a whole bunch of div elements with some crafty use of border radius and CSS transforms.

If it’s not cube-related, it’s water ripple effects. If it’s not ripples, it’s bokeh effects! CSS3 can do it all. In this article Divya explains how to use CSS3 radial gradients to achieve a pretty bokeh effect on a web page background.

Here’s a neat trick. You take a background colour and then, with some CSS3 magic, add a background gradient. The trick involves something about repeating colour stops that alternate between transparent and semi-transparent. Checkout Lea’s post to see the variety of patterns you can generate.

In this nifty demo David, manipulates some CSS3 animation properties using a dash of JavaScript to created an exploding image effect. He based it on an exploding text example created by Ryan Florence who also wrote the JavaScript animation library David’s demo uses.

Here’s a nifty effect curtesy of CSS3 animation. The front most element is in focus while the other elements are displayed slightly blurry and scaled down creating depth of field. Make sure to check out part 2 as well.

It seems to be a popular fad these days to stretch CSS3 to the limit by using it to creating graphics without images. Check out this pure-css icon set created by Lucian Marin; it’s called Peculiar. It’s GPL, free, and unique on this site for actually being useful.

Here are a few other examples I’ve found. Giacomo Bartoli has created a pure-CSS Twitter icon, “Legend of Drew” has recreated some familiar characters and Andrew Kelly has apparently been experimenting with complex icons.

Check this amazing HTML5 canvas demo. Joe takes original graphics from old 8-bit adventure games, converts them to JSON data and uses a canvas element to animate them in realtime—sound effects included.