CSS Posters

Advertisement

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

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

Laws of Robotics CSS3 Poster3

CSS3 Background-Clip Text & @font-face

Trent Walton Experiment4

Why Art?

Why Art5

All Human Beings Are Born Free

All Human Beings6

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.

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

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

  1. 1 http://designinformer.com/benefits-experimentation/
  2. 2 http://www.everydayworks.com/css_typography/HTMLCSSrotation.html
  3. 3 http://graphicpush.com/css3/posters/3laws.html
  4. 4 http://trentwalton.com/css3/type/
  5. 5 http://desandro.com/articles/why-art/
  6. 6 http://neography.com/experiment/type1/
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/css-posters/index.html
  8. 8 http://css-tricks.com/
  9. 9 http://desandro.com/
  10. 10 http://trentwalton.com/
  11. 11 http://anthonycalzadilla.com/
  12. 12 http://www.romancortes.com/blog/

↑ Back to topShare on Twitter

Former editor in chief of Designinformer.

Advertising
  1. 1

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

    0
  2. 3

    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.

    0
    • 4

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

      0
  3. 5

    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 http://boagworld.com/design/no-more-websites

    0
  4. 7

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

    0
  5. 8

    Jad, 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 =-.

    0
  6. 10

    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
    • 11

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

    Pretty 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 =-.

    0
  8. 13

    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
    • 14

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

      0
      • 15

        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
      • 16

        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
  9. 17

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

    0
  10. 18

    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
  11. 19

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

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

    0
  12. 20

    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
  13. 21

    Awesome 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? =-.

    0
  14. 23

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

    0
  15. 25

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

    0
  16. 26

    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
  17. 27

    Great 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 =-.

    0
  18. 29

    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
    • 30

      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
  19. 31

    Nice works, good article.

    0
  20. 32

    Great work Jad, posters are great. CSS3 is so powerful!
    .-= Nikola Lazarevic´s Latest Entry – 50 Fantastic Sport Logos =-.

    0
  21. 33

    Wow posters with CSS3, Amazing!
    Great Jad…

    0
  22. 34
    • 35

      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
  23. 36

    Thanks for posting my link Jad.

    0
  24. 38

    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
  25. 40

    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
  26. 41

    Had 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 =-.

    0
  27. 42

    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
  28. 43

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

    0
  29. 44

    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
  30. 46

    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
  31. 48

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

    Let me know what you think!

    http://willmoyer.com/plato

    :) Will

    0
    • 49

      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.

      0
      • 50

        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.

        0
  32. 51

    I have done some experimentation myself. http://typedsgn.com

    0
  33. 53

    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

    0
  34. 54

    Worked great in IE8…

    0
  35. 55

    Wonderful ways to implement this and I love how color can make a huge different in these (as well as fonts of course)

    0
  36. 56

    A 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?

    0

↑ Back to top