-
200821 Jan
Posted in CSS3 Previews
While browsing the admin section of this site, I saw an incoming link titled Fun with CSS3. It includes three examples of creating a recipe card mock up using CSS3 that is currently implemented in browsers. Due to the various levels of implementation, no browser can create the whole design using the CSS3 techniques, which is why it was split in three parts.
Because no single browser supports all the innovations in CSS3, I’ve split the Recipe Card page into several examples, each with unique markup. No point in looking at these in IE or Firefox – fire up the latest Safari or Opera instead.
I’m looking forward to a time when examples like this can be displayed fully by one browser. As for improvements to the examples, I’d like to see the heading images replaced with Web Fonts, and the images in the footer should be trivial to turn into SVG and added using
list-style-image. The most difficult parts would be the effect the main title has inside the text (a transparent background image should be able to make this work) and the rotatedmain menu
text. There is currently no way to rotate text in CSS. The example is making me hungry though.Using a different approach, there are also some nice CSS3 examples on the CSS section of Dev Opera show casing what can be done with CSS today using progressive enhancement.
Do you know of any nice CSS3 demo, or have you created your own? If so share them in the comments. I’d love to see them.
You can skip to the end and leave a response.
-
Comments
-
01.
CSSqueen says:Comment » January 21st, 2008 at 9:22 am
I am very disappointed that firefox3 and opera9.5 not support the “box-shadow” CSS3 effect.
-
02.
It seems box-shadow was split in two in the draft.
-
03.
Hi David, thanks very much for mentioning my little demo. I should have really done a proper analysis on the file size differences between the different reiterations of the page, to determine potential bandwidth savings with CSS3!
-
04.
-
05.
@ CSSQueen:
-moz-box-shadow works. (in my FF 3.6 at least).
From reading I expect to see native ‘box-shadow: x y dist #000;’ next year in the FF4 release by the latest.
-
06.
[…] richer for web developers. If you wish to view the full effects of CSS3 then it is worth visiting this website here as it contains multiple examples of how it can be […]
-
07.
This is a exceptional piece of writing, im glad I recently found it. Ill be back again later to check out other posts that you have on your blog.
-
08.
I’ve created a small CSS3 demo using shadows and rgba to create Bokeh : http://nikhil-verma.com/demos/5_bokeh/
Tell me how is it :)
-
09.
I explored some animation and transform techniques to create a clock: http://wlmeurer.com/clock.html. There’s just a little js to pull in the starting time. CSS does the rest.
-
10.
I’ve have a growing collection of CSS3 demos at http://css3playground.com
Most of them are meant to be experimental toys, but some are practical. I try to accommodate as many browsers as possible on each one.
-
11.
This is my first dabble at CSS3 and HTML5 http://locationdetection.mobi/ – it uses geolocation data to find out where you are.
Best served on a mobile….
-
12.
I found a snippet of code a few weeks back that worked in IE8 and Firefox. It let you rotate the text in css3 but now I cant find it – all i find is people saying it can’t be done!
-
13.
[…] CSS3 demos […]
-
01.
