Tag: Sliding Doors
Semantic Rounded Corners
by Paul Boutin on Nov.24, 2008, under CSS, XHTML
In today’s modern web design Rounded corners are the new trend. So in keeping up with the trend we need to accommodate new designs with our current markup. In this post I will show you how to take any four containers of markup and convert them into a semantic rounded corner display. This technique will be fluid and accommodate text size changes. (Tested in IE 6 and 7 and Firefox 3) If this works in other browsers please let me know.
This technique uses the Sliding Doors of CSS technique described by Douglas Bowman on A List Apart.
We need 4 containers or elements we can apply style to, to define the four corners we want to round. Here you see I’m using an h4 tag as my outer container and nesting inside it two spans one for the header text and one for a link or anchor point. With the inclusion of our anchor tag we now have our four elements.
<h4><span class="title">H4 Demo Title 2</span><span class="link"><a href="edit_link.htm" title="edit">Edit</a></span></h4>
<h4><span class="title">H4 Demo Title</span><span class="link"><a name="anchor"> </a></span></h4>
The markup may seem a bit overkill in this example but I tend to always design for the future. In my original markup I wanted to allow for Graphic headers as well as edit links in my headers. But as you can see in my second example the edit link can be used as a legacy anchor. No matter how you split it up the goal here is to have semantic markup in the end not a bunch of meaningless wrapper divs. I will get into using wrapper containers in a later post.
