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:
- tr: Redondea unicamente la esquina superior derecha.
- tl: Redondea unicamente la esquina superior izquierda.
- br: Redondea unicamente la esquina inferior derecha.
- bl: Redondea unicamente la esquina inferior izquierda.
- top: Redondea unicamente las esquinas de arriba
- bottom: Redondea unicamente las esquinas de abajo
- left: Redondea unicamente las esquinas de la izquierda
- right: Redondea unicamente las esquinas de la derecha
- all: Redondea todas las esquinas
- none: No redondea ninguna
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.
muy muy muy bueno el articulo, muchas gracias, me costo mucho encontrar un tutorail que explicara esto de manera tan facial como lo hiciste tu, de verdad te felicito y te doy las gracias por publicar esto ^^, me es mucha ayuda.
Gracias
Que bueno que te fue de ayuda! Hay muchos script buenos en la web pero a veces lo diifcil es conocerlos y saberlos usar.
Saludos!
hola! y no habra uno parecido pero que comienze con la pagina y no al tener la pagina cargada? creo que con mootools!…
link
yo intente usar ese pero no me funciono! por que no hay un tutorial de como hacer sino entrando a el codigo de la pagina! que seguramente me perdi algo…
Exelente!!!! bien explicado!
No funciona cuando a los div se les coloca colores escritos por su nombre como este BACKGROUND:red, parece que solo acepta colores de tipo BACKGROUND:#00ffbb.
Compruebenlo y lo veran, yo siempre coloco colores escritos por su nombre, red, black, white Existe alguna tabla con sus equivalencias… Que hago ??????????????????
orlando aqui tienes una tabla con equivalentes
http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm
Me parece importante que además del archivo niftycube.js (que dices que es el unico a tener en cuenta del .zip) también hay que colocar el archivo niftyCorners.css en el mismo directorio de la página que mostrará el efecto. Bueno, solo así me funcionó a mi.
De todas formas, ¡muchas gracias!