0

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

Attachments DFH_3.jpg 34 KB
2
Contributors
6
Replies
7
Views
6 Years
Discussion Span
Last Post by pixelpaintr
0

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

0

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.

0

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.

0

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.

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.