Menu Search
Jump to the content X X

Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now →

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 Link

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

CSS3 Background-Clip Text & @font-face Link

Trent Walton Experiment3

Why Art? Link

Why Art

All Human Beings Are Born Free Link

All Human Beings4

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 Posters

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 Coyier5, David DeSandro6, Trent Walton7, Anthony Calzadilla8, and Román Cortés9. 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 http://www.everydayworks.com/css_typography/HTMLCSSrotation.html
  2. 2 http://graphicpush.com/css3/posters/3laws.html
  3. 3 http://trentwalton.com/css3/type/
  4. 4 http://neography.com/experiment/type1/
  5. 5 http://css-tricks.com/
  6. 6 http://desandro.com/
  7. 7 http://trentwalton.com/
  8. 8 http://anthonycalzadilla.com/
  9. 9 http://www.romancortes.com/blog/

↑ Back to top Tweet itShare on Facebook

Advertisement

Former editor in chief of Designinformer.

  1. 1

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

    0
  2. 2

    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.

    0
    • 3

      Jad Limcaco

      May 29, 2010 3:48 pm

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

      0
  3. 4

    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.

    0
    • 5

      Kurt Vachon

      May 6, 2010 10:36 pm

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

      0
      • 6

        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.

        0
      • 7

        Jad Limcaco

        May 29, 2010 3:49 pm

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

        0
  4. 8

    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.

    0
  5. 9

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

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

    0
  6. 10

    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.

    0
  7. 11

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

    0
  8. 13

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

    0
  9. 14

    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.

    0
  10. 15

    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): http://www.jonikorpi.com/card/card.html (animations only work in Safari/Chrome) :)

    0
    • 16

      Jad Limcaco

      May 29, 2010 3:51 pm

      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

      0
  11. 17

    Wow posters with CSS3, Amazing!
    Great Jad…

    0
  12. 18
    • 19

      Jad Limcaco

      May 29, 2010 3:52 pm

      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

      0
  13. 20

    Thanks for posting my link Jad.

    0
  14. 22

    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.

    0
    • 23

      Jad Limcaco

      May 29, 2010 3:53 pm

      Nice! Keep up the great work Ken. I’m really enjoying your articles and comics.

      0
  15. 24

    Grün Weiss

    May 6, 2010 9:18 pm

    Nice works, good article.

    0
  16. 25

    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.

    0
  17. 26

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

    0
  18. 27

    Scott Corgan

    May 10, 2010 11:00 pm

    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!

    0
  19. 28

    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 http://simonfosterdesign.com/sketchbook.html , Thanks again!

    0
    • 29

      Jad Limcaco

      May 29, 2010 3:54 pm

      Excellent! You got some mad skills Simon. I appreciate you sharing your work. It’s very inspiring!

      0
  20. 30

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

    0

↑ Back to top