graphicpush

CSS3 Poster With No Images

Combine a penchant for straying too close to the bleeding edge of CSS with 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.

Three Laws of Robotics CSS3 Poster

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.

Here is The Three Laws of Robotics (and its corresponding CSS). For those unfamiliar with Isaac Asimov, Wikipedia explains the three laws nicely.

commentary + criticism

GBPrint

wrote the following on Friday July 2, 2010

WOW. This is certainly pushing the envelope of what’s possible with CSS today. Will certainly save on the cutting out of GIFs from photoshop in 2014… but then add another 3 hours on the other side as you scratch your head trying to work out how to put it all together!

The Final Curtain

wrote the following on Thursday September 23, 2010

This shows just how far things have moved on from spacer gifs and tables!

Part of me wonders whether it’s all a bit overkill though. From the end users point of view (The people that matter) It’s not going to effect their view of the site whatsoever, if a gradient background has been achieved with code rather than a repeating jpg, etc.

George

wrote the following on Thursday October 21, 2010

That is really cool and quite impressive – I like the idea and concept of it, someone should set up a competition to see who can come up with the most detailed and creative posters using only CSS without images.

I’m surprised this hasn’t gotten more attention – you should promote this article and post it on Facebook etc – I will help you out and post it on my Facebook and Twitter to start with :)

H├ęctor

wrote the following on Monday October 25, 2010

This is awesome! I hope one day I could become a better CSS-er :p

seether

wrote the following on Tuesday October 26, 2010

I echo GBprint’s view! Not to mention trying to get it to work on several browsers haha

Lexicon the Great

wrote the following on Saturday February 23, 2013

Here in 2012, the demo poster on Chrome looks a bit different from the graphical one (still looks cool, just not as cool). One of the perils of trusting to CSS is that it’s an evolving language.

Actually, looking at your CSS file, I see you’re using vendor prefixes for rotation and other attributes, with no provision for them becoming mainstream/standard (i.e., without prefixes). Just a little updating should bring it back.

Have faith in your own predictions!

Giraffe

wrote the following on Monday March 4, 2013

Unfortunatley, here in 2013 this doesn’t even work in Firefox (19) anymore :(

add a comment?