LearnStyling Images with CSS3

writes on January 31, 2012

Share with your friends


Nick La over at Web Designer Wall put together a great article on how to style images with CSS3. The styles include: Basic Style(rounded corners), Embossed Style, Soft Embossed Style, Cutout Style and Glossy Overlay. I personally love the Embossed Style, it’s ideal for interface buttons. Originally Nick ran into some issues when styling for a responsive layout. He quickly fixed them with an alternate solution. Check out the article to see his solution. Great job Nick, we appreciate the tips and tricks!

View the Tutorial
Demo Page

5 Responses to “Styling Images with CSS3”

  1. I love the 
    Glossy Overlay thing.

  2. Very informative article on designing. It’s true CSS is an important part of your overall designing process and if it is implemented effectively it can work wonders for your website and blog.

  3. Cheers Mat for sharing this great tutorial. Was a nice find and read this morning. It’s amazing what can now be done in CSS now that just wasn’t possible a few years ago, now we haven’t just got to rely on rasterized bitmap applied effects solely from photoshop. Even better that it is a tutorial showing you how it is done and not just examples. Was easy to follow, image styles are so useful, especially if you want to give a group of images the same effect. Again thanks for this nice find!

  4. Certainly, it is much more pleasant to look at such style of registration, than on simple boring rectangular pictures.

Leave a Reply

Want to learn more about Design?

Design refers to visuals, interaction flows, wireframes, branding, and more. Learn how to use good design to enhance your website, mobile app, or business.

Learn more