Smooth menu's for real browsers

Johan Vermeulen wo 23 jun 10

With the features which are introduced in de CSS3 standard, it is possible to create rounded border corners. This can be a real time saver when slicing a website.

In this example I created a simple menu with rounded corners and a background image for the on hover and active events.

Result in browsers which support HTML5/CSS3:

Result in older browsers:

Download the sprite

The HTML:

<ul>
  <li class="first"><a href="weblog.html">Weblog</a></li>
  <li><a href="weenies.html">Weenies</a></li>
  <li><a href="jobs.html">Jobs</a></li>
  <li class="last"><a href="zandbak.html">Zandbak</a></li>
</ul>

The CSS

Tweaks:

If you like you can add webkit and mozilla specific CSS to create the same results in Firefox 3 or webkit 1 enabled browsers:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

Gepost in hor | 0 reacties

Plaats je reactie

Welcome to Holland On Rails

This weblog is the official Ruby techblog from the guys at Holder, a Ruby development company. Holder is also the company behind the RubyAndRails Europe Conference in Amsterdam.

Recente Jobs

Bekijk alle jobs »»

Gereedschapskist

Onmisbare tools voor
iedere developer!

Ruby On Rails Framework voor de web 2.0 developer. Eindelijk vooruitgang!
TextMate Editor for true pro's Typ, tab, top :-) Nee, niet voor Win.
Made On A Mac En nou is het over met die saaie grijze Windows bak van je!

Auteurs op deze site

Chris Obdam

'Less is more' evangelist, past dit ook dagelijks toe op zijn tandenborstel.

Chiel Wester

Snelheidswonder op Ruby wielen. Leuk om mee te pair-programmen ;-)

Stephan Kaag

Het eerste Rails coreteam- member uit Nederland? Rails evangelist van het eerste uur.

Paul Engel

Én Rails programmeren én interfaces designen? Je zou hem superman kunnen noemen..

Dax Huiberts

Official Zip-Programmer, skinny code is helemaal zijn ding. Haalt meer code weg dan dat er bij komt.

Freek Monteban

Het nieuwste telg uit het Holland on Rails nest! Hij doet niets anders meer!

Johan Vermeulen

De stylesheet-koning uit de kop van Noord-Holland!