CSS3 Poster With No Images
NOTE: This article was written some time ago and was posted on graphicpush.com, but the last few times we wanted to reference it, it was down. I want to give them credit for this, and only have it here so we can all have good examples of CSS3’s capabilities.
Original Post:
Combine a penchant for straying too close to the bleeding edge of CSSwith a heavy dose of science fiction, and you have a complete CSS-based illustration for Isaac Asimov’s Three Laws of Robotics. The design uses box-shadow, border-radius, @font-face, transform, box-sizing, text-shadow, RGBa and no images.
Another experiment in CSS3 techniques. This one uses lovely bits like box-shadow, border-radius, @font-face, transform, box-sizing, text-shadow, RGBa, and maybe some more stuff. It’s not particularly clean HTML either; don’t look too closely at the markup rendering the robot. No images were used or harmed in the making of this thing.
Oh, and it only works in Firefox 3.6+, so most of the CSS3 has the -moz- vendor prefix. Webkit is just a hair behind, Opera does not play nicely with a lot of the rules yet, and IE8 just cowered in the corner mumbling about expressions or something. I didn’t really try to pursue anything outside FF because this was more proof of concept and most of the stuff has zero relevance to actual client work.
Predicted year that all mainstream browsers will be able to render this thing like the screenshot above: 2014.
