16 técnicas CSS para mostrar esquinas redondeadas

En el blog XYBERNETICOS encuentro un buen artículo en donde habla sobre las esquinas redondeadas y comenta que  son una las técnicas mas populares en Internet, sobre todo si hablamos del universo denomino 2.0. Podemos verlas incluso en servicios tan populares como Google Adsense, que permite a los usuarios optar por esquinas redondeadas para mostrar los anuncios.

Existen varias formas de llegar al mismo resultado, y más aun de adaptar esta técnica a nuestros diseños. Pero si bien la técnica es agradable, es bueno saber donde utilizarla, y de que forma combinar esta técnica con el resto de nuestro diseño.

A continuación podremos ver 16 técnicas de esquinas redondeadas con CSS, con la idea de que puedas obtener mejores opciones:

  • ThrashBox – Para crear esquinas redondeadas con una sombra suave visual y con un margen mínimo.
  • Schillmania, con un bello artículo que detalla un método para hacer esquinas redondeadas con CSS. En este caso, diálogos de esquinas con imágenes, en todas sus partes utilizando Png, bordes líquidos redondeados, transparencia alfa, gradientes, patrones y cualquier otra cosa que tú (o tu diseñador) podría desear. Podrás ver un demo aquíDescarga de Códigos e imágenesArticulo original
  • DomCorners – Una técnica muy simple para conseguir esquinas redondeadas.
  • virtuelvis.com esquinas redondeadas con CSS que permite que adaptes esto a los diseños existentes sin alterar ningún margen de beneficio.
  • Esquinas redondeadas líquidas utilizando CSS – Una caja redondeada reutilizable, esta técnica utiliza en total 6 imágenes. Pero su diseño es realmente bello.
  • Esquinas Nifty de Anti-aliased – Basadas en las esquinas Nifty y modificadas por Steven Wittens.
  • Caja simple realizada por tedd – Ideal para diseños no muy cargados.
  • Las esquinas redondeadas herméticas – Con esta técnica podremos realizar una caja con las esquinas redondeadas usando solamente una imagen, y fijando esa imagen para cada esquina.
  • Crear un bloque redondeado – Una técnica que requiera dos imágenes una actuando como encabezado y otra para el contenido, es muy fácil de utilizar y nos da lugar a conseguir resultados muy agradables y además fácilmente.
  • Esquinas redondeadas en CSS por Adán Kalsey, requiere 4 imágenes para la esquinas. Muy sencilla y fácil.
  • Roundedcornr.com – Herramienta sencilla para generar las esquinas redondeadas.
  • Spiffycorners.com – Es la manera mas sencilla de generar el CSS y HTML en las esquinas sin usar imágenes o Javascript.
  • Spiffybox.com – otro proyecto de los mismos creadores de esquinas Spiffy
Anuncios

5 Responses to 16 técnicas CSS para mostrar esquinas redondeadas

  1. Raquel dice:

    Usted debería citar el articulo, dando un enlace hacia el…no realizando copy paste del articulo completo. Sobretodo si considera amigo tal blog. Tenga en cuenta el trabajo que lleva realizar tales post.

  2. Una herramienta muy buena, y que no ha sido incluida en el listado, es Curvy Corners (www.curvycorners.net/), que es un Script JS, no obstructivo ni invasivo que te permite dar esquina a cualquier elemento (en especial los div), indicando el radio para cada esquina, pudiendo ser establecido de forma separada, y permite aplicarlo inclusive a fotos. Además, toma el CSS del objeto sin ningun problema. En compatible con IE, Mozilla, Opera y Safari. Muy bueno en verdad.

  3. Toni dice:

    Gracias Juan Manuel por la información.

  4. Roberto dice:

    Gracias Juan Manuel, me parece excelente el apunte

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: