So my graphic designer came up with a great design, but of course, I have no idea how to code it. I prefer to use css and html5 and avoid flash if at all possible. Take a look at the image to see what I am referring to. The image inside the circle needs to be a flash slideshow of a few rotating images. I currently use Slideshow pro Director to manage my slideshow since the content changes regularly. I just don't know if CSS is capable of creating the div with such an extreme radius and then there is IE...Thoughts?

http://www.troute.com/webphotos/DFH_3.jpg

The slideshow does not need to be Flash - just make a regular slideshow, but each image in the show should include the round edges. If you insert a square slideshow that is cropped to the bottom and right edge of the circle, it would work. You would just need to format your images with that circle graphic on top of them (Photoshop layers).

The slideshow does not need to be Flash - just make a regular slideshow, but each image in the show should include the round edges. If you insert a square slideshow that is cropped to the bottom and right edge of the circle, it would work. You would just need to format your images with that circle graphic on top of them (Photoshop layers).

The problem then would be that the circle graphic would have to redraw with each image. Also I would plan on the slideshow crossfading between images which would then cross fade the ring graphic.

Yes- but if the ring graphic is included in every image, you have no problem.

Yes- but if the ring graphic is included in every image, you have no problem.

Except it would cross fade along with the image. I think I can use CSS masking but I have to investigate a little deeper.

Do you want to fade and MOVE the image? - just a cross fade would be two images fading at the same time, not shifting position. In that case, still no problem. If you want the images to fade and also pan, then the movement would be an issue with the included ring graphic.

There's also a tutorial here on CSS making to create a round shape:

http://www.smartredfox.com/2011/01/rounded-shadowed-and-shiny-pictures-with-css3/

Basically rounding the corners to half the width of the image, to create a circle:

Css:
.image{
-moz-border-radius: 30px; /* FF1+ */
-webkit-border-radius: 30px; /* Saf3-4 */
border-radius: 30px; /* Opera 10.5, IE 9, Saf5, Chrome */
background:transparent url(../images/finance.jpg) no-repeat 0 0;
height:60px;
width:60px;
}

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.