Menu Search
Jump to the content X

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 experimentation1.

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 Link

A while back, I tweeted about this CSS experiment2. 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 Link

Laws of Robotics CSS3 Poster3

CSS3 Background-Clip Text & @font-face Link

Trent Walton Experiment4

Why Art? Link

Why Art5

All Human Beings Are Born Free Link

All Human Beings6

The Experiment Link

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.

View the CSS Posters7

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 Link

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 Coyier8, David DeSandro9, Trent Walton10, Anthony Calzadilla11, and Román Cortés12. 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?

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12

↑ Back to top Tweet itShare on Facebook

Former editor in chief of Designinformer.

  1. 1

    Love 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.

    • 2

      The 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. :)

  2. 3

    Really 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

  3. 5

    These css posters are very nice and interesting . Thanks for sharing.

  4. 6

    I 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.

    • 7

      Yeah, 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? ;)

  5. 8

    Why? 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.

    • 9

      Why not? Sometimes a butter knife works just as well as a screwdriver. And in the end, the poster is made.

      • 10

        Right, 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.

      • 11

        Hey 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. :)

  6. 12

    that’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!

  7. 13

    This 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.

  8. 14

    You should really make them posters! I would really purchase a couple.

    I think a poster concerning IE would be great!!! :)

  9. 15

    I 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.

  10. 16

    CSS3 doesn’t stop to impress. I like your posters, nice work Jad.

  11. 18

    I don’t think they are all his? Very impressive none the less

  12. 19

    Nice 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.

  13. 20

    I 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): (animations only work in Safari/Chrome) :)

    • 21

      Great 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

  14. 22

    Nice works, good article.

  15. 23

    Wow posters with CSS3, Amazing!
    Great Jad…

  16. 24
    • 25

      Oh 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

  17. 26

    Thanks for posting my link Jad.

  18. 28

    Good 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.

  19. 30

    Thanks 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.

  20. 31

    Beyond 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!

  21. 32

    This is awesome. I love your poster designs. Perfect practice makes your skills perfect.
    Thanks for sharing, Jad.

  22. 33

    Great 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 , Thanks again!

  23. 35

    I’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. :)

  24. 37

    Here’s my experiment with CSS3 and the Google Fonts API.

    Let me know what you think!

    :) Will

    • 38

      Hey, 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.

      • 39

        It 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.

  25. 40

    Thanks a lot Sachin. I need to do some experimenting with PHP myself.

  26. 41

    Hehe, thanks Louis. Glad you liked my idea. I’m still thinking of a project that we can collaborate on. :)

  27. 42

    Yeah, I agree… But it was all mostly for fun. Lighten up, will ya? J/K

  28. 43

    You should. I’d be curious to see what you can come up with.

  29. 44

    I have done some experimentation myself.

  30. 46

    All 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


↑ Back to top