Uno de los problemas más habituales al crear una página web es la utilización de elementos que tengas sus esquinas redondeadas (round corners).
Aunque en diversos navegadores se permite el uso de propiedades de CSS que realizan esta función, como el border -radius utilizable para Mozilla Firefox, Chrome, Opera, Safari y Internet Explorer a partir de su versión 9, no es el método ideal ya que todavia hay muchas versiones de navegadores que no soportan dicha propiedad.
Es por eso que existen diversas opciones para crear las esquinas redondeadas, desde crear imágenes de fondo hasta c0mplejas soluciones con CSS y Javascript.
En 3 bits utilizamos una libreria muy simple para realizar dicho efecto: Nifty Corners actualmente conocida como NiftyCube.
Con esta librería podemos crear diversos efectos de una forma rápida y sin necesidad de una programación compleja. Un archivo de Javascript, una función para llamar el componente y un simple CSS es suficiente para crear no solo el efecto de redondear todas las esquinas, sino redondear también cualquiera de ellas
La libreria
Para comenzar, hemos de descargar el archivo con los diversos componentes, podemos hacerlo directamente de su web Nifty Corners.
Aparte de la libreria, en el archivo encontraremos ejemplos de uso con lo podremos ver todas las posibilidades de que dispone.
Añadir Nifty Corners a mi código
La librería
El primer paso es insertar la librería de javascript niftycube.js entre las etiquetas head nuestro código:
Nifty Corners: Javascript and CSS rounded corners <script src="niftycube.js" type="text/javascript"><!--mce:0--></script>
Además se ha de insertar una función en Javascript para renderizar las esquinas en los div que lo precisen. En este caso crearemos las esquinas redondeadas a un div con la id=box y con el radio de la esquina grande (big):
<script type="text/javascript"><!--mce:1--></script>
Añadiremos también el código CSS necesario:
<!--
body{padding: 30px 0 0;
background:#FFF;
font: 10px; Verdana,Arial,sans-serif; text-align:center
}
div#box{width: 18em;
padding: 20px;
margin:0 auto;
background:#E6E6E6;
color:#000
}
h1{font: lighter 200% "Trebuchet MS",Arial sans-serif;
color: #208BE1
}
h1,p{margin:0;
padding:10px 20px
}
-->
Para acabar, crearemos un div con la id box:
<div id="box"> <h1>Nifty Corners</h1> Muestra de esquinas redondeadas en un div</div>
El código completo es el siguiente:
<html>
<head>
<title>Nifty Corners: Esquinas redondeadas con Javascript y CSS</title>
<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty("div#box","big");
}
</script>
<style type="text/css">
body{padding: 30px 0 0;
background:#FFF;
font: 1em sans-serif;
text-align:center;
}
div#box{width: 18em;
padding: 20px;
margin:0 auto;
background:#E6E6E6;
color:#000;
}
h1{font: lighter 1.4em sans-serif;
color: #208BE1;
}
h1,p{margin:0;
padding:10px 20px;
}
</style>
</head>
<body>
<div id="box">
<h1>Nifty Corners</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non dignissim erat. Sed in risus massa. Praesent id tortor mauris. Fusce eu lectus eros, in placerat nibh. Morbi id nunc tortor, suscipit tempus odio. Aliquam interdum varius pharetra. Cras ut pretium ipsum. </p>
</div>
</body>
</html>
Y el resultado del ejemplo es el siguiente:
