Infographic: Quick Look into CSS3 Properties

Infographic: Quick Look into CSS3 Properties

These days you’ll see a lot of infographics on the web. Infographics are a great way to illustrate information and transform complex topics into simple explanations. So why not make one?

In today’s article we’re showcasing an infographic, designed exclusively for Onextrapixel, by graphic designer Teresa Sposato.

Infographic: Quick Look into CSS3 Properties

Teresa Sposato wanted to create an infographic but the only thing missing to get her to his first infographic was the topic. As she was working with CSS3 on a daily basis to create more interesting designs for her clients’ websites, one of the first possible topics that came to her mind was “CSS3 properties”. She ‘Googled’ it and found exactly the article and information needed.

So she decided to make use of the article written by Christian Krammer on Onextrapixel: The Most Important CSS3 Properties Explained which introduces the reader to CSS3 properties that have general support in all contemporary browsers. This infographic takes that useful information, packs it all into one compact illustrated piece to print out and always have handy to look at when needing the right property while coding.

For a full large resolution image, click on the image below:

Infographic: Quick Look into CSS3 Properties

Thanks to Teresa Sposato for this great infographic. You can follow her @TeresaSposato on Twitter.

Are there any properties that we have missed out? We hope you have enjoyed this CSS3 properties infographic and do share any of your feedback below.

Onextrapixel, or more commonly known as OXP is dedicated to delivering useful, comprehensive and innovative information for designers, developers and many others.


  1. / Reply

    Nice graphic, let’s hope non css3 browsers die out soon.

    (you may want to fix the description of transition, it’s the same as border-radius.)

    1. / Reply

      Hi Martin,

      We have amended it. Thanks for the feedback.

    • Bill Zacht,
    • September 24, 2011
    / Reply

    It’s incomplete… The descriptions are wrong. Nice start though.

    1. / Reply

      Hi Bill, can you let us know what is missing? For the wrong description, we have already amended it.

    • Paul,
    • September 24, 2011
    / Reply

    Nice work.

    My favourite CSS3 feature is animation gives you so many options.

  2. / Reply

    useful presentation. thanks

  3. / Reply

    Border-Radius is by far my favourite CSS3 property! Now, if only web users would ditch those older browsers!

    • Chris,
    • September 26, 2011
    / Reply

    box-shadow can also accept a fourth value for “spread distance”, after the value for “blur distance”.

    • Rana mukherjee,
    • September 27, 2011
    / Reply


  4. / Reply


  5. / Reply

    Very nice contact forms.

  6. / Reply

    useful presentation. thanks

    • fahad,
    • November 9, 2011
    / Reply

    Specifying more then one backgrounds is like a ” dream comes true ” to me it’s the most useful property of CSS 3

Leave a Reply

Your email address will not be published. Required fields are marked *


Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.