Member Avatar for mtroute

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

DFH_3.jpg 34 KB
  • 2 Contributors
  • 6 Replies
  • 128 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by pixelpaintr

Dani AI

Generated

Quick, practical path that avoids the ring crossfading with your photos: keep the ring as a static overlay and mask the slideshow itself into a circle. was right that embedding the ring in each image guarantees the crop, but also correctly noted the ring will crossfade if you do that. A better approach is a masked slideshow (CSS clip-path or SVG) with an absolutely positioned PNG/SVG ring above it. That keeps the ring visually constant while images fade underneath.

Example structure and CSS (modern, minimal):

<div class="circle-stage">
  <div class="slideshow">
    <img src="slide1.jpg" class="active">
    <img src="slide2.jpg">
    <!-- slideshow JS toggles the .active class to crossfade opacity -->
  </div>

  <div class="ring"></div>  <!-- static ring overlay (PNG or SVG) -->
</div>
.circle-stage { position:relative; width:300px; height:300px; }
.slideshow { position:absolute; inset:0; overflow:hidden;
             clip-path: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%); }
.slideshow img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;
                 opacity:0; transition:opacity .6s ease; }
.slideshow img.active { opacity:1; }
.ring { position:absolute; inset:0; background:url("ring.png") center/contain no-repeat;
        pointer-events:none; }

Notes, fallbacks and gotchas:

  • Clip-path and CSS masks are easiest and GPU-friendly for simple crossfades; see browser support and details on MDN: clip-path documentation and compatibility at Can I use: clip-path.
  • If the slideshow is actual Flash content, CSS clipping will not affect the SWF presentation; either switch to an HTML5 slideshow or allow HTML overlay over the SWF (wmode tricks) and use a static overlay.
  • For older browsers lacking clip-path, fall back to a pre-cropped circular PNG, an SVG <clipPath> wrapper, or simple border-radius on a wrapper (less precise for non-square containers).
  • Keep animations to opacity/transform for smooth performance; avoid animating complex mask shapes.
Member Avatar for pixelpaintr

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

Member Avatar for mtroute

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.

Member Avatar for pixelpaintr

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

Member Avatar for mtroute

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.

Member Avatar for pixelpaintr

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.

Member Avatar for pixelpaintr

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

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.