10 awesome CSS tricks to enhance the design of your website

February 10th, 2010

10 awesome CSS tricks to enhance the design of your websiteCSS (Cascading Style Sheets) provides amazing solutions for an infinite number of web design challenges. The benefit of CSS is that it allows a website to be flexible and easy to update. With all your styles in one file, CSS eliminates the need to update every single page of your website everytime you want a change. CSS not only makes a website easy to maintain, but it also poses countless creative ways to enhance the design and usability of the website.

 

Here are 10 amazing ways to boost your website design, using only
HTML and CSS (no JavaScript):

  1. Transparency

    Hover your mouse over the second image below to toggle between transparent and normal mode.

    kiwi
    kiwi

    By default, the image is set to appear transparent. With mouseover, the image appears as it normally would. Both transparency and mouseover effects are easy to achieve with just a few lines of CSS:

    <style>
    img.kiwi {opacity:0.5; filter:alpha(opacity=50);}
    a:hover img.kiwi {opacity:1; filter:alpha(opacity=100)}
    </style>

    … so the complete code looks like this:

    <!DOCTYPE html>
    <html>
    <head>
    <title>How to Create Transparency with CSS</title>
    <style type=”text/css”>
    img.kiwi {opacity:0.5; filter:alpha(opacity=50);}
    a:hover img.kiwi {opacity:1; filter:alpha(opacity=100)}
    </style>
    </head>
    <body>
    <img alt=”kiwi” src=”kiwi.jpg”/>
    </body>
    </html>

    Here’s an example of the same kiwi image with transparency, placed in a div that contains an abstract background image:

    kiwi

     

  2. The @media rule for print and hand-held devices

    The @media rule lets you specify how a web page looks on a computer screen versus how it looks when printed. For example, let’s say you want all paragraphs on your web page to display in black Arial font when seen on a computer screen, but you prefer gray Times font when the web page is printed.

    Your style should look like this:

    <style>
    @media screen {p {font-family:arial, sans-serif; color:black;}}
    @media print {p {font-family:times,serif; color:gray;}}
    </style>

    The style above tells your web page that it needs to appear a certain way on screen, and another way on paper. But what if you want the font to be bold, both on screen and in print?

    You can target multiple media types like this:

    <style>
    @media screen,print {p {font-style:bold;}}
    </style>

    * Other types of media you can target with CSS:

    Media Type: Used For:
    all all media type devices
    aural speech & sound synthesizers
    braille braille tactile feedback devices
    embossed paged braille printers
    handheld small or handheld devices
    print printers
    projection projected presentations, like slides
    screen computer screens
    tty media using a fixed-pitch character grid, like teletypes & terminals
    tv television-type devices

     

  3. Centering with the auto margin and text-align properties

    The align=”center” attribute and the <center></center> attribute are both old and outdated. Sure, sometimes “old is gold”, but not in this case. If you’ve used either of these methods to center something on every page of your fifty page website….imagine updating those fifty pages when you suddenly decide you prefer a left alignment instead.

    The preferred CSS technique for centering block-level elements (in this case, a div) is:

    div {margin-left:auto; margin-right:auto;}

    But if you’re one of the FEW people who care about IE5, then you might want to use an alternate method, since auto margins are not supported by IE5:

    body {text-align:center;}
    div.content {text-align:left;}

    This method successfully centers the div with all the content, without disrupting the elements inside the div.

    body

    (content div)

    The text in this div is aligned left, even
    though the div itself is centered.

    The moral of the story – Both CSS center-align methods mentioned above are useful so use whichever suits the circumstance at hand. Quit using the align=”left” and <center></center> attributes. Hop on the CSS bandwagon. The CSS versions are much superior when it comes to updating a website, and they’re W3C standards compliant.

  4. Multiple classes, side by side

    You can assign an element as many classes as you’d like, separating each class with a space. For instance:

    <style>
    .winter {width:100px; height:100px}
    .summer {border:4px dashed blue}
    .spring {background-color:orange}
    </style>

    <div class=”winter summer spring”></div>

    And the result…

  5. Overlapping Elements with absolute positioning and z-index

    CSS allows you to choose the positioning of elements on your website. By default, all elements use relative positioning, even if you don’t specify this in your stylesheet:

    position:relative

    If you want to overlap an element, you must change its default positioning from relative to absolute, like so:

    position:absolute

    Use z-index to specify which elements overlap the others. A style of z-index:1 puts an element at the bottom, then z-index:2 in front of it, and so on. Remember, the element with the highest z-index will be closest to you when looking at the screen.

    Check out the example below to see absolute positioning and z-index in action:



    and the code…

    <style>
    .container {width:100%; height:380px; background-color:black}
    .blue, .green, .yellow
    {position:absolute; width:150px; height:150px; border:2px dashed red;}
    .blue {background-color:blue; z-index:1; margin:60px 0 0 60px}
    .green {background-color:green; z-index:3; margin:60px 0 0 300px}
    .yellow {background-color:yellow; z-index:2; margin:160px 0 0 180px}
    </style>

    <div class=”container”>
    <div class=”blue”></div>
    <div class=”green”></div>
    <div class=”yellow”></div>
    </div>

  6. Swapping an image upon mouseover

    In addition to applying the hover effect on text links, it’s nice to be able to use it for images.

    For instance, hover your mouse over the image below to see the image swap take place.



    How can you achieve this? I’m sure there are many ways out there. One way is to use the hover style combined with the background-image style. Here are the images and code for the panda-bird example:

    panda.jpg bird.jpg

    <style>
    .imagebox, a {width:264px; height:180px;}
    .imagebox {background-image:url(bird.jpg)}
    .imagebox a {display:block; background-image:url(panda.jpg)}
    .imagebox a:hover {background-image:none}
    </style>

    <div class=”imagebox”>
    <a href=”#”></a>
    </div>

  7. Placing elements side by side using floats

    Divs are easy to use since they’re block elements that don’t share their horizontal space with any other element. That’s great if you’re designing downward, but what if you want to place a bunch of divs side by side? A lot of people resort to using tables to lay out their content, since tables give you the freedom to populate rows and columns…pretty easy huh? Well, you can achieve the same task by using CSS. Are tables bad? Not really…but tables can’t be placed in a stylesheet, so updating 50 pages full of tables could get a little cumbersome.

    Here’s what CSS can do, without the use of tables:



    …try it yourself:

    <style>
    .hi {float:left; margin:0 20px 20px 0; background-color:gray; width:130px; height:80px;}
    .bye {clear:both; width:430px; height:150px; background-color:black;}
    </style>

    <div class=”hi”>
    <div class=”hi”>
    <div class=”hi”>
    <div class=”bye”>

  8. Table border, cellpadding, and cellspacing

    When using tables, almost everything is style-able with CSS….but then there’s those annoying but oh-so-necessary cellpadding and cellspacing properties that we’re forced to put directly in the table tags.

    Surprise surprise…..CSS has a cellpadding and cellspacing equivalent!

    Before you discovered the CSS method, you probably did this:

    <table border=”1″ cellspacing=”4″ cellpadding=”5″></table>

    The CSS equivalent to the above is this:

    <style>
    table, td {border-color:gray; border-style: solid;}
    table {border-spacing:4px; border-width: 0 0 1px 1px; border-collapse: collapse;}
    td {padding:5px; border:1px solid gray; border-width: 1px 1px 0 0;}
    </style>

    …and the result:

    isn’t this really cool?
    css is awesome!



    The thing I like about the CSS solution is that the border is crisp and clean, one pixel all around. If you prefer the slightly heavier appearance that you get from putting border=”1″ directly in the table tag, then tweak your style so that it looks like this:

    <style>
    table, table td {border-color:gray; border:1px solid gray}
    table {border-spacing:4px; }
    table td {padding:5px; }
    </style>

    …which will make your table appear like this:

    isn’t this really cool?
    css is awesome.

     

    In case you’re wondering, most browsers use a default of cellspacing=”2″ and cellpadding=”1″, so if you don’t style your tables, that’s what will be used.

    And for those of you who want their tables to have cellpadding=”0″ and cellspacing=”0″, simple use this style:

    <style>
    table {border-collapse: collapse;}
    th, td {padding: 0;}
    </style>

    …which will yield the following:

    isn’t this really cool?
    css is awesome.
  9. Custom bullets for unordered lists

    CSS allows you to personalize the bullets in unordered lists, and this really helps them “fit in” with the theme of your website. We’re going to create a grocery list using this green check mark with a slight drop shadow:

    green check mark

    Our HTML looks like this:

    Grocery list:

    <ul>
    <li>Eggs</li>
    <li>Milk</li>
    <li>Bread</li>
    <li>Flour</li>
    <li>Sugar</li>
    </ul>

    …and here is the resulting list:

    Grocery list:
    • Eggs
    • Milk
    • Bread
    • Flour
    • Sugar


    To implement our green check mark, we add the following style:

    <style>
    ul li {list-style-image:url(greencheck.gif)}
    </style>

    …and now our list looks like this:

    Grocery list:

    • Eggs
    • Milk
    • Bread
    • Flour
    • Sugar

    Now, in many browsers (I’m using Firefox), the check mark appears above the list alignment. In older versions of Internet Explorer (such as IE6), it shows up slightly below the list alignment. Unfortunately, using list-style-image doesn’t give us much flexibility when it comes to alignment. For a more flexible solution, I replaced the list-style-image attribute with a simple background-image, so my new style looks like this:

    <style>
    ul li {list-style-type:none; background:#fff url(greencheck.gif) no-repeat 0 0; margin-left:-40px; padding:3px 0 0 35px; height:25px}
    </style>

    …which creates a far more precise alignment:

    Grocery list:

    • Eggs
    • Milk
    • Bread
    • Flour
    • Sugar
  10. Tooltips that replace the “title” attribute in HTML links

    The title attribute is added to a link in HTML, and makes a small yellow popup appear with the text you assign to the title.

    Example:

    <a href=”#” title=”Lorem ipsum dolor sit amet…”>
    mouseover me to see a title attribute</a>

    …results in the following:

    mouseover me to see a title attribute

    It works just fine, but you can’t style it. A CSS tooltip can achieve the same effect as the title attribute, with a lot of styling flexibility:

    mouseover me to see the CSS tooltip!You can use a tooltip to provide people with information about a link before they click on it.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



    If you prefer the CSS tooltip over the HTML title attribute, then here’s how to get it:

    <style>
    div {width:275px; background-color:purple; padding:20px; border:1px dotted gray; color:#cbadcb}
    a {text-decoration:none; color:yellow; font-weight:bold}
    a:hover {color:orange; background:purple; } /*background color required for IE6*/
    a.tip span {display:none; padding:10px; margin-left:8px; width:200px;}
    a.tip:hover span {display:inline; position:absolute; background-color:#312f2f; border:1px solid black; color:#CFCFCF; font-weight:normal; font-size:9pt; margin:25px 0 0 -250px; opacity:0.9;filter:alpha(opacity=90)}
    </style>

    <div>
    <a class=”tip” href=”#”>mouseover me to see the tooltip appear!<span>You can use a tooltip to provide people with information about a link before they click on it.</span></a>. <br />
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>



comments...

  1. Leels says:

    Wow, we need someone like you on our development team! We can all code but don’t know crap about CSS. I have to stop using tables for everything and use the power of the div with CSS!

  2. Youngie, are you referring to #10…the section about tooltips? If so, then basically, what I was saying is that many people simply prefer to use the “HTML title attribute” which functions as a VERY basic tooltip (mouseover the red text in #10 to see how the title attribute works)…

    But the CSS tooltip demo is for people who wish for something beyond the basic HTML title attribute…since CSS allows you to control the color, size, transparency, etc. of your tooltip.

    The HTML title attribute comes as-is and you cannot change the appearance. So the last part of the article provides the code for the CSS tooltip, for people who wish to use it on their websites.

    Hope that answers your question.

  3. trickee says:

    I am not going to be original this time, so all I am going to say that your blog rocks, sad that I don’t have suck a writing skills

  4. Minal says:

    thanks ..very usefull css style…:)

  5. Tori says:

    I am not able to see the tips. I assume they are innovative and amazing given the comments posted by others but I cannot seem to view them.

  6. You make a good job while writting the article. I think that mixing css styles such as opaticity nad those from CSS (border-radius, border-shadow) may effect in really interesting and good-looking project.



leave a comment...



Category: All Categories, CSS, Design Stuff, Miscellaneous Follow any responses to this post through the RSS 2.0 feed or trackback from your own site.

Tags: , , , , , , , , , , , , , , , , , , , , , , , , ,