Real World HTML: Rounded Corners Box
In our last "Real World HTML" entry, we handled a funny joining of graphical lines. This time we need to handle some rounded corner boxes sitting on a gradient.
Before we go on, let's take a look at the box.
Login Box:
Whenever I sit a non-square shape on top of a gradient, I like to use a transparent PNG. This ensures that if the shape doesn't sit exactly where I expected (for whatever reason) or if the gradient needs to change, then it still looks good.
Whenever I have a rounded box like this, I also like to use a technique inspired by "Sliding Door of CSS", wherein I cut the box into two images: One has everything except the bottom part where it starts to curve and the other has everything except the same part on top. Then I nest two divs and each uses one of those images as a background - add a little padding and it all works well. It effectively nearly doubles my available height without returning to the designer.
I don't like to use two divs next to each other for this purpose, because a few times I have run into a gap between the divs because of a margin of a nested element.
This approach does not work with transparent PNGs, however, as the partial transparencies add up.
What Did I Do?
I hate to admit it, but I punted a bit on this one. I just used a single transparent PNG fixing my available size for the login box.
<div id="login-space">
<h2>Login</h2>
<form>
...
</form>
<p class="login-forgot"><a href="">Retrieve password</a></p>
</div>
</div>
background-image:url(i/login.png);
background-position:top center;
background-repeat:no-repeat;
width:246px;
height:187px;
}
#login-space {
padding:15px 15px;
}
What Should I have Done?
What I should have done (and what I did do on a similar project not much later) was go ahead and use adjacent (instead of nested) divs. It gets all the advantages listed above with the only caveat being that I have to ensure I don't get messed up by a positive margin in a containing element - pretty easy to do really.
<div id="login-space">
<h2>Login</h2>
<form>
...
</form>
<p class="login-forgot"><a href="">Retrieve password</a></p>
</div>
</div>
<div id="login-foot"></div>
background-image:url(i/login-top.png);
background-position:top center;
background-repeat:no-repeat;
width:246px;
min-height:167px;
}
#login-space {
padding:15px 15px;
}
#login-foot {
background-image:url(i/login-bottom.png);
background-position:bottom center;
background-repeat:no-repeat;
width:246px;
height:20px;
}
What Next?
We are almost done with this site! The only thing after this is the printable style sheet.
-moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; border:4px solid black; padding:12px;
More info on this blog post:
http://insideria.com/2010/04/adding-rounded-corner...
I am looking forward to those kinds of rounded corner techniques in the future. Right now, however, it is a nonstarter for me. I have to support IE7 and up on almost all of my sites (and IE6 and up on a great many of them).
That is a large part of the "Real World" part of the concept here - a lot of us still have to support these browsers that don't take advantage of the latest and greatest techniques.
Here's an example of how to wrap extra DIVs around your code (from 2006):
http://15daysofjquery.com/wrap-it-up-pretty-corner...
There are other javascript-based solutions too:
http://www.curvycorners.net/
http://jquery.malsup.com/corner/
http://blue-anvil.com/jquerycurvycorners/test.html...
The jQuery hack looks interesting though. I hadn't seen that. I will check it out.
Thanks for the tip.