CSS Posters
I’ve always stressed the importance of practice and experimentation. If you want to get better at something or if you want to learn something, you have to keep on doing it over and over again. This is very true with web design as well. We’ve even published an article here on Design Informer about the benefits of experimentation.
I’m very busy as I work a full-time 9-6 job as a web designer, then I go home and work on Design Informer, soon to be Coding Informer, and I also do a variety of freelance work. With all these on my plate, it’s very hard to find time to relax, open up Photoshop and design, or open up Dreamweaver (code view of course) and just mess around with some code.
The Inspiration
A while back, I tweeted about this CSS experiment. Well yesterday, I had some free time on my hands and I decided to do some experimentation with CSS myself. We’ve all seen some amazing things done with CSS3 and I wanted to play around with it myself. I looked around first to see what else I can find that’s been done and I found some really great experiments.
Click the images to view the actual CSS experiment.
The Laws of Robotics
CSS3 Background-Clip Text & @font-face
Why Art?
All Human Beings Are Born Free
The Experiment
So after being inspired by the above examples, I quickly went to work. I decided to create some simple CSS3 posters based on designs that I’ve already created before. It took me about a couple of hours to finish this experiment.
If you’re even thinking of viewing it in IE, don’t. I didn’t test for IE and I can care less. This was just for fun and for practice.
There are only four posters right now but I plan to add new ones whenever I have time to experiment with some more. So go ahead and bookmark the page. Also, if you want to create your own CSS poster, feel free to do so and send me a link as well. I’ll include it in this post.
It’s Your Turn
What have you experimented with lately? Have you had a chance to play with CSS3? jQuery maybe? Photoshop? If you want to get better, you are going to have to work at it. Besides that, it’s also fun and enjoyable to create something that’s not for your work or clients.
The best designers and developers I know all experiment. Let me just name a few: Chris Coyier, David DeSandro, Trent Walton, Anthony Calzadilla, and Román Cortés. I could list a lot more people and it would take me a long time, but do you know how they all get better? They experiment and practice and work and read and study all the time.
So what are you doing to improve your skills?
Sachin @ Web Design Mauritius
May 6th, 2010 2:00 pmI’ve been experimeting in other areas such as PHP for the past months but hey, this post is inspiring me to come back to some core CSS experimentation. I really like the posters you experimented on.
.-= Sachin @ Web Design Mauritius´s Latest Entry – Round up of the best posts of April 2010 on the Bureau. =-.
Jad Limcaco
May 29th, 2010 3:45 pmThanks a lot Sachin. I need to do some experimenting with PHP myself.
John La'Gere
May 6th, 2010 2:02 pmLove the designs! Just getting my feet wet with web design, everything is an experiment for me right now. Have spent 10 yrs in print design, hopefully it’ll be an easy transition. Projects like yours are great for inspiration and remind everyone that it’s ok to play around and experiment.
Jad Limcaco
May 29th, 2010 3:46 pmThe transition is pretty tough but it’s really a blessing that there’s so many great resources on the internet where we can learn from. I hope your transition goes well. Feel free to ask me if you have a question or need help with something. :)
Mikael Halén
May 6th, 2010 2:02 pmReally well done Jad. As CSS is getting more and more user friendly it wouldn’t surprise me if it is used for real poster design.
Reminds me of the post over at boagworld – Stop Designing Websites, Start Designing Posters http://boagworld.com/design/no-more-websites
Jad Limcaco
May 29th, 2010 3:47 pmYeah, I really enjoyed that post and it opened my eyes a bit about designing websites.
Najam Siddiqi
May 6th, 2010 2:03 pmThese css posters are very nice and interesting . Thanks for sharing.
Louis
May 6th, 2010 2:38 pmJad, it’s amazing how identifiable your designs are. As soon as I see one of your designs, I can see your style in it. Even these CSS-only examples display your style quite well.
Great idea here, thanks for doing this.
.-= Louis´s Latest Entry – More Additions to the CSS3 Click Chart =-.
Jad Limcaco
May 29th, 2010 3:47 pmHehe, thanks Louis. Glad you liked my idea. I’m still thinking of a project that we can collaborate on. :)
ZephNor
May 6th, 2010 3:04 pmI wasn’t planning on opening it in IE, but did anyways just to see how disastrous it’d be. Well the only thing missing are shadows, so it’s OK.
I have been experimenting with CSS3 and ASP.NET for a project. Must say I love CSS3.
Jad Limcaco
May 29th, 2010 3:48 pmYeah, I just wanted to put that so people wouldn’t even bother, but I also checked it out in IE and it looks perfectly fine. I guess some people are just too curious, huh? ;)
designi1
May 6th, 2010 3:30 pmPretty awesome :D CSS poster… now with round border, transparency’s it will allow to make some advanced ones. CSS3 its powerful, we just need IE updates to start designing fully in that format :D
.-= designi1´s Latest Entry – Desktop wallpapers calendar May 2010 =-.
Mark Astle
May 6th, 2010 3:43 pmWhy? And to whoever said they’d not be surprised to see CSS used for real poster design- double why?? It makes absolutely no sense. It’s the wrong tool for the job. CSS – just a tool. HTML – just a tool. PHP – just a toll. Photoshop – just a tool. You don’t use a spanner to hammer in a nail.
Kurt Vachon
May 6th, 2010 10:36 pmWhy not? Sometimes a butter knife works just as well as a screwdriver. And in the end, the poster is made.
Bryan
May 7th, 2010 3:05 amRight, so I supposed you think using tables for layout is good practice?
Gets the job done, but not as well, and it’s not the best too.
Jad Limcaco
May 29th, 2010 3:49 pmHey Bryan, I completely understand what you are trying to say, but it’s just an experiment to see what we can accomplish with CSS. It just tests our skills and helps us think of solutions to what we want to accomplish. :)
Newick
May 6th, 2010 4:05 pmthat’s a great idea! i was looking for a way to test some features of CSS3! I’ll try like this instead of doing some useless pages!
thanks
rod rodriguez
May 6th, 2010 4:19 pmThis is awesome, CSS never fails to surprise me. Gives me a reason to have something to look forward to when I don’t have much else to do. Great post.
exionyte
May 6th, 2010 4:33 pmYou should really make them posters! I would really purchase a couple.
I think a poster concerning IE would be great!!! :)
Erik Ford
May 6th, 2010 6:01 pmI also wish I had a little more time on my hands to experiment with CSS3 because it looks like fun and these make me want to find the time to do it.
Matt WArd
May 6th, 2010 6:33 pmAwesome idea Jad. This kind of experimentation is always really interesting. I have to agree with Mark Astle that this probably isn’t the best way to go about actually creating a poster for print – but the experimentation is awesome and can lead to some really interesting ideas for web design.
Oh, and I absolutely love the All Human Beings Are Born Free poster. An absolutely stunning bit of design there!
.-= Matt WArd´s Latest Entry – Is Your Artwork Ready for Print? =-.
Jad Limcaco
May 29th, 2010 3:50 pmYeah, I agree… But it was all mostly for fun. Lighten up, will ya? J/K
Janko
May 6th, 2010 6:40 pmCSS3 doesn’t stop to impress. I like your posters, nice work Jad.
Jad Limcaco
May 29th, 2010 3:50 pmThanks friend!
Greg Babula
May 6th, 2010 6:48 pmI don’t think they are all his? Very impressive none the less
Alex Nascimento
May 6th, 2010 8:09 pmNice work, you really don’t have limits to creation with CSS3. I have been trying CSS3 in some websites and I hope I can to use the full version on any browser soon.
Lee Gustin
May 6th, 2010 8:11 pmGreat work Jad I am very impressed (especially since you were just fooling around in the little bit of spare time you had). I actually opened up FireBug and checked out how you did each poster.
Now you made me want to try the same thing!!
.-= Lee Gustin´s Latest Entry – Munny Madness =-.
Jad Limcaco
May 29th, 2010 3:51 pmYou should. I’d be curious to see what you can come up with.
Joni Korpi
May 6th, 2010 9:03 pmI think modern CSS is the perfect tool for a web designer to explore new ideas and have some fun. It offers just the right amount of limitations – and freedom – for web design ideas to grow.
I was recently asked to submit my business card to a showcase article. I don’t actually have one, so I decided to have some fun and created one with pure CSS (no images): http://www.jonikorpi.com/card/card.html (animations only work in Safari/Chrome) :)
Jad Limcaco
May 29th, 2010 3:51 pmGreat work Joni. BTW, thanks for stopping by. I’m a big fan of your work. I’m really impressed with your sites and how clean your code is. :D
Grün Weiss
May 6th, 2010 9:18 pmNice works, good article.
Nikola Lazarevic
May 6th, 2010 10:13 pmGreat work Jad, posters are great. CSS3 is so powerful!
.-= Nikola Lazarevic´s Latest Entry – 50 Fantastic Sport Logos =-.
Nikhil
May 6th, 2010 11:01 pmWow posters with CSS3, Amazing!
Great Jad…
Nicolas Gallagher
May 6th, 2010 11:05 pmI produced what you might call a “CSS poster” a few months ago:
http://nicolasgallagher.com/css-typography-experiment-and-browser-inconsistencies/
Jad Limcaco
May 29th, 2010 3:52 pmOh wow, that’s really awesome, thanks for sharing it. I think I saw that awhile back, I forgot about it though. I’ll be adding it to the collection. :D
Jesse Flores
May 7th, 2010 12:20 amThanks for posting my link Jad.
Jad Limcaco
May 29th, 2010 3:52 pmNo problem, great job Jesse.
Ken Reynolds
May 7th, 2010 1:22 amGood Stuff!
I’m in a similar position with my own work/non-life balance, but you are quite right, you do need some time to let yourself go and learn new things or make sure you’re keeping the old skills fresh.
I went all low tech a while back and brushed up on simple mark-making with pens, pencils inks, whatever I could get my hand on. These resulted in some nice brush sets for Photoshop and Illustrator.
Jad Limcaco
May 29th, 2010 3:53 pmNice! Keep up the great work Ken. I’m really enjoying your articles and comics.
Kevin
May 8th, 2010 12:25 amThanks for featuring my 3 Laws of Robotics poster. Please note it only works (properly) in Firefox, since Webkit, Opera and “others” do not yet understand some of the more complicated box-shadow techniques.
Project Center
May 8th, 2010 1:52 amHad to laugh at your comment about “don’t even think of trying to view these in IE”. Aside from that laugh – nice job on the posters.
Keeping our skills fresh and updated can certainly take some time but often the payoff is great and in your case, it appears that you had fun with it too.
.-= Project Center´s Latest Entry – Using Barcodes In Printing, A Growing Strategy =-.
Scott Corgan
May 10th, 2010 11:00 pmBeyond impressed by the capability of CSS3! I love the banner that replicated weeks and weeks of work on software is done in a breeze with CSS3. LOVE IT!
zanzu7
May 11th, 2010 1:28 amThis is awesome. I love your poster designs. Perfect practice makes your skills perfect.
Thanks for sharing, Jad.
Simon Foster
May 16th, 2010 6:05 pmGreat post, thanks, I find the whole concept of using CSS to make posters really inspiring, I’ve been experimenting myself with similar ideas, check out some of my humble attempts at http://simonfosterdesign.com/sketchbook.html , Thanks again!
Jad Limcaco
May 29th, 2010 3:54 pmExcellent! You got some mad skills Simon. I appreciate you sharing your work. It’s very inspiring!
scuba_suzy
May 22nd, 2010 7:56 pmI’ve been lurking on your site for a few days now, absorbing the knowledge. Nice posters. I couldn’t work out if the were supposed to be looked at in FireFox or webkit broswers so I looked in FF and Chrome. They looked nice but different in both so I’m still not sure how they were intended to look. I did notice that the robot one was obviously only supposed to be seen in FF.
I’m currently just getting my feet wet will all these website design ideas & techniques so it looks like I’ve stepped in at an interesting time. I’m very much an AMATEUR. ;) I’m currently trying to learn (by trial and error mostly) PHP, Javascript, CSS ,HTML, Photoshop, AND WordPress plugin & theme design. Talk about going in at the deep end – splosh! It all comes under the guise of trying to run my 1st install of WordPress as a CMS for blog and photo galleries and to make it look like my own custom design… I’m not yet ready to launch (so still soaking up ideas – although not too many or I’ll never finish)! (the web url I gave is my old one.)
This post has given me inspiration to plan to carry on experimenting past the launch of my site and I think I’ll try and style the odd CSS poster on my blog. :)
Jad Limcaco
May 29th, 2010 3:54 pmGreat! Let me know how your experiments go. :D
Will Moyer
May 25th, 2010 9:55 pmHere’s my experiment with CSS3 and the Google Fonts API.
Let me know what you think!
http://willmoyer.com/plato
:) Will
Jad Limcaco
May 29th, 2010 3:55 pmHey, great job Will. How did you like the process of creating it? I find it refreshing to step away from coding websites and to just experiment and play around.
Will Moyer
May 29th, 2010 7:48 pmIt was great actually. It’s a lot of fun, and it makes me want to try designing right in the markup and skipping the photoshop phase. Thats what I did with my css3 demo and it was kind of freeing haha.
Jeremy Smith
June 1st, 2010 8:52 pmI have done some experimentation myself. http://typedsgn.com
Jad Limcaco
June 18th, 2010 5:39 amAwesome stuff Jeremy! Great job! :D
Shubhojit
June 14th, 2010 8:24 amAll these amazing work and experimentation is drawing me closer to CSS3 and away from front end designing tools. Very nice please keep up the good work
vs
August 19th, 2010 3:17 amWorked great in IE8…
e11world
August 20th, 2010 2:44 pmWonderful ways to implement this and I love how color can make a huge different in these (as well as fonts of course)
think
December 15th, 2010 4:50 pmA class tooltip used in a link does not change the style of the tooltip but of the link. How do you redefine the tooltip in http://designinformer.com/wp-content/uploads/css-posters/index.html?