• 200715 Jul

    I mentioned earlier this year a tutorial which shows how to use CSS 3 selectors to enhance hyperlinks. Of course, you don’t need to limit yourself to just the href attribute; with CSS 3 selectors, you can use the same technique for any tag which has an attribute. I’m going to give a couple of quick examples, which will output the following result (of course, you’ll need a browser better than IE6 to see them!):

    All icons are from the fantastic collection at famfamfam.com.

    The first list item uses the general attribute selector to look for any tags with an accesskey attribute and display an icon to alert users to its presence:

    #test_selectors a[accesskey] {
    background: url('icon_key.gif') no-repeat 0 50%;
    text-indent: 20px;
    }

    The second item looks for links with a type attribute value of ‘application/pdf’ (you do mark up links to documents using the type attribute, right?) using the exact attribute selector, then inserts an icon advising you of the destination document:

    #test_selectors a[type='application/pdf'] {
    background: url('file_acrobat.gif') no-repeat 0 50%;
    text-indent: 20px;
    }

    Finally, if you have a multi-language site you can link to another version using the lang attribute with the value of that language, then use the language attribute selector to apply that country flag:

    #test_selectors a[lang|='fr'] {
    background: url('fr.gif') no-repeat 0 50%;
    text-indent: 20px;
    }

    As always there is much more you can do with the selectors; if you use or develop this idea on your site, post links here for us to see.

  • 200618 Nov

    Recently I had to code a box with rounded corners for a client, and I came up with a solution which works with 99% of the browser market and uses the CSS3 border-radius declaration for browsers which support it.

    The simplified HTML code is:

    <div class="curves top">
    <img src="http://www.css3.info/wp-content/uploads/2009/09/topl.png" width="10"
    height="10" alt=""/>
    </div>
    <div class="box"></div>
    <div class="curves bottom">
    <img src="http://www.css3.info/wp-content/uploads/2009/09/botl.png" width="10"
    height="10" alt=""/>
    </div>
    

    The divs .top and .bottom will be hidden from browsers which support border-radius (or a proprietary implementation of it).

    The basic CSS is:

    div {
    margin: 0;
    padding: 0;
    width: 100px;
    background-color: #ff0000;
    }
    
    .box {
    min-height: 100px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    }
    
    .curves {
    display: none;
    }
    

    This will display a box 100×100 pixels with curved corners in Firefox and Safari, hiding the .top and .bottom divs and implementing border-radius.

    To make it display in IE, we add some conditional comments with extra CSS which displays the .top and .bottom divs with four rounded corner images:

    <!--[if IE]>
    <style type="text/css">
    .box { min-height: 80px; }
    
    .curves {
    display: block;
    height: 10px;
    }
    
    .top {
    background: #ff0000 url('images/topr.png')
    no-repeat right top;
    }
    
    .bottom {
    background: #ff0000 url('images/botr.png')
    no-repeat right top;
    }
    </style>
    <![endif]-->
    
    <!--[if lt IE 7]>
    <style type="text/css">
    .box {
    height: 80px;
    }
    <![endif]-->
    </style>

    The main drawbacks with this method are that the CSS won’t validate and it only works with fixed width boxes; however, a little recoding will fix this second problem.

    Users of Opera and other browsers will see a square box; as my client is corporate and has never received a hit from an Opera browser, I was willing to make this sacrifice. If they ever implement -opera-border-radius I could add this in.

    Of course there are other solutions for this, but I thought this way was quite simple.

Page 2 of 2:

Hosting by: