Yeah, so I like to tinker around with CSS3/HTML5 and JavaScript. I have a lab now for that.

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!

Just wanted to show y’all (Oh no, living in Montana is changing me – I said y’all) some of the new work that I have done. I really wanted an online business card that reflected my personality, aesthetically tight, narrow (I love narrow sites) and to the point. I didn’t want any extra twitter streams, tumblr, posterous, last.fm or any of that other social mumbo jumbo – A few links would suffice.

When building this site, I kept thinking “Audi” or a car with smooth wood and metal inside. Also, I wanted it to tie into the Komodo Media version 4 style with wood and dark colors. I love the Apple profile icon (as does everyone and their dogs apparently), so I wanted to use that, but give it a twist to make it my own. I modified the Apple profile icon to have a backwards/sideways hat, which as some have pointed out to my deficit, I wear all the time.

Custom icons were and have always been very important to me, none of that mainstream stuff. So, I made me a few sweet icons. The best icons, I believe, are in the contact section, so go check them out! I have a few more social network icons to do in the networks area, so be watching for those.

Next, being XHTML Strict and usable was extremely important to me. You may have noticed that when JavaScript is turned off, the site becomes readable as a very tall card and when sections are clicked they moved to a named anchor, thus repositioning the browser to that area. That’s rad. When JavaScript is detected, my favorite library, jQuery takes over and rocks a myriad of animations (hopefully not too many) and makes it all the more smooth. I added some cool nick-knacks such as anchor-section loading, which is a fancy way to say that the JavaScript detects the anchor loaded and loads the appropriate section. Also check out the hover effect on the profile dude – it’s fun ;)

Last, I’ve used CSS tricks from CSS3 to add text shadows to give that inset/letterpress look and a ton of PNG transparent images. Enough already, check it out online or read more over in the portfolio.