Rounded corners without the HTML mess

Fortunately, CSS3 has come out with a way to create rounded corners automatically without using images, but on the other hand, many popular browsers (such as Internet Explorer) may take a while before it fully/partially supports CSS3 W3C recommendations.

Many designers know how to create rounded corners using CSS, HTML, and a bunch of images, but these techniques cause a lot of HTML/CSS clutter.

Below is an example of some cluttered HTML used to create rounded corners.

<div class="roundedbox">
  <div class="hd">
  <div class="c"></div>
</div>
<div class="bd">
  <div class="c">
    <div class="s">
      <-- main content goes here -->
    </div>
  </div>
</div>
<div class="ft">
  <div class="c"></div>
</div>
</div>

That’s quite a lot of code for one rounded box. Most designers know that it can be difficult to sift though HTML code like this, especially when trying to alter a page that use several rounded corners.

A solution to our problem is simple though – instead of writing all of the extra HTMLdivs each time we need a new rounded box, we can simply have jQuery do all the work for us (by way of DOM manipulation).

This useful technique is from Day 13 of the 15 Days of jQuery site. For a full tutorial or more detail on how it works, head on over there.

By utilizing the script below, we can automatically add the extra divs where needed.

<script type="text/javascript">
$(document).ready(function(){
    $("div.roundbox").wrap('
      <div class="roundedbox">'+
      ' <div class="bd">'+
      '   <div class="c">'+
      '     <div class="s">'+
      '     </div>'+
      '  </div>'+
      ' </div>'+
      '</div>');
});
</script>

The use of div.roundbox in the snippet above is key. Now, instead of writing out all of those divs every time we need to create a new rounded box, all we have to do is use the class roundbox; jQuery will traverse the DOM to find all elements that has that class value and will automatically wrap it around div‘s.

Here’s a sample div HTML structure:

<div class="roundbox">
  <-- main content goes here -->
</div>

Of course, you’ll still have to use some CSS to get the rounded corner images to work, and Jack Born of 15 Days of jQuery provides you with a downloadable package that includes the auxiliary source files you’ll need.

Read More

What is CSS?

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.
CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.
CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.
The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998)

Read More