Uncategorized « Enrico Foschi’s official blog

Archive for the ‘Uncategorized’ Category

CSS Rounded box container with Sprites – No hacks, IE6, IE7, Firefox 2, Firefox 3 (and others) compatible

Dear all,

while working to the great beta 2 of www.agglom.com, finally I found my way on the code for a CSS Rounded box container that:

doesn’t uses <img> tags
uses sprite in corners
is W3C compliant

In a quick search, I couldn’t find any on the web (particularly, when dealing with Sprites). So, here’s my own:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Rounded boxes test</title>
    <style type="text/css">
        .BC
        {
            position: relative;
        }
        .BCC
        {
         background:#0f0;
        }
        .BCT, .BCB
        {
            display: block;
            height: 5px;
            overflow: hidden;
            position: relative;
            width: 100%;
        }
        .BCTL, .BCTR, .BCBL, .BCBR
        {
            width: 5px;
            height: 5px;
        }
        .BCTL
        {
         /* Insert top left corner here */
         background:#0ff;
            float: left;
        }
        .BCTR
        {
         /* Insert top right corner here */
         background:#00f;
            float: right;
        }
        .BCBL
        {
         /* Insert bottom left corner here */
         background:#fa0;
            float: left;
        }
        .BCBR
        {
         /* Insert bottom right corner here */
         background:#ff0;
            float: right;
        }
        .BCTC, .BCBC
        {
            padding: 0 5px;
            position: relative;
        }
        .BCTM, .BCBM
        {
            background: #f0f;
        }
    </style>
</head>
<body style="padding: 20px;">
    <div class="BC">
        <div class="BCT">
            <div style="position: absolute;">
                <div class="BCTL">
                </div>
                <div class="BCTR">
                </div>
            </div>
            <div class="BCTC">
                <div class="BCTM">
                    &nbsp;</div>
            </div>
        </div>
        <div class="BCC">DIV CONTENT</div>
        <div class="BCB">
            <div style="position: absolute;">
                <div class="BCBL">
                </div>
                <div class="BCBR">
                </div>
            </div>
            <div class="BCBC">
                <div class="BCBM">
                    &nbsp;</div>
            </div>
        </div>
    </div>
</body>
</html>

Any comment would be much appreciated
Enrico Foschi