Éste es un código que siempre se me olvida y lo apunto en el blog para no perderlo más. Es un código en css para limar las esquinas de un div, compatible con internet explorer y mozilla, sin imágenes ni javaScript. El código css es el siguiente:
div#nifty{ margin: 0 ;background: #F0EDE0}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #F0EDE0}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
Y en el html para aplicarlo:
<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b
class="r3"></b><b class="r4"></b></b>
[Aquí el contenido]
<b class="rbottom"><b class="r4"></b><b
class="r3"></b><b class="r2"></b><b
class="r1"></b></b></div>
Asier Marqués es un profesional freelance que trabaja como analista y desarrollador de aplicaciones web, así como consultor de sistemas Microsoft.
Enero 6th, 2008 at 2:43 pm
me parece que el codigo no esta completo
Enero 7th, 2008 at 2:36 pm
@gabriel el código está completo, qué es lo que crees que falta?
Un saludo
Febrero 13th, 2008 at 7:15 pm
gabiel lo q falta son las librerias…. buscalas como “Nifty” en google…
Febrero 13th, 2008 at 7:20 pm
@El amo del Universo pues va a ser que no.
Ésto es un código css y html sin más, el hecho de que el id de la capa se llame nifty, no significa que tenga algo que ver con la libreria javascript para conseguir éste efecto.
Un saludo
Marzo 14th, 2008 at 12:02 pm
Asier, genial!! estoy pasos mis primeros en éste mundillo, y este detalle para los div me parece muy bueno y a la vez de sencillo de hacer. Enhorabuena..
Marzo 31st, 2008 at 9:36 pm
Buenas
Acabo de probar este código y se me ve correctamente en Firefox 2.0.0.13 y Safari 3.1, pero en IExplorer 7 y Opera 9.26 se me ve el div cuadrado.
Y por cierto, hay un fallo en el codigo, un espacio de mas en ““. Deberia ser ““.
Marzo 31st, 2008 at 9:38 pm
P.D.: Vale, se me interpreto el codigo en vez de salir tal cual. Lo que queria decir era:
Donde pone < b class=”rtop”> deberia ser <b class=”rtop”>
Marzo 31st, 2008 at 10:04 pm
@LaicaNuru si tienes razón, hay un espacio en la etiqueta b.
En opera no he probado el código, pero en IE7 si, y se ve perfectamente.
Gracias por la observación, un saludo.
Agosto 15th, 2008 at 5:00 am
Muy bueno el truco!! Gracias…
Agosto 21st, 2008 at 9:48 pm
Excelente sin palabras
Agosto 27th, 2008 at 8:00 pm
Q bien gracias, mes irvio de mucho, saludos
Octubre 8th, 2008 at 5:17 pm
Excelente, sencillo y muy claro. Lo utilice para redondear bordes de imagenes. Felicitaciones
Diciembre 5th, 2008 at 12:52 am
SOY ENTERO WN CTM NO SIRBIO LA WEA
Diciembre 19th, 2008 at 4:48 am
Muchas gracias por el codigo pero la verdad no funciona en IE7 tiene problemas pero aqui les coloco uno que funciona bien
http://spiffycorners.com/index.php?sc=spiffy&bg=378EC0&fg=b20000&sz=5px
y uno escoge como lo quiere
Espero le sirva