The First Example: Round Corners on a Navigation Bar

For web designers that like rounded corners on a container here and there (me), actually making them round represents a whole slew of challenges. More than I’m willing to write about right now—it just shouldn’t have to be that hard.

Truly a Godsend, border-radius is one of my favorite new CSS3 modules, you just specify a few simple selectors & keep movin’. If the browser can’t render them, it ‘gracefully degrades’ to a sharp square corner. Simple.

 
 
 
 
*Easter Egg* View this section in Safari for an example of CSS transition on background-position.

A very simple little snippet of CSS creates a rounded corner container — and if the browser doesn’t support it, a standard square corner is rendered. Now, if you have a style sheet for IE, you can go through the trouble of creating those rounded corners the hard way, or let them be square. On my site, I chose to let them be square. I also used some transitions on the hover action… mmm… transitions. Here is some sample code for border-radius and trasitions:

.navBar {border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;} .navBar li a {width: auto; -webkit-transition-property: color, background-color; -webkit-transition-duration: 1s, .75s ;} .navBar li a:hover {-webkit-box-shadow: 0 1px 6px #2A2A2A; padding: 35px 0px 13px 0px; text-decoration: none;}

Next: Text Shadow on Headings

Another welcome module of the CSS3 standard is text-shadow. The act of adding a simple shadow to text can really have a big impact on the overall presentation of a web page.

For example, with a dark, soft shadow beneath some text, it literally lifts up off the page. The inverse being a tight dark shadow above and a light one below ‘presses’ text into the page.

The example on the left is Safari and the right, Firefox. No IE support yet, either.

For now, only a few browsers support text-shadow. Nothing bad happens when the browser can’t render the effect - it just doesn’t show. Here is the painfully simple CSS code that renders the example above:

h1, h2, h3, h4 {text-shadow: 1px 1px 2px #FFF;}

Finally: Multi Column Layout (sweet!)

Multi Column Layout is going to allow designers to create web pages that look like your favorite magazines, newspapers, album inserts and other printed media… even books.

Here is a the kicker though - no more wrappers and containers and multiple divs and floats and positio—aaahhhhh! Just a few CSS selectors and columns are begotten.

The only real difference between Safari (left) and Firefox (right) is the rendering of the column-rule. IE does nothing.

And here’s some code for column-count, column-gap & column-rule:

.columnContainer {-webkit-column-count: 3; -webkit-column-gap:1.5em; -webkit-column-rule: 1px solid #FFF;}
In conclusion, keep your designs and layouts liquid - in the sense that you can offer elements on a page that look either this way, or that way. I’m not suggesting you must embrace Graceful Degradation, Progressive Enhancement, or some other technical standard — but, perhaps engage in some ‘Selective Coolnessivity.’