24 técnicas más | Esquinas redondeadas con sólo CSS

Hace un tiempo os hablaba de 3 soluciones para Esquinas redondeadas en Internet Explorer | border-radius con javascript, HTC o VML. Mientras esperamos CSS3 os dejo 24 técnicas más, alternativas y soluciones para crear esquinas redondeadas.

5 Generadores online de esquinas redondeadas

1.-Spiffy Corners

Greg Johnson es el autor de 2 generadores online. Este creará un div, una caja, con esquinas redondeadas utilizando sólo CSS.

En Spiffy Corners configuras tamaño y color y obtienes el HTML y el CSS de un div con esquinas redondeadas. Sin javascript, sin imágenes y compatible con todos los navegadores.

esquinas redondeades

 

Muy parecido a Nifty Corners pero soporta anti-aliasing.

Lástima que como veis a continuación el código HTML no cumple los estándares. 

<div>
<b class="spiffy">
<b class="spiffy1"><b></b></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy3"></b>
<b class="spiffy4"></b>
<b class="spiffy5"></b></b>
<div class="spiffyfg">
<!"”el contenido -->
</div>
<b class="spiffy">
<b class="spiffy5"></b>
<b class="spiffy4"></b>
<b class="spiffy3"></b>
<b class="spiffy2"><b></b></b>
<b class="spiffy1"><b></b></b></b>
</div>

 

2.- Spiffy Box

Después de Spiffy Corners, Greg creó este generador online basada en la solución de ThrashBox. En esta ocasión, además del CSS y (X)HTML se genera una imagen.

esquinas redondeades

3.- Spanky corners

Te genera el código HTML, CSS y 4 gif.

esquinas redondeadas

4.- Roundedcornr

Seguramente el generador de esquinas redondeadas más conocido, altamente configurable, con degradados, bordes o plano.

esquinas redondeadas

5.- Allcrunchy.com

Lo configuras, te descargas 1 png y copias los códigos (incluido un javascript)

esquinas redondeadas

12 técnicas para crear esquinas redondeadas con CSS e imágenes

  1. Alsacreations: con imágenes, sin javascript y lí­quido. Demo
  2. CSS and round corners: Making accessible menu tabs: Para crear pestañas, sólo CSS.
  3. CSS and round corners: Borders with curves: varios div anidados y varias imágenes de fondo. Sólo CSS.
  4. A list Apart: semántico, sencillo y sólo con 2 gif y CSS. Demo | Demo 2

    a list apart

  5. stylable box: con imágenes, sin javascript y lí­quido.
  6. Mike”™s Experiments – CSS: Smart Corners: con imágenes, sin javascript y lí­quido.
  7. Round corners and shadows: 2 imágenes, sin javascript.
  8. Broader Border Corners: sencillo, una imagen que tapa el borde en la esquina. Demo

    24ways

  9. Even More Rounded Corners: sin javascript, con PNG
  10. vitruelvis: 1 imagen para cada esquina, sin js pero utiliza :before and :after por lo que no es compatible con todos los navegadores, por ejemplo IE.
  11. CSS Liquid Round Corners: sin javascript, CSS y 6 imágenes, además es lí­quido. Demo.

    search this

  12. Simple Box by tedd: 8 pequeños gif, sin javascript. Compatible con todos los navegadores y cumple los estándares.

7 técnicas para crear esquinas redondeadas con javascript

  1. Editsite: con javascript
  2. curvyCorners: Librerí­a Javascript (demos)

    curvycorners

  3. 456 Berea Street: con javascript, también lo puedes utilizar para botones, demos.

    456berreastreet

  4. Anti-aliased Nifty Corners: versión javascript de Spiffy Corners, es decir, basado en Nifty Corners con js y antialiasing.
  5. Anti-aliased Rounded corners with JQuery: Demo
  6. ShadedBorder – JavaScript Round Corners with Drop Shadow: Javascript, sombras, degradados. Demo.

    esquinas redondeadas

  7. corner.js: Multitud de efectos.

    esquinas redondeadas

Otras recopilaciones:

Escribí esto el 8/02/2009

4 comentarios

  1. Hugo dice:

    Una gran cantidad de opciones que ahora hay para las esquinas redondeadas, yo solo conocia los primeros dos.

  2. tienda dice:

    Lo mejor seria utilizar frameworks , nunca se sabe cuando puede ser incompatible
    De paso te invito a asisit a los cambios de http://es.geojoo.com en cuanto a CSS y estilos curvos y optimizados
    Gracias y un saludo.

Enlazan a este artículo:

Tu comentario

Usamos cookies para obtener datos estadísticos de su navegación y poder ofrecer publicidad contextual de terceros

ACEPTAR
Aviso de cookies