Un interesante truco de el nuevo CSS 3 es la creación de cirulos, mediante el uso de border-radius CSS 3 la propiedad que se establece para crear bordes, El elemento se funde en un borde redondo continuo y generá el aspecto de un círculo. El uso de este pequeño truco ingenioso, lo hablaremos a continuación creando un menú.
Un ejemplo de la propiedad border-raidus sería este:
Esta técnica funciona en todos los navegadores que soportan la propiedad, como lo son: IE9 +, FF3 +, Safari, Chrome y Opera 9 +.
Solamente para generarlo necesitariamos un código como este:
Se generará algo como lo siguiente:
Un ejemplo de la propiedad border-raidus sería este:
[width:100px; height:100px; border-radius: 400px; /*really large border radius to create round borders*/ -moz-border-radius: 400px; -webkit-border-radius: 400px;]
Esta técnica funciona en todos los navegadores que soportan la propiedad, como lo son: IE9 +, FF3 +, Safari, Chrome y Opera 9 +.
El menú
Ahora vamos a entrar en materia y crearemos el menú redondeado empezando con la siguiente hoja de estilos:[<style type="text/css"> .menu{ width: 100%; overflow:hidden; } .menu ul{ margin: 0; padding: 0; font: bold 14px Verdana; list-style-type: none; text-align: center; /* "left", "center", or "right" align menu */ } .menu li{ display: inline; margin: 0; } .menu li a{ display:inline-block; text-align:center; text-decoration: none; color: white; background:#b72d23; margin: 0; margin-right:5px; /*right spacing between each link */ width:100px; height:100px; border-radius: 400px; /*really large border radius to create round borders*/ -moz-border-radius: 400px; -webkit-border-radius: 400px; } .menu a span{ position:relative; top:40%; } .menu li a:visited{ color: white; } .menu a:hover{ background: #a71b15; } </style>]
Solamente para generarlo necesitariamos un código como este:
[<div class="menu"> <ul> <li><a href="http://onsoni.blogspot.com/"><span>Home</span></a></li> <li><a href="http://onsoni.blogspot.com/search/label/HTML"><span>HTML</span></a></li> <li><a href="http://onsoni.blogspot.com/search/label/CSS"><span>CSS</span></a></li> <li><a href="http://onsoni.blogspot.com/search/label/Tutoriales"><span>Tutoriales</span></a></li> <li><a href="http://onsoni.blogspot.com/search/label/Javascript"><span>JavaScript</span></a></li> </ul> </div>]
Se generará algo como lo siguiente:
