CSS tips and tricks

As someone with a background in developing electronics and embedded systems, it is no shock that when it comes to pretty UX interfaces I suck. My interfaces is the definition of 'total suckage'. But nevertheless, the job market demands that I at least attempt to make pretty interfaces for clients; the critical criteria for modern web applications seem to lie in the appearance instead of the substance. But alas, I digress...

I have been doing research into CSS as it is the dominant method of creating nice structured web interfaces (yes, JavaScript can do that too but I prefer to stick to using JS for behavioural coding). So I have come across a HEAP of useful tutorials that will help turn your steaming pile of crap into glistening gold!

Rounded Borders

Rounded borders looks awesome on anything. Here is the code:

.roundBorder
{
     border: 2px solid #505050;
     /* Rounded Border */
    -webkit-border-radius: 8px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
    -moz-border-radius: 8px; /* FF1-3.6 */
    border-radius: 8px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

    /* useful if you don't want a bg color from leaking outside the border: */
    -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

Background Gradient

You can read more about this here, but for now here is some code for you to play with:

.gradient
{
    /* Background Gradient */
    background-color: #69aef1;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #69aef1), color-stop(100%, #ffffff));
    background-image: -webkit-linear-gradient(top, #69aef1, #fff); /* Chrome 10+, Saf5.1+, iOS 5+ */
    background-image: -moz-linear-gradient(top, #69aef1, #fff); /* FF3.6 */
    background-image: -ms-linear-gradient(top, #69aef1, #fff); /* IE10 */
    background-image: -o-linear-gradient(top, #69aef1, #fff); /* Opera 11.10+ */
    background-image: linear-gradient(to bottom, #69aef1, #fff);
}

Word Wrapping/Breaking

This piece of CSS should provide nicer looking word-breaking/hyphenation:

    /* CSS3 word break */
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto; 

Centre Tables (and Elements)

I used this code to make a table centre properly in one of my elements. I'm sure it could find uses elsewhere though:

.center
{
      /* Reset margins for the elements (defaults to centered( */
    margin-left:auto;
    margin-right:auto;
}

CSS toggled accordion

This effect is created using a simple unordered list with added radio button functionality. Here is the code:

/* Clean up the lists styles */
ul.accordion {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Hide the radio buttons */
/* These are what allow us to toggle content panes */
ul.accordion label + input[type='radio'] {
    display: none;
}

/* Give each content pane some styles */
ul.accordion li {
    background-color: #CCCCCC;
    border-bottom: 1px solid #DDDDDD;
}

/* Make the main tab look more clickable */
ul.accordion label {
    background-color: #666666;
    color: #FFFFFF;
    display: block;
    padding: 10px;
}

ul.accordion label:hover {
    cursor: pointer;
}

/* Set up the div that will show and hide */
ul.accordion div.content {
    overflow: hidden;
    padding: 0 10px;
    display: none;
}

/* Show the content boxes when the radio buttons are checked */
ul.accordion label + input[type='radio']:checked + div.content {
    display: block;
}

So our HTML code will then be:

<ul class='accordion'>
    <li>
        <label for='cp-1'>Content pane 1</label>
        <input type='radio' name='a' id='cp-1' checked='checked'>
        <div class='content'>
            <p>text</p>
        </div>
    </li>
   
    <li>
        <label for='cp-2'>Content pane 2</label>
        <input type='radio' name='a' id='cp-2'>
        <div class='content'>
            <p>text2</p>
        </div>
    </li>
</ul>

References:

• This website is an absolute must! 'CSS3 Please!' lists a whole heap of cross-browser compatible CSS3 techniques that you can just copy and paste into your website!
• Blog post by Kenneth Auchenberg on how to achieve word wrapping in pure CSS
• Blog post by Scott Granneman on how to centre a table in CSS
• Blog post by Mike Cherim on the different types of web page layouts; fixed, fluid/liquid, and elastic.
• Another post about the three types of web page layouts (fixed, fluid, and elastic) by Extend Studio
• w3schools CSS reference
• Pure CSS toggle accordian implementation by Oliver Caldwell
• CSS Menu Maker provides a range of open source css menus
• A list of CSS tutorials by Design Festival