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?
pixelpaintr 0 Newbie Poster
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).
mtroute 0 Newbie Poster
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.
pixelpaintr 0 Newbie Poster
Yes- but if the ring graphic is included in every image, you have no problem.
mtroute 0 Newbie Poster
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.
pixelpaintr 0 Newbie Poster
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.
pixelpaintr 0 Newbie Poster
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 developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.