CSS3 - Turn background image into CD - html

Question

Let's say I have an image of this size:
Using CSS3 and whatnot, is there a way I can make it into like a CD? You know with the whole in the middle (preferably transparent) and round edges and what not.

Answer 1

I'm not sure about a transparent middle, but this will give you the CD shape (http://jsfiddle.net/CkYcN/):
HTML:
<div class="cd">
<div class="hole"></div>
</div>
CSS:
.cd {
-moz-border-radius: 63px;
-webkit-border-radius: 63px;
border-radius: 63px;
background-image: url('http://userserve-ak.last.fm/serve/126/23679395.jpg');
width: 126px;
height: 126px;
position: relative;
}
.cd .hole {
width: 30px;
height: 30px;
position: absolute;
background-color: #fff;
left: 48px;
top: 48px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}

Answer 2

http://jsfiddle.net/5CDnw/1/
#cd {
background: rgb(255,255,255);
border-radius: 75px;
width:50px;
height:50px;
position:fixed;
z-index: 100;
left: 50px;
top: 50px;
border: 1px solid #aaa;
background: #ebebe9;
}
#cover {
position:fixed;
border-radius: 75px;
width:150px;
height:150px;
background: url(http://userserve-ak.last.fm/serve/126/23679395.jpg);
border: 1px solid #aaa;
}
​

Answer 3

Here's what I'd do (using pure CSS without a mask):
Image on the furthest layer from the screen
A later on top, using a CSS3 circle, that's while (since the div is transparent, the rest is visible). I'd place this vertically and horizontally centered.
A sufficiently larger layer on top that's another CSS3 circle such that it's radius is distance from the center to the edge of the square.
This would mean that a circle would be passing outside the original image, but you can work around this by constraining all of this within another DIV and having the biggest circle with a negative margin.
By CSS3 circle, I'm thinking about using a border-radius like this: http://www.cvwdesign.com/txp/article/413/making-circles-with-css3-border-radius but any implementation of one should do.

Answer 4

You can accomplish that effect with the CSS3 mask property. It doesn't have great browser support at this time, but if you're looking for CSS3, then you probably know that already. It is possible to create an SVG mask (which is nice because it would scale without blurring the edges if you needed to do so), however, that would be a bit tougher to setup with the compound shape (circle in the positive space and then another circle in negative space).
It's easy enough to create a PNG image, which will act as your mask like so:
.cd {
background: url('../jpop.jpg') no-repeat;
-webkit-mask: url('../my_cd_knockout.png') no-repeat;
mask: url('../my_cd_knockout.png') no-repeat;
}
Here's a good writeup with some more details on it:
http://coding.smashingmagazine.com/2011/05/11/the-future-of-css-experimental-css-properties/

Answer 5

Well to round the outside of the image you could use something like
Add following CSS attributes to your element to make its corner round.
img#CD{
background: url('../CD.jpg') no-repeat;
-webkit-mask: url('../hole.png') no-repeat;
mask: url('../hole.png') no-repeat;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid;
}
To make only bottom right corner rounded, use following CSS.
img#CD{
background: url('../CD.jpg') no-repeat;
-webkit-mask: url('../hole.png') no-repeat;
mask: url('../hole.png') no-repeat;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border: 1px solid;
}
You would of course have to change the pixel (px) value to round the image more or less.