16 técnicas para lograr esquinas redondeadas con CSS

Las esquinas redondeadas son hoy una las técnicas mas populares en Internet, sobre todo si hablamos del universo denomino 2.0. Incluso hoy podemos verlo en servicio tan populares como Google Adsense, servicio que ahora 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.

cut.gif

ThrashBox – (Crear esquinas redondeadas)- Esquina con una sombra suave visual y con un margen mínimo.

thrashbox.jpg

cut.gif

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

schillmania.jpg

cut.gif

DomCorners - una técnica muy simple para conseguir esquinas redondeadas.

domcorners.jpg

cut.gif

virtuelvis.com esquinas redondeadas con CSS que permite que adaptes esto a los diseños existentes sin alterar ningún margen de beneficio.

virtuelvis.jpg

cut.gif

456bereastreet - Una técnica para crear esquinas y bordes con la transparencia alfa opcional.

456bereastreet.jpg

cut.gif

Esquinas en listas de noticias - fue diseñada para exhibir enlaces a las noticias recientes.

listas.jpg

cut.gif

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.

liqquidas.jpg

cut.gif

Esquinas Nifty de Anti-aliased - basadas en las esquinas Nifty y modificadas por Steven Wittens.

nifty-corners.jpg

cut.gif

Caja simple realizada por tedd – ideal para diseños no muy cargados.

caja-simple.jpg

cut.gif

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.

hermetica.jpg

cut.gif

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 fácilmente.

bloque.jpg

cut.gif

Esquinas redondas elegantes - una solución práctica utilizando imágenes pequeñas para los bordes.

elegantes.jpg

cut.gif

Esquinas redondeadas en CSS por Adán Kalsey - requiere 4 imágenes para la esquinas. Muy sencilla y fácil.

esquinas.jpg
genradores.jpg

Roundedcornr.com – Herramienta sencilla para generar las esquinas redondeadas.

roundedcornr.jpg

cut.gif

Spiffycorners.com - La manera mas simple de generar el CSS y HTML que necesitas para las esquinas sin usar imágenes o Javascript.

 

spiffycorners.jpg

 

cut.gif

Spiffybox.com - otro proyecto de los mismos creadores de esquinas Spiffy

 

spiffyboxge.jpg

  1. User Gravatar

    sesebian said,

    Wrote on July 28, 2007 @ 20:55

    ?yi çal??ma aferim (:

  2. User Gravatar

    www.webeame.net said,

    Wrote on July 30, 2007 @ 5:23

    16 técnicas para lograr esquinas redondeadas con CSS…

    Recopilación en Xybernéticos con 16 técnicas para lograr esquinas redondeadas, que podemos adaptar a nuestros propios diseños….

  3. User Gravatar

    16 técnicas CSS para mostrar esquinas redondeadas « Cosas sencillas said,

    Wrote on July 30, 2007 @ 7:15

    […] 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 […]

  4. User Gravatar

    Chicoblog said,

    Wrote on July 31, 2007 @ 18:52

    Geeenial!!!

    Gracias, lo leere cada tip de css!!!

    Saludos ;)

  5. User Gravatar

    Entradas en las blogosferas.11 - Carrero Bitácora de los Hermanos Carrero, David Carrero Fernández-Baillo y Jaime Carrero Fernández-Baillo. said,

    Wrote on August 5, 2007 @ 3:12

    […] 16 técnicas para haces esquinas redondeadas con CSS. vía: Xyberneticos […]

  6. User Gravatar

    links for 2007-08-01 en newdisco said,

    Wrote on August 6, 2007 @ 9:44

    […] 16 técnicas para lograr esquinas redondeadas con CSS « Xyberneticos Acá tienen 16 formas de lograr esquinas redondeadas con CSS (tags: css roundedcorners rounded+boxes rounded corners techniques webdesign webdev) […]

  7. User Gravatar

    J.v.C said,

    Wrote on September 3, 2007 @ 15:33

    ME parecio una muy buena información, Saludos!!

  8. User Gravatar

    Juan F. Pacchiotti said,

    Wrote on September 21, 2007 @ 17:04

    Excelente artículo!

  9. User Gravatar

    Pablo Juan said,

    Wrote on October 12, 2007 @ 11:07

    Gracias, estoy empezando a usa css y me parece excelente.

  10. User Gravatar

    Resplandor Exterior para tablas. Como se hace??? - psicofxp.com said,

    Wrote on October 14, 2007 @ 17:25

    […] para tablas. Como se hace??? Fijate si este post te sirve, es para hacer esquinas redondeadas http://www.xyberneticos.com/index.ph…eadas-con-css/ […]

  11. User Gravatar

    macuoren » Blog Archive » Esquinas Redondeadas Solo con CSS en Firefox said,

    Wrote on August 26, 2008 @ 16:34

    […] Si has llegado a este post a trabes de google es posible que te interese mas esto: 16 técnicas para lograr esquinas redondeadas con CSS. […]

Seguir comentarios por RSS · TrackBack URI

Nombre: (Necesario)

E-mail: (Necesario)

Website:

Comment: