Esquinas redondeadas sin usar imagenes
Febrero 27th, 2007 | Publicado en CSS, Javascript | 4 Comentarios
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.
Abril 3rd, 2007 a las 7:21 pm (#)
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
Abril 6th, 2007 a las 1:35 am (#)
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!
Junio 11th, 2007 a las 1:22 pm (#)
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…
Marzo 6th, 2008 a las 2:11 pm (#)
Exelente!!!! bien explicado!