In my last post, I described some design changes to the content management system’s element control bars used to edit content. The new UI design called for control bars with some clean, rounded edges. The problem is that the control bars appear inside the site’s visual design template so we have no idea, on a system-level, what color or image the control bars will appear on top of. This presented some contrast issues as described in the aforementioned post, but also required us to use actual transparency.
Sliding Doors
Typically, when you need to create rounded containers with CSS, Doug Bowman’s Sliding Doors technique is the way to go. Unfortunately, sliding doors is best for containers that are only rounded on two edges (think tabs instead of buttons), or have one fixed dimension (buttons that get wider but not taller), and are in front of a regular, known background. In our case, the the boxes must scale to most any width and height, are round on all four sides, and must be actually transparent — including some subtle drop-shadows. Phew.
For those of you who know your way around CSS and are unfamiliar with the technique, sliding doors uses two HTML elements, two images, and some clever CSS to create a rounded tab that will expand to hold its contents in some limited ways. The solution is elegant (no extra markup in most cases) and reliable in modern browsers. The two images consist of a narrow left edge graphic, and a wider right edge image. The left edge covers the right, completing the illusion. However, the rounded images are GIF or JPG graphics that are square and match the background color. A true transparent image would break the effect. So, I realized that while I could use what I new about sliding doors to find a solution, I would have to try something new.
The Solution
I knew right off that elegance would by and large go out the window. The technique is pretty simple, but requires extra, non-semantic mark-up. But here is the general idea for truly transparent sliding doors. Traditional sliding doors pad the outer container so that the nested element will show the other piece behind it. It covers the wider image. My technique places them side-by-side so that the transparency can work. We’ll use two nested DIV elements, the outer having a negative margin that is exactly as wide as the "corner" image, and a give the nested DIV a negative margin to match, pulling it outside the outer element. It works surprisingly well in all of the modern browsers. Here are a few details.
The markup:
<div class="actions">
<div class="roundedTop"><div class="rLeft"></div></div>
</div>
The CSS:
.roundedTop {
height: 6px;
background: url(actionsBar_RT.png) no-repeat right top;
margin-left: 6px;
}
.roundedTop .rLeft {
height: 6px;
background: url(actionsBar_LT.png) no-repeat left top;
margin-left: -6px;
}
That’s the code for the two top pieces Here’s a graphic that shows the individual graphics and DIV boundaries. The final piece is a top, middle, and bottom repeating the technique above all wrapped in a containing DIV:
That’s it. Feel free to use this technique in your website designs. I have attached a ZIP file that contains all of the HTML and CSS in a working example for you to experiment with. Let us know in the comments if you find any bugs or improvements to this idea.