As CSS3 is hitting the web hard, rounded stuff is poppin’ up all over the place. Rounded avatars/images are starting to become a reality. Trent Walton has a nice article on this here. It’s pretty simple, just apply a border radius to the <img> itself, however Firefox and Opera don’t play well with the border-radius like other browsers do.
I want a solution for Firefox and Opera. As of now, I’ve not come up with a solution that is truly a mask (meaning it would work well on backgrounds of any color/pattern/texture, but this solution works for Opera, Firefox, Webkit and Chrome on solid color backgrounds.
Markup
<span class="frame">
<img src="/path/to/img.png" />
</span>
CSS
.frame{
display:inline-block;
position:relative;
overflow:hidden;
}
.frame>img{
vertical-align:top;
}
.frame, .frame:before{
-moz-border-radius:100em;
border-radius:100em;
}
.frame>img{
-webkit-border-radius:100em;
}
.frame:before{
content:'';
display:block;
position:absolute;
left:0;
right:0;
width:100%;
height:100%;
margin:-10em;
border:10em solid #1a1a1a;
}
Preview
Cons
The biggest con to this technique is that the rounding technique is just a color, not a mask, meaning this works well for solid backgrounds, but not patterned backgrounds :(
Play with it!
Wanna mess with the code? Go edit it live on JS Fiddle!
Tested with Opera 10.63. Works like a charm, and the same with Firefox 4.0b6
Thanks Karl!
You simple could do this in photoshop, it saves space, and all that css is not really needed.
But it is a very nice technique!
I personally should this in photoshop, and not in css.
Now the border color is black, how can i change into white color.
nice css
Excellent post of beautiful images & avatars with the proper codings. Gonna check it out.
Thx for sharing this. Will make use of it soon.
hello , cool blogue you have here!
You can actually accomplish exactly what you want, through a bit of simple jQuery.
I’ve created a fiddle: http://jsfiddle.net/UENVQ/
Basically, you just wrap the image in an element, and use jQuery to parse out the image’s properties (dimensions, source) and set them as css properties on the element (width, height, background).
Once its rendered via background, you can do whatever you want. Add shadows, radii, inset shadows, borders, etc.
I’ve had that twice already and I’m still only 17 minutes in
I’m a very long time watcher and I just assumed I’d drop by and say hi for that first time. I truly like your posts. Thanks