Blog and Web

Esquinas redondeadas sin usar imagenes

Aunque resulte díficil de creer, ¡existe una forma de crear esquinas redondeadas en nuestras cajas de contenido sin usar imagenes! (la forma tradicional de crear esquinas redondeadas con imagenes fue detallado aquí)

La solución se basa en el uso de estilos CSS y javascript, guardando en la medida de lo posible, la compatibilidad con la mayoría de los navegadores y fue desarrollado por Alessandro Fulciniti con el nombre Nifty Corners Cube.

La forma de impletación puede parecer un poco complicada, pero una vez entendida las posibilidades son muy grandes. Muy bien, entremos en materia.

1. Descarga el script Nifty Corners Cube dando click aquí (o ve a la página oficial: http://www.html.it/articoli/niftycube/index.html). El .zip contiene varios archivos de ejemplo, pero el script a usar es “niftycube.js”.

2. Sube el script niftycube.js a tu hospedaje web(Que en el caso de los Blogs que no cuentan con hospedaje propio pueden utilizar hospedajes gratuitos como googlepages o geocities).

3. Llama al script desde tu web, esto es, coloca la referencia entre las etiquetas <head></head>:


 <script type="text/javascript" src="niftycube.js"></script>


4. Configura tu script. ¿Cómo funciona el script? Bien los parámetros que utiliza el script son dos:

Una clase. La clase tu la defines, aqui puedes colocar el color del fondo y el borde de la caja de contenido, el tipo de letra, el tamaño de letra, en fin, todas las propiedades que se tienen con el uso de CSS.

Un tipo de redondeo. Los tipos de redondeo están predefinidos en el script y estos son:

5. Comenzar a usarlo. Una vez que tienes la llamada al script y la clase y el tipo de redondeado que deseas tienes que declararlo entre las etiquetas <head></head> de la siguiente forma:


<script type="text/javascript">
window.onload=function(){
Nifty("#miclase","left");
/*Donde #miclase es la clase que escogiste para la caja y left el tipo de redondeado*/
}
</script>

Una vez definido esto sólo necesitas usar la clase que definiste, por ejemplo:


<div id="miclase">
<h1>Título de la caja redondeada</h1>
<p>Aquí ira cualquier tipo de contenido que desees.</p>
</div>

Usando todos los ejemplos arriba usados, la página para nuestra sencilla caja redondeada queda de la siguiente forma:


<html>
<head>
<title>Caja redondeada con Javascript y CSS</title>

<style type="text/css">
div#miclase{
width: 18em;
padding: 20px;
margin:0 auto;
background:#E6E6E6;
color:#000}
</style>

<script type="text/javascript" src="niftycube.js"> </script>
<script type="text/javascript">
window.onload=function(){
Nifty("div#box","big");
}
</script>
</head>

<body>

<div id="miclase">
<h1>Título de la caja redondeada</h1>
<p>Aquí ira cualquier tipo de contenido que desees.</p>
</div>

</body>
</html>

Con un poco de práctica y creatividad este script podria resultarte de mucha ayuda.