CSS3 Poster With 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.
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 :(