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. Darcy Clarke and I put a quick tutorial together on how to use jQuery to make perfect rounded corner images dynamically. Today I’m going to revisit the topic and show you how much more you can do with the background-image CSS trick. I will show you how to use box-shadow, border-radius and transition to create various image styles.

View Demo Image Styles

Problem (see demo)

Take a look at the demo and note that there is border-radius and inset box-shadow applied in the first row of images. Firefox does render border-radius on image element, but doesn’t render the inset box-shadow. Chrome or Safari doesn’t render the border-radius and inset box-shadow at all.

border-radius problem

Workaround

To get the border-radius and inset box-shadow working, the workaround is to apply the actual image as background-image.

code

Dynamic Way

To make it dynamic, you can use to jQuery to wrap the background image dynamically for every image element. The jQuery code below will wrap all images with a span tag and apply the image source as the background image (jQuery code by Darcy Clarke).


<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(){

  $("img").load(function() {
    $(this).wrap(function(){
      return '<span class="image-wrap ' + $(this).attr('class') + '" style="position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });

});
</script>

Output

The above code will output the following HTML code:


<span class="image-wrap " style="position:relative; display:inline-block; background:url(image.jpg) no-repeat center center; width: 150px; height: 150px;">
	<img src="image.jpg" style="opacity: 0;">
</span>

Circle Image (see demo)

Now that the image is applied as a background image, you can pretty much add any style to it. Below is a simple circle image created with border-radius. If you are not familiar with CSS3, read my tutorial on the Basics of CSS3.

circle image

CSS


.circle .image-wrap {
	-webkit-border-radius: 50em;
	-moz-border-radius: 50em;
	border-radius: 50em;
}

Card Style (see demo)

Below is a card-like image style created with multiple inset box-shadow values.

card style

CSS


.card .image-wrap {
	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
	-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
	box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);

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

Embossed Style (see demo)

With some alterations, I can turn the card style into embossed style.

embossed image

CSS


.embossed .image-wrap {
	-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
	-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
	box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);

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

Soft Embossed Style (see demo)

This is pretty much the same as the embossed style, but I just applied 1px blur to it.

soft embossed

CSS


.soft-embossed .image-wrap {
	-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
	-moz-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
	box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);

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

Cutout Style (see demo)

Again with just inset box-shadow, I can make it to look like a cutout effect.

cutout effect

CSS


.cut-out .image-wrap {
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
	box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);

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

Morphing & Glowing (see demo)

In this example, I added transition to the image wrap element. On mouse over, it will morph from rounded corners to circle and add a glowing effect. The glowing effect is done with multiple box-shadow values.

morphing glowing

CSS


.morphing-glowing .image-wrap {
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;

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

.morphing-glowing .image-wrap:hover {
	-webkit-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
	-moz-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
	box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);

	-webkit-border-radius: 60em;
	-moz-border-radius: 60em;
	border-radius: 60em;
}

Glossy Overlay (see demo)

The glossy gradient overlay is added with the :after pseudo element in the example below.

glossy overlay

CSS


.glossy .image-wrap {
	-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
	-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);

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

.glossy .image-wrap:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 50%;
	top: 0;
	left: 0;

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;

	background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
	background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
}

Reflection (see demo)

In this example, I shifted the overlay gradient to the bottom to create a reflection.

reflection

CSS


.reflection .image-wrap:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 30px;
	bottom: -31px;
	left: 0;

	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;

	background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0)));
	background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);
}

.reflection .image-wrap:hover {
	position: relative;
	top: -8px;
}

Glossy & Reflection (see demo)

In this example, I combined the :before and :after element to create a glossy image style with reflection.

glossy + reflection

CSS


.glossy-reflection .image-wrap {
	-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
	-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);

	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;

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

.glossy-reflection .image-wrap:before {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 50%;
	top: 0;
	left: 0;

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;

	background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
	background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
}

.glossy-reflection .image-wrap:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 30px;
	bottom: -31px;
	left: 0;

	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;

	background: -moz-linear-gradient(top, rgba(230,230,230,.3) 0%, rgba(230,230,230,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,230,230,.3)), color-stop(100%,rgba(230,230,230,0)));
	background: linear-gradient(top, rgba(230,230,230,.3) 0%,rgba(230,230,230,0) 100%);
}

Tape Style (see demo)

The :after is used here to create a tape like gradient on top of the image.

tape style

CSS


.tape .image-wrap {
	-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
	-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
	box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
}

.tape .image-wrap:after {
	position: absolute;
	content: ' ';
	width: 60px;
	height: 25px;
	top: -10px;
	left: 50%;
	margin-left: -30px;
	border: solid 1px rgba(137,130,48,.2);

	background: -moz-linear-gradient(top, rgba(254,243,127,.6) 0%, rgba(240,224,54,.6) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,243,127,.6)), color-stop(100%,rgba(240,224,54,.6)));
	background: linear-gradient(top, rgba(254,243,127,.6) 0%,rgba(240,224,54,.6) 100%);
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.2);
}

Morphing & Tinting (see demo)

In the example below, I use the :after element to add a radial gradient on mouse over.

morphing + tinting

CSS


.morphing-tinting .image-wrap {
	position: relative;

	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;

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

.morphing-tinting .image-wrap:hover {
	-webkit-border-radius: 30em;
	-moz-border-radius: 30em;
	border-radius: 30em;
}

.morphing-tinting .image-wrap:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;

	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;

	-webkit-border-radius: 30em;
	-moz-border-radius: 30em;
	border-radius: 30em;
}
.morphing-tinting .image-wrap:hover:after  {
	background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
	background: -moz-radial-gradient(50% 50%, circle, rgba(0,0,0,0) 40px, rgba(0,0,0,1) 80px);
}

Feather Edge Circle (see demo)

The radial gradient can also be used as a mask to create a circle feather effect as seen in the example below.

feather circle

CSS


.feather .image-wrap {
	position: relative;

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

.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);
}

Browser Capability

This trick pretty much work on any browser (eg. Chrome, Firefox and Safari) that supports border-radius, box-shadow, :before and :after. The unsupported browsers will fall back to the image without any styles.

Use Your Creativity

As you can see, you can pretty much create any image style with combination of :before and :after pseudo element. If you come up with more creative image styles, please share it in the comments.

Update: CSS3 Image Styles – Part 2

Also read CSS Image Images – Part 2.

182 Comments

Marlin Jackson
Sep 22, 2011 at 1:34 am

Great Post!

Thanks for sharing this…bookmarked and followed on twitter.

Joer
Sep 22, 2011 at 1:36 am

Nice job !
thanks

Web Design dubai
Sep 22, 2011 at 1:44 am

great job!!! the way you explained is very good. Let me try. thank you

David
Sep 22, 2011 at 2:24 am

Nick, this is a great tutorial. I thought the effects on ‘Morphing & Glowing’ were really cool. Could definitely use this to make a WP comments section more interesting.

Doug S.
Sep 22, 2011 at 2:37 am

I’ve done a bunch of testing and border-radius on images seems to work rather well currently without any extra finicky work. Or, at least, in my experience if their absolutely positioned it does. I haven’t done an exhaustive study and it was just WebKit (Safari/Chrome) and Firefox on the Mac. However, I would expect to find a similar behavior on Windows.

Likewise, with inset shadow if you position the image relative (or absolute, for that matter) you can use the :before pseudo-selector to create an absolutely positioned box with a width and height of 100% (goes just edge to edge of the IMG) and give that an inset shadow as well as a z-index to lift it above the image. Works the same as border radius.

Josh
Sep 22, 2011 at 7:24 pm

Currently image elements do not support pseudo-elements, so unfortunately the second suggestion will not work.

Helle
Sep 22, 2011 at 2:47 am

wow … great! Thanks for sharing!!

Leon
Sep 22, 2011 at 3:00 am

The problem with the border radius and backgrounds can be fixed by using

http://css-tricks.com/7423-transparent-borders-with-background-clip/

Ralph
Sep 22, 2011 at 3:07 am

nice ones… especially the morphing and tinting demo.

Christian
Sep 22, 2011 at 3:08 am

So cool !

Thanks for sharing these tricks !

Pragmatic Design
Sep 22, 2011 at 3:09 am

Thanks. This could be very useful.

Andreas Greif
Sep 22, 2011 at 4:17 am

Whoa, that’s great! Thanks a lot!

Thorsten
Sep 22, 2011 at 4:24 am

Nice one. Thanks for sharing that!

Andy
Sep 22, 2011 at 4:24 am

very great css stuff… thumbs up and thanks for simple desription

Webdesign Stuttgart
Sep 22, 2011 at 4:54 am

Awesome! Thanks a ton for explaining the “make it a background image” fix. Can’t tell you how many hours i had wasted trying to apply some CSS3 directly to the img.

Lauren
Sep 22, 2011 at 8:04 am

! :D Thank you, I love it! This is just the issue I have been grappling with on my portfolio, I have tested your code and styles out and it looks darn swell. Now I am fast at work writing it in. Thanks again so much!

Ed
Sep 22, 2011 at 8:27 am

Very nice examples!

firdaus
Sep 22, 2011 at 8:49 am

working great.. thanks for sharing

Alessio Atzeni
Sep 22, 2011 at 11:16 am

Wow, beautiful post and very useful tips!

Daniel
Sep 22, 2011 at 11:30 am

I have problems with the jQuery Code.
I’m using Drupal, so i added the code and cleared Drupal cache. On the first time I load the page, die images are wrapped correctly and everything looks nice. When I hit the reload button, the images are not wrapped anymore. It seems, that Safari & Chrome (OSX) caches the images and reloading the page doesn’t trigger the jQuery .load() function. I don’t have a solution yet, but for me it is not working in all situations/browsers. I even had the problem, that jQuery assumes a width & height of 0 for these cached images, so I added if($(this).width != 0){ … } to the code. In iOS Safari and Firefox (OSX) it is working correctly.

Daniel
Sep 22, 2011 at 11:53 am

http://api.jquery.com/load-event/

It doesn’t work consistently nor reliably cross-browser
It doesn’t fire correctly in WebKit if the image src is set to the same src as before
It doesn’t correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser’s cache

So there are known issues with the img .load() function vs. browser caching. The annoying thing is, that is works on the first page load. When a user reloads the effect is gone – that really destroys User Experience. Maybe someone finds a solution here…

Pat
Oct 3, 2011 at 3:30 am

You can use this plugin to trigger your load event consistently across browsers and even when the images are cached. https://github.com/desandro/imagesloaded

Daniel
Oct 5, 2011 at 3:28 am

Great, that module is working!
Thanks

bob marteal
Sep 22, 2011 at 12:20 pm

Great mini-gallery of fun tricks. Thanks for putting it together.

Sonja
Sep 22, 2011 at 1:05 pm

Awesome post!!! All the effects one might need in one ;)
YET, seems like Opera doesn’t render them properly….
I don’t see how, since it’s codded for all renderers…
:?

Edu Agni
Sep 22, 2011 at 1:49 pm

The CSS3 is still limited for some things. Good tips, thank you ;)

Patrick
Sep 22, 2011 at 3:34 pm

Is there a Code-Snippet similar for MooTools?

Josh
Sep 22, 2011 at 7:05 pm

Just a heads up, Chrome and Safari do render the box-shadow, it just sits behind the image (which is as good as not rendering it at all). They both render border-radius correctly.

Jon Osmond
Sep 22, 2011 at 10:48 pm

awesome.

hyvaa
Sep 23, 2011 at 1:24 am

Really Awesome!!!!! :-)
Thx-

MOB Design Group
Sep 23, 2011 at 1:55 am

What a sweet post, I’ll certainly be implementing these immediately and referencing this post for a long time. As always, fellow designers like myself appreciate the effort!!

Damian
Sep 23, 2011 at 2:24 am

Gotta give you wraps on this, some really great work. Your code will come in very handy, hope the credit I pass on will also. Cheers

JB Web Design
Sep 23, 2011 at 2:26 am

This is an awesome post. Loads of good CSS3 detail. Good work

Francisco Sáez
Sep 23, 2011 at 3:25 am

Thanks for sharing such a great work. I’ve bookmarked this post and surely I’m gonna read it serveral times in the future.

Maulik Bengali
Sep 23, 2011 at 4:42 am

Awesome stuff.

Krsiak Daniel
Sep 23, 2011 at 5:14 am

super post
ninja skills :]

John Walker
Sep 23, 2011 at 6:35 am

Some great examples definitely going to look at working with some of these.

SztupY
Sep 23, 2011 at 10:28 am

Strange to see something that works default on IE10 (maybe IE9 too, haven’t tested), but fails on Firefox/Webkit. It used to be the other way around :)

kalen
Sep 23, 2011 at 12:26 pm

An epic post. Great tutorial. Another Wall jam.

clairence williams
Sep 23, 2011 at 12:54 pm

Those are awesome tricks. I’ll definitely be experimenting with the ideas here.
One question: whaddya do when the user has js turned off?

Michael Elfassy
Sep 24, 2011 at 11:09 am

If you are using Rails, see my post below :)

zazui
Sep 24, 2011 at 8:56 am

Very useful.’s Too late tonight, tomorrow, according to the next case study. Thank you to share!

Michael Elfassy
Sep 24, 2011 at 11:07 am

Here’s the rails way of doing it for all images: https://gist.github.com/1239460

Gaurav M
Sep 27, 2011 at 12:39 am

Nice!! 1 on the wall.

Bobs
Sep 27, 2011 at 10:03 am

What about IE 9? Nothing works, couple reloads do fix the border radis but antoher reload and things are gona again. In FF & Chrome everythings works fine.

Imobiliárias Jundiaí
Sep 27, 2011 at 10:25 am

Wow! This is really nice! No photoshop needed to do lots os cool stuffs. Tks!

Sammy
Sep 27, 2011 at 5:31 pm

Awesome tutorial – thanks! :D

Saeed Neamati
Sep 28, 2011 at 5:46 am

Great, you just covered almost every part of every effect one can apply to images using CSS3. This article worth that much that I actually bookmarked it for future reference.

I don’t know why Microsoft doesn’t get along the standard path to implement these cool stuff.

Just one note, and that is, I think Safari supports real reflections. I don’t know for sure, though.

Non-profit Websites
Sep 28, 2011 at 7:15 am

amazing!I wish I can do that, I wish am good as them :)

freelancehyderabad
Sep 28, 2011 at 10:23 am

really need full tutorials thanks :)

Natalie Dewhirst
Sep 28, 2011 at 3:12 pm

Brilliant and helpful as always! Thanks for sharing.

Tony
Sep 28, 2011 at 3:35 pm

So great! Thanks

Web design london - Evan Skuthorpe
Sep 29, 2011 at 3:18 am

Very cool! I’ve bookmarked this!

Helena Moreno
Sep 29, 2011 at 6:08 am

Awesome! Very interesting explanation and demos, they will be very helpful for me :)
Thanks.

Michel Reyes
Sep 29, 2011 at 6:30 am

I try to see the examples on ie (Internet Explorer) but all is bad, how can i get a script to see this example in ie? Thanks

Hola, he intentado ver los ejemplos en internet explorer y todo a salido fatal, no se ven como deben ser. ¿Hay algun script que permita ver los efectos en Internet Explorer?

designer
Sep 29, 2011 at 7:15 am

nice effect

Paul Santosh
Sep 30, 2011 at 5:52 am

This is really super awesome!!!!!!

Beben Koben
Sep 30, 2011 at 1:23 pm

it’s so very very usefully…thanks a lot \m/

Brian
Sep 30, 2011 at 5:28 pm

This is a great write-up. I’ve been working on image styling for mobile websites and I really appreciate the detail you go into here.

web site design
Oct 1, 2011 at 5:34 am

very nice web site design..:)

SEO Copywriting Services
Oct 2, 2011 at 6:54 am

WOW – Amazing TUT as normal – Very well done!

Olivier Nolbert
Oct 2, 2011 at 3:31 pm

Great, efficient, useful…

Thanks a lot !

mybookmart
Oct 3, 2011 at 1:55 am

wow it’s useful nice one

Ian Feather
Oct 3, 2011 at 8:30 am

I combined a few of these effects on my site a while back: http://ianfeather.co.uk/ian-feather-portfolio/

I think as with everything these effects should be used sparingly. That said there are cases where they can work very nicely.

blazicke
Oct 3, 2011 at 9:10 am

Cool & useful!

AFI Aveyron
Oct 3, 2011 at 4:38 pm

Very interesting and very useful soon

StarterWebsite's Design Pete
Oct 3, 2011 at 6:32 pm

Choice, will remember and use this!

MediaCore - The Web Specialists
Oct 3, 2011 at 6:33 pm

Awesome can’t wait to use this, css3 is pretty exciting stuff!

sara
Oct 4, 2011 at 6:26 am

Great tutorial, its helping me to justify the error

Ryan from Saskatoon Web Design
Oct 4, 2011 at 11:45 pm

Very useful post thanks a bunch!

Dan Freeman
Oct 5, 2011 at 1:37 pm

Great stuff here!

Yulia
Oct 6, 2011 at 12:32 pm

Thank you so much for that!!! It’s exactly what I needed and you saved me hours of work!!!!

Web Design Hull
Oct 6, 2011 at 2:44 pm

Thanks for some very handy hints

Airen
Oct 7, 2011 at 9:46 am

Good tutorial, so I learned a lot techniques. I really like your tutorial, I hope you can always give us such a good tutorial. I intend to put this translation into Chinese, into my blog. Well, thank you very much.

Susan
Oct 8, 2011 at 5:42 am

thanks for share tips :)

ucuz beyaz eşya
Oct 8, 2011 at 10:50 pm

thanks you .

Dean
Oct 9, 2011 at 3:06 pm

Great blog!

Techno Web Mart
Oct 10, 2011 at 4:48 am

css3 is pretty creative

Аквичоп
Oct 10, 2011 at 11:39 pm

Good tutorial, its helping me.

Tiago Kall
Oct 11, 2011 at 12:13 am

Really cool effects! but I also loved the artwork! who’s the artist?

Md Shahnur Arefin
Oct 11, 2011 at 12:59 am

It’s a nice post. I would be great if you share source file with us.

David
Oct 11, 2011 at 6:12 pm

The Embossed Style is Awesome.

Jay
Oct 11, 2011 at 9:50 pm

Thanks for the tutorial! The more you can post about CSS3 the better!

web design
Oct 13, 2011 at 2:26 am

wow this is truly awesome! good job and thanks for the tutorial man :D

Geert-Jan
Oct 13, 2011 at 5:08 am

The ‘cut-out’ style is exactly what I’ve been looking for. Thanks a lot!

margo
Oct 13, 2011 at 8:49 am

Thanks for the tutorial. Nice post

Nora @Logo Design
Oct 17, 2011 at 1:50 am

Wow, amazing images, As a designer this is such a very useful post! thanks for these tuts!

David Mundell
Oct 17, 2011 at 12:08 pm

Really cool that you add the CSS code to the blog

search engine marketing optimization services
Oct 18, 2011 at 2:25 am

OOOO!!!! Thats cool… Really like the posts. Thanks for such information.

JNsites
Oct 18, 2011 at 10:56 am

Awesome!! Thanks a bunch.

Web Design Malaysia
Oct 19, 2011 at 6:40 pm

The bit on browser compatibility saved us! thanks!

getdatinfo
Oct 21, 2011 at 2:06 pm

http://www.1hunnit.com | #1 Trusted for Webhosting SSL Certificates Reseller and MORE!!

under $2.75 Webhosting (GOOD FOR WORDPRESS!!)

วิธีทำให้ผิวขาว
Oct 22, 2011 at 5:37 pm

Awesome tutorial. I’ll use with my next website.

nino
Oct 23, 2011 at 6:03 am

owh thats great very cool
i love multimedia

adumpaul
Oct 25, 2011 at 6:28 am

Great tutorial of CSS.Realy useful thanks.

Merlin Mason
Oct 25, 2011 at 7:01 am

Good work, this is pretty damn awesome!

I just tried a little test and it seems to work well (only tested in Chrome) using the HTML5 figure element, may be of interest to those who love there semantics!

Check it out – http://jsfiddle.net/MerlinMason/U6fCS/

Lenny Terenzi
Oct 25, 2011 at 8:13 am

Excellent!

Rilwis
Oct 25, 2011 at 8:43 am

Awesome! The technique is cool and so are the effects. I’ve bookmarked this page for reference.

Brian Gervais
Oct 25, 2011 at 10:40 am

Fantastic! Thanks for the article.

Sylvain HUCK
Oct 25, 2011 at 1:36 pm

Very useful, thanks for this article.

John Huff
Oct 25, 2011 at 2:45 pm

So much to digest. Is there a way to print it off the screen, with all the coding which is showing horizontal scroll bars?

TheWebSquad
Oct 25, 2011 at 3:15 pm

WordPress Blogs have become a staple in website development and absolutely needed for content rich and ever growing sites. Theme’s and theme development is an excellent way to gain control of your WP integration.

gabestevy
Oct 25, 2011 at 5:50 pm

great post, nice share..

Non-profit web sites
Oct 25, 2011 at 10:13 pm

Nice one.Very informative.

oDigital901
Oct 26, 2011 at 2:56 am

Nice tutorial! and very important .. I will save this link for later implementation!

Ralph Almeida
Oct 26, 2011 at 5:50 am

great article! but do you know if google images shows images that were set in background?

adumpaul
Oct 27, 2011 at 4:12 am

Awesome tutorial.Thanks you for sharing!

Mike Yasieniuk
Oct 27, 2011 at 9:39 am

Definitely the best resource i’ve found for CSS3 image manipulation. Thanks!

Hector Cervantes
Oct 30, 2011 at 3:18 am

Hi, awesome tutorial, you really show what can be done with css3.
I have a question, I’m working with templates, so can’t change html, and I’m trying to apply some tinting to a JPG images, but the inner shadow does not come over the picture, any idea how to make it straight to the picture?

Thanks

ταπητοκαθαριστηρια
Feb 22, 2012 at 4:21 am

This is Great tutorial! I think css3 is the future.
thanks

Trey
Nov 2, 2011 at 9:58 am

This is great stuff; very inspirational—thank you!

I’m going to be nit-picky here, but if you want the reflection w/ mouse over example to be more realistic, the reflection should stay put while the main image rises up. Just a thought. Nice work though. Kudos.

Diana
Nov 2, 2011 at 3:02 pm

Great design, great tips, I’ll be back!

Badrun Badranaya
Nov 2, 2011 at 3:18 pm

very usefull technique… Thanks….

Lemon Colly
Nov 3, 2011 at 2:34 am

Definitely using this in my new project. Something with a sleek clean look.

Waikiki Beach
Nov 3, 2011 at 9:22 am

I love your DEMO section which make easy to follow. I just can’t stop coming back to your site to learn web design stuff.

Richard
Nov 8, 2011 at 12:09 am

This tutorial helped me in so much different projects !! you can’t imagine !

adumpaul
Nov 8, 2011 at 5:06 am

Nice information.Thanks for sharing.

Static Site Design
Nov 8, 2011 at 6:20 am

By the css code, reduce the code & time. Also get best functionality.

Tim
Nov 10, 2011 at 4:07 am

Wooohhooo, thanks for sharing this with us.

Helped me a lot!

verzdonis
Nov 10, 2011 at 8:01 am

Greetings from wonderful Greece (irony)
I tried to put it in a wordpress theme, it works perfect in firefox but it take effect (on safari and opera) only after a refresh. Does anyone know why that happens? does it have anything to do with the fact tha it it is still hosted on wamp test server?

Ahmad Awais
Nov 10, 2011 at 10:18 am

Awesome use of your creativity !
Using it now on my blog !

Paris cougar
Nov 11, 2011 at 8:41 am

looks really good and pretty easy to do! thanks!

Ταβέρνα
Nov 13, 2011 at 3:04 pm

that was very helpfull..
thanks a lot…

ccmag
Nov 13, 2011 at 11:33 pm

Awesome! Trick CSS Image Thank..

kuro
Nov 14, 2011 at 10:23 pm

AMAZING !!

great tutorial gan :)

Soniz
Nov 16, 2011 at 8:33 am

Thanks for sharing. This is what I want to know.

webdesign köln
Nov 17, 2011 at 1:23 am

Great!!! The best of CSS3

John @ Start Mission
Nov 18, 2011 at 6:59 pm

That is a very cool trick. Going to use it for mobile development since I’m building with PhoneGap, html5, css3 and js. Thanks!

Internetbureau
Nov 22, 2011 at 5:42 am

Thanks man! It gives a really cool effective, very inspiring.

sdfsdf
Nov 23, 2011 at 2:27 pm

sdfsdf

Online Şarkı Dinle
Nov 23, 2011 at 4:24 pm

olpş

Baker Designs Halifax
Nov 24, 2011 at 4:29 pm

I love that iPhone style app image. I am going to use that somewhere in the future. BTW, great tutorial ;) Straight in my bookmarks bar!

Web Design Ventura
Nov 25, 2011 at 8:32 pm

I used these css techniques to create a jquery Lavalamp menu with sons of suckerfish dropdown menus. They results were fabulous. Thanks for the tut!

Roman Liutikov
Nov 29, 2011 at 5:00 pm

Hi!
Just played with box shadows and got this nice tomato :)
http://dl.dropbox.com/u/8133826/tomato.html

jackackaman
Dec 1, 2011 at 1:04 am

Thanks man,

Really good Idea for giving the some new… We design application and web designing services…
http://www.amarinfotech.com/web-designing.html

Craig
Dec 2, 2011 at 1:21 am

Awesome examples of CSS3 in action. Inspiration for doing things a bit differently from now on…

Dheeraj Bansal
Dec 2, 2011 at 4:08 am

It’s all about an antializing effect.

Way2Geeks
Dec 3, 2011 at 1:26 pm

Great tutorial…Thanks for sharing…

Mr WordPress Designer Sheffield
Dec 5, 2011 at 10:16 am

Awesome CSS tutorial. Thumbs up!

buy season 11 gladiator
Dec 12, 2011 at 2:43 pm

nice working, its very effective

Erik
Dec 12, 2011 at 10:42 pm

Most awesome post ever :)
Thank you so much!!!

Portland Web Design
Dec 14, 2011 at 10:30 pm

This is great! Thanks! I really like the design you used.

babak
Dec 19, 2011 at 11:53 pm

how can embed this css to dynamic php code?
in code of table generator in catalog with i++

Chandru
Dec 26, 2011 at 1:25 pm

one of the best article which ever read.. really superb.. CSS3 will be sure more than flash.. really appreciate the work

Chandru
Dec 26, 2011 at 1:26 pm

chandru.techwalkers.com

Kimmy | Html5xcss3.com
Dec 29, 2011 at 7:39 am

Thank you ! Greate post for me !

isak
Jan 4, 2012 at 5:59 am

Great use of CSS3 tecnique. I’ll use it somewhere…

kataskeyh istoselidwn
Jan 7, 2012 at 6:49 am

Excellent work! keep the good work!

Innovative Web Provider
Jan 20, 2012 at 7:41 am

I’m gonna try all of these examples to see which one is better on my site. Thanks for this.

vimal
Jan 29, 2012 at 1:53 pm

very good css information. thanks.

Nature HD Wallpapers

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

Very nice CSS3 Images style. Will try it out

Tường Thọ
Feb 6, 2012 at 10:34 am

A good tut, I liked it, thank you very much^^

Bijay Joshi
Feb 8, 2012 at 4:07 am

Very nice stuffs. Thanks for sharing.

akber kabir
Feb 9, 2012 at 5:29 am

thanks ! May god bless you !

Alim
Feb 10, 2012 at 8:53 am

What about enclosed divs?
I have a div which enclosed 2 divs .. I have applied the rounded corners to the parent div but the child divs don’t get enclosed (they overlap) within the borders..

Paweł P.
Mar 4, 2012 at 8:15 am

Nice example. Best regards!

Adana Araç Kiralama
Mar 12, 2012 at 8:35 am

Nice tutorial

Web maintenance Services
Apr 14, 2012 at 12:56 am

Star Web Maker is a best company of improve your website ranking , eCommerce, software development,Web maintenance Services, Internet Marketing, web design services and Website Development etc visit starwebmaker.com

william
Apr 16, 2012 at 3:48 am

OMG ! simply amazing stuff man ! i like it so much :) btw thnx for sharing :)

sam
Apr 16, 2012 at 3:50 am

yeah man ! totally agreed wid u :)

aieee 2012 admit card

magazin
Apr 30, 2012 at 12:57 pm

This does look like a great theme.pr

Ritam Das
May 1, 2012 at 12:56 am

Awesome dude! I must use those features!!

Aman
May 11, 2012 at 5:03 am

Can some body please help me telling how to use the code.
I inserted the css in my stylesheet but what to do next.
Which code is to be placed and where to be placed after that.

Thiet ke logo
May 17, 2012 at 9:24 pm

thanks for sharing, this article details, very useful!

gays
May 19, 2012 at 2:46 am

As the admin of this site is working, no doubt very rapidly it will be well-known, due to its quality contents.

Schmutzka
May 20, 2012 at 2:18 pm

I have found, that css in form “-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8)” (and other browser’s version) slows down Twitter Bootstrap tooltip in Opera (to see what ‘tooltip’ is see schmutzka.eu and hover some link).

Solution: use classic #FFF, instead of rgba(0,0,0,1). No transparency, but no lags as well.

Take me quite a while to discover this hidden connection :).

Schmutzka
May 20, 2012 at 2:19 pm

Btw, there is a lot spam comments here.

UFC 147
Jun 18, 2012 at 4:13 am

I’m gone to convey my little brother, that he should also visit this weblog on regular basis to obtain updated from most recent information.

第四个李智
Jun 25, 2012 at 12:35 am

非常喜欢

Mitja
Jul 18, 2012 at 6:47 am

Thank u! You have clearness and most important img still beside.

Webdesign Blog
Jul 18, 2012 at 12:36 pm

Da sind interessante Themen für meinen Blog dabei.

Albin Stööp
Jul 21, 2012 at 4:34 pm

Mostly useful CSS3 stylse, thank you for showing this :)

bob
Feb 1, 2013 at 9:49 am

shut your mouth

Ibiza yates
Jul 29, 2012 at 6:59 pm

I’m gone to convey my little brother, that he should also visit this weblog on regular

Oshichi
Aug 25, 2012 at 4:50 pm

Hi & Thanks NickLa, love ♥‿♥ your css tutorials, really helps me to tweaks my blog widgets.Wondering if you’ve had any googleplus page,just to follow your blog? ✿◕‿◕✿

bob
Feb 1, 2013 at 9:49 am

kawaii you slut

paul
Aug 27, 2012 at 5:31 am

sorry – all sorted – the problems were in my implementation of jQuery – thank you very much for these insights…
Paul

Anupam
Sep 20, 2012 at 1:36 pm

I am not able to get it working with IE9 … please help

Nagy Gergely
Sep 25, 2012 at 2:11 pm

Yaay!!!! *__* This is fantastic! Thank you so much! >__<

Afzal
May 27, 2013 at 11:55 am

Impressive article with great information.. i prefer to work with these designs

Vivek Moyal
Jan 31, 2019 at 6:16 am

Great collection of CSS effects. Some of them are very useful like the tape 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.