Other Topics of Interest

PhoneGap

PhoneGap is an HTML5 app platform that allows you to author native applications with web tech...

/blog/9-phonegap.html

Kendo UI – The Art of Web Development

Kendo UI framework is developed by Telerik, which is a leading provider of development and test...

/blog/general/10-kendo-ui-–-the-art-of-web-development.html

How to Create a Drawing App with HTML5 Canvas

This tutorial will take you step by step through the development of a simple web drawing applicati...

/blog/general/11-how-to-create-a-drawing-app-with-html5-canvas.html

Image Gallery for Mobile and Touch Devices

PhotoSwipe is a HTML/CSS/JavaScript based image gallery specifically targeting mobile devices...

/blog/general/13-image-gallery-for-mobile-and-touch-devices.html

Introducing JC Pop Out Panel

JCPOP stands for Joomla Content Pop Out Panel a.k.a JC Pop Out Panel, it's a plugin for Joomla Con...

/demo2/jcontent-pop-out-panel.html

JCPOP is available!!

JCPOP stands for Joomla Content Pop Out Panel a.k.a JC Pop Out Panel, it's a plugin for Joomla Con...

/news-updates/17-jcpop-is-available.html

How to Create Various CSS3 Image Styles

Print

User Rating:  / 0
PoorBest 

css3-image-style

When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn’t render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly.

 

WebDesignerWall has written a tutorial: CSS3 Image Styles, which showed us how much more we can do with the background-image CSS trick. He has also showed us how to use box-shadow, border-radius and transition to create various image styles.