Previously I wrote two tutorials on how to style the image element with CSS3 inset box-shadow and border-radius. The trick is to wrap the image with a span tag and apply the image as background-image. However, I recently ran into a problem with that trick while designing the PhotoTouch theme. The issue is that the background-image is not resizable and thus it is not a good idea to use in responsive design. Fortunately, I found a workaround to resolve this. So today I’m going to revisit this topic again.

View Demo Image Styles

Problem

Most browsers don’t render the border-radius and inset box-shadow perfectly on the image element. This means you can’t make the image look like embossed, glossy, pressed, etc.

border-radius problem

Previous Solution (see previous demo)

As I posted before, you can work around by applying the actual image as background-image.

code

Problem With Background-Image

Now the problem with using the background-image trick is that the image can not be resized dynamically. So it is not a good idea to use with responsive design where the images have to be resizable. This was an actual problem I encountered while designing the PhotoTouch theme for Themify.

New Solution!! (see demo)

Then later I found another workaround using a similar trick. Instead of applying the image as background-image, I found that I can achieve the same result by applying the CSS3 effects on the overlaying image wrap :after pseudo element. The best thing about this trick is the image remained intact and resizable.

Dynamic jQuery

Again, jQuery is used to add a dynamic wrap to the target images. The jQuery function below looks for all images in the #demo container and wraps it with a span tag.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$('#demo img').each(function() {
		var imgClass = $(this).attr('class');
		$(this).wrap('<span class="image-wrap ' + imgClass + '" style="width: auto; height: auto;"/>');
		$(this).removeAttr('class');
	});

});
</script>

Output

The above code will output the following HTML code:


<span class="image-wrap " style="width: auto; height: auto;">
	<img src="image.jpg">
</span>

The CSS Trick (see demo)

The CSS trick is very simple. The overlaying effects are applied to the .image-wrap:after pseudo element. Border-radius (rounded corners) is applied on both the image and image-wrap:after element to match the style.

screenshot

CSS


.image-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
	vertical-align: bottom;
}
.image-wrap:after {
	content: ' ';
	width: 100%;
	height: 100%;
	position: absolute;
	top: -1px;
	left: -1px;
	border: solid 1px #1b1b1b;

	-wekbit-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
	-moz-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
	box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);

	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}

.image-wrap img {
	vertical-align: bottom;

	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
	box-shadow: 0 1px 2px rgba(0,0,0,.4);

	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

Image Styles

Various styles such as embossed, cutout / pressed, and glossy effect can be achieved using multiple inset box-shadows. You can also use the :before element to another layer of effect such as glossy gradient. See the demo source code for CSS details. Resize your browser window to see the resizable images.

screenshot

Browser Support

This trick works with most modern browsers such as Chrome, Firefox, Safari, and IE9+. Technically, it works with any browser that supports Javascript and CSS3.

98 Comments

Raksaka Indra
Jan 31, 2012 at 11:33 am

Awesome… especially for Cutout and Glossy Style

Colin Oakes
Jan 31, 2012 at 12:23 pm

Nice job Nick! This method is way better than part 1, only problem is no IE7/IE8 support.

Emilio Cobos
Jan 31, 2012 at 12:33 pm

But IE7/IE8 do not support border-radius and CSS3 (at least if yo don’t use behavior), so the result is a normal square image.

Luis
Jan 31, 2012 at 8:57 pm

Oh my…why in the hell there’s always these people with the “but in IE” mumble rumble?!? This is a CSS3 tutorial for Christ’s sake! If this isn’t enough, you can read at very bottom of the article that “it works with any browser that supports Javascript and CSS3”.

Spke
Feb 1, 2012 at 8:26 am

You can use PIE CSS3 (http://css3pie.com/) if you fear is IE, PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features, Try it!!

Nick La
Feb 1, 2012 at 10:44 am

PIE wouldn’t work because IE7 or lower doesn’t support :after element.

Rob
Feb 1, 2012 at 9:28 am

Why does anyone even care if a person who has chosen to stick with IE can’t enjoy a more aesthetically pleasing site? It’s not as if there is some barrier preventing them from installing a real web browser. If web browsers cost money, and there was hardship involved, I would understand. But there all free.

I agree with Luis, enough with this IE mumble rumble!

Art
Jan 31, 2012 at 3:30 pm

I’m curious as to why you wouldn’t just apply the .image-wrap:after styles to the .image-wrap itself. I’m probably missing something trivial, but thought I’d ask.

Art
Jan 31, 2012 at 3:44 pm

My initial tests seem to indicate that if you don’t use .image-wrap:after and apply all of those styles to the .image-wrap itself, excluding, content, height, width, position, top, and left, that you get the same results.

I’ll have to do more cross-browser testing, but This would significantly reduce the overall markup and CSS necessary for this approach.

Tim Hettler
Jan 31, 2012 at 5:52 pm

@Art,

You need to apply the styles to the :after pseudo-element so that they appear “on top” of the IMG. If you apply the styles directly to .image-wrap, the IMG would obscure the styles.

Art
Feb 1, 2012 at 7:57 am

Thanks Tim. That makes complete sense now, and I can see that those styles that needed to appear above the image (box shadow) weren’t getting applied in my .image-wrap only attempts.

A very nice solution!

Beben Koben
Jan 31, 2012 at 9:04 pm

wow science again…ty master :)

César Rodríguez
Feb 1, 2012 at 3:37 am

very nice tutorial, congrats

Jason
Feb 1, 2012 at 5:31 am

Very nice, love the glossy one and opens up the doors for lots of creative shines and shimmers over pics. Will save a lot of time tampering with the pics in PS. :)

Morten Brunbjerg Bech
Feb 1, 2012 at 7:09 am

Nice trick. I’m saving this one for reference and a touch of awesomeness in future projects.

Thanks for sharing.

Peter Yee
Feb 1, 2012 at 9:34 am

Freaking awesome!

Alis
Feb 1, 2012 at 10:55 am

Thank you Nick, I really liked and enjoyed your past tutorials, thank you for sharing the fixes!

Translation Services
Feb 1, 2012 at 12:35 pm

Impressive stuff, the glossy effect sure does enhance the visual impact of a picture.

I am going to try and use some of the styles here.

Renzo
Feb 1, 2012 at 5:35 pm

I am definitely using these tips in my current project! Thank you for this post.

Cheers from Sunny Florida!

Ryan Bradley
Feb 1, 2012 at 6:17 pm

Great fix Nick, I didn’t really like the background image fix either. This is way better.

maxOman
Feb 2, 2012 at 2:31 pm

Nice post Nick.. good old jQuery to the rescue again.
It seems the “browser wars” will never end

bob marteal
Feb 2, 2012 at 4:12 pm

This is good. This is getting fun now that more and more of this fancy stuff is supported by IE. It makes selling to the bosses a lot easier.

Damian
Feb 3, 2012 at 12:33 am

and makes it fun again to be doing the dev

web designer blog
Feb 3, 2012 at 2:05 am

nice tur, and great examples..thx for sharing, bookmarked this article!

Shellway
Feb 3, 2012 at 9:24 am

Nice trick and demo, we can do magic arts with CSS3. haha

Web design london - Evan Skuthorpe
Feb 3, 2012 at 9:38 am

Nice work, cheers for the article. For those going on about IE7/8 etc, who gives a poop, it’s called browser degradation. If you want/must cater to user IE7/8 users you’re better off not using CSS3 at all if pixel perfect cross browser compatibility is essential.

Bharat
Feb 3, 2012 at 2:15 pm

Cutout style using box-shadow effect is really awesome. All these awesome things doesn’t work on IE.

Smashious
Feb 3, 2012 at 9:47 pm

Nice post, I had this issue before. Thanks

Jianbo
Feb 4, 2012 at 1:17 am

Excellent job, can’t image css can do this

Ammar @ CSS and HTML Tricks
Feb 4, 2012 at 3:46 am

Excellent post. I love to play with CSS and HTML

ayub
Feb 4, 2012 at 5:48 am

my name is ayub admed khosa is warking

ayub
Feb 4, 2012 at 5:49 am

CS3 and HTML Tricks

Edgar
Feb 4, 2012 at 6:10 pm

Great solution…. Nick is a genius

Paul
Feb 6, 2012 at 10:31 pm

That is great how you combined both relative and absolute positioning within the two image-wrap classes. They are the same yet different working together like a well-oiled machine. Kudos!

Nora Reed
Feb 7, 2012 at 1:52 am

Good to see this Post! Great job :)

Daniel
Feb 7, 2012 at 11:55 am

Last year I wrote about this behaviour in context with Opera and a possible solution for jQuery and mootools. For those who need help in german, here’s the link: http://bit.ly/s4yWJW

Graeme Blackwood
Feb 7, 2012 at 1:19 pm

Most browsers let you apply CSS3 directly to the image element now, so no need for the span.

Texas Web Developers
Feb 8, 2012 at 4:49 am

Excellent efforts! Thank you for sharing the information. Its been great to know about and appreciate your work.

Surrey Web Designer
Feb 8, 2012 at 1:21 pm

Awesome post – loving the soft embossed images.

Websalut
Feb 9, 2012 at 11:22 am

Great job, Nick! Thank you!

Shawn @ Mississauga Web Design
Feb 9, 2012 at 1:01 pm

I wouldn’t have thought to use multiple inset box-shadows to create those effects, Thank you!

joe
Feb 12, 2012 at 6:34 pm

Agreed!

DevilZen
Feb 10, 2012 at 3:54 am

It’s Great !

référencement grenoble
Feb 12, 2012 at 6:29 pm

intersting tip, as usual. and useful ! but for such a little effect, so much css code still to write, isn’t it ? anyway, thanks !

Mike
Feb 14, 2012 at 2:07 am

Thanks for the write-up! I really like these styles, but I was curious if I could still do the circle layout or the Morphing & Glowing like you had in your previous tutorial with this new version.

m1m1k
Feb 17, 2012 at 1:43 am

Yeah, I really liked some of your older overlay “frames” which still aren’t possible with code alone.
But could definitely be done with a combination of image re-sizing/stretching OR repeating chunks.

Caspar
Feb 14, 2012 at 5:30 am

Thanks for sharing! Just as a sidenote: there’s a minor typo in the code. It’s supposed to say-webkit-box-shadow, not -wekbit-etc.. Also some white-spaces get swallowed by the editor (?), like <imgsrc=" and .image-wrapimg.
Cheers!

Devin
Feb 15, 2012 at 11:38 am

Thanks for sharing your findings with us all.

polyglot
Feb 15, 2012 at 2:19 pm

Thank you for the great tutorial. Keep ’em coming :)

Fren Dee Bee
Feb 18, 2012 at 8:56 am

Nice tutorial, I’m should start to learn CSS3 now.

web designing in chennai
Feb 21, 2012 at 4:52 am

Image styles are so easy to learn. Very good tips and it is more useful for me.

Anita
Feb 21, 2012 at 6:21 am

Nice tips in one place. CSS3 gives us so many possibilities… Thaks for sharing your knowledge.

Jo
Feb 21, 2012 at 11:02 am

nice!

Jahangir
Feb 22, 2012 at 7:56 am

Thank to share great resources.

Tony
Feb 22, 2012 at 8:47 am

Interesting, thanks!

four ball testers
Feb 22, 2012 at 11:15 am

What’s up, I desire to subscribe for this blog to get hottest updates, thus where can i do it please help out.

Stephen Costello
Feb 23, 2012 at 8:51 am

Thanks! Been looking for a tut like this everywhere.

free psd
Feb 24, 2012 at 10:07 pm

Nice using of :after selector.

Peter Hjemmeside
Feb 25, 2012 at 4:45 am

Hi,
Do this also work on mobile browsers?

glass tiles
Feb 27, 2012 at 5:30 am

Hey Guys!!! this is very pretty article., this article is very helpful for us and now we came to know via this post how make image style in CSS. thank you very much for sharing us.

Huey Le
Feb 27, 2012 at 9:15 pm

Brilliant. Thanks

Steffen Daleng
Feb 29, 2012 at 7:08 pm

Great tip. thanks for sharing

Website Redesign
Mar 1, 2012 at 12:37 am

Wow! CSS3 is so cool! Imagine the possibilities using these tricks. No more photoshopping and faster loading speed!

alex li
Mar 4, 2012 at 11:27 am

Awesome! Thank you for the tutorial! Great tutorial!

Rebecca Randesi
Mar 4, 2012 at 12:40 pm

You put together great tutorials and they are easy to follow… Thank you for being awesome :)

Kathrine
Mar 5, 2012 at 3:27 am

I’ve always faced this problem and ultimately got around with this post.

Thanks for this awesome tip. =)

Prime
Mar 5, 2012 at 4:18 am

You great, you master, you imba, grrrrrrrrrrrr! Thanks mate.

Imóveis Sorocaba
Mar 5, 2012 at 9:02 am

wow! awesome tips! And its easy to understand. tks!

bitwise-bncc
Mar 6, 2012 at 9:46 am

I’m new to webdesignwall but after seeing only one tutorial (this one) i know i’m going to come here more often. This was really useful

wall321
Mar 9, 2012 at 9:33 am

Desktop Wallpaper, HD Wallpaper, Wallpaper Background
Desktop Wallpaper

Oswald
Mar 9, 2012 at 1:26 pm

You might enjoy some of these CSS3 code samples:

https://code.google.com/p/css3-graphics/

Kreativ Theme
Mar 13, 2012 at 1:46 am

Thanks a lot guys for the tips … I’m gonna need thsi trick for creating some thumbnails like pictures on a products page …

nice
May 1, 2012 at 8:59 am

nice

Trecio
Mar 19, 2012 at 4:05 am

Much needed workaround – great example!

-Trecio

Bakirkoy
Mar 23, 2012 at 9:53 am

every browsers is support?

test
Mar 25, 2012 at 5:07 pm

https://code.google.com/p/css3-graphics/

evolution
Mar 28, 2012 at 4:45 am

Very impressive! I’ve also created a beutifull Html5/Css3 galley -> http://explosivelab.blogspot.it/2012/01/galleria-di-immagini-css3.html

SE
Apr 1, 2012 at 5:46 am

Great tips. Keep up with your fantastic work!

dezebo
Apr 9, 2012 at 10:26 am

This article is very helpful for us and now we came to know via this post how make image style in CSS. thank you very much for sharing us.

tsun
Apr 10, 2012 at 2:57 am

I’m having trouble aligning said image, if I align the image the :after stays where the image previously was

How do you manage this?

Life Insurance for Diabetics
Apr 12, 2012 at 2:54 pm

Great tips thanks for this… :)

Louis-Philippe Dea
Apr 23, 2012 at 1:49 pm

Also really interesting, you can use CSS3 PIE to be compatible with IE! Thanks for the tutorial!

Louis-Philippe Dea
May 4, 2012 at 12:52 pm

Sorry, finally I can’t find the way to implement this code with CSS3 PIE. Someone found a way to make it work in IE?

whtb
Apr 24, 2012 at 11:16 am

nice tips thank u for sharing

Empregada Doméstica Sorocaba
Apr 24, 2012 at 4:58 pm

Great tips! I`ll use right now on a project! Tks!

magazin
Apr 30, 2012 at 12:54 pm

This does look like a great theme.

Web dizajn Sarajevo
May 3, 2012 at 11:21 am

Nice and useful article. Thanks.

web design Maryland
May 3, 2012 at 11:30 pm

awesome!! keep writing for us pls

طراحی سایت
May 8, 2012 at 12:45 am

i like this site and all articles

Rak Design
Jun 30, 2012 at 6:27 pm

I can see this getting used a lot soon. I can’t wait to experiment. Cheers.

电影
Jul 20, 2012 at 8:35 pm

This very good,picture’s beauty!Tks

Alquiler yates Ibiza
Jul 30, 2012 at 3:19 am

’m having trouble aligning said image, if I align the image the :after stays where the image previously was

paul
Aug 26, 2012 at 10:03 am

Thank you for this – and Iwas very hopeful that it would work – but clearly I am missing something! And I wonder if you could help?

I have added the jQuery and this is correctly producing

And I have these classes in the CSS

.feather .image-wrap {
position: relative;

-webkit-border-radius: 30em;
-moz-border-radius: 30em;
border-radius: 30em;
opacity: 0.25;
}

.feather .image-wrap:after {
position: absolute;
content: ‘ ‘;
width: 100%;
height: 100%;
top: 0;
left: 0;

background: -webkit-gradient(radial, 50% 50%, 50, 50% 50%, 70, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
background: -moz-radial-gradient(50% 50%, circle, rgba(255,255,255,0) 50px, rgba(255,255,255,1) 70px);
}

I am looking for “feathered” edge to the image; and once I have got this working I would like to try and do it for a rectangular shape – any thoughts most welcome and thank you
Paul

seo
Aug 30, 2012 at 3:04 am

I am definitely using these tips in my current project! Thank you for this post.

Graphic Design Belfast
Sep 8, 2012 at 7:35 am

Interesting approach. Border radius of an image on website design can be tricky especially when trying to create various effects. I like your solution here. The embossed edges are a fresh take on image design and layout for graphic design in websites.

Piotr
Nov 21, 2012 at 1:54 pm

I am not a CSS pro but I’ve take what was the best and apply to my site:
http://guistyles.com/index.php
If someone can take a look, maybe i can clean code after that.. i think i leave to much of it :)
Thx

D8Lab.com
May 27, 2013 at 4:18 pm

Thanks for that. Bookmarked the page! nice one…

Post Comment or Questions

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.