16 técnicas para lograr esquinas redondeadas con CSS

Tema en 'Webmasters' iniciado por acc, 5 Ene 2009.

  1. acc

    acc
    Expand Collapse
    Recluta

    Mensajes:
    19
    Me Gusta recibidos:
    0
    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.

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

    [​IMG]
    [​IMG]

    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

    [​IMG]
    [​IMG]

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

    [​IMG]
    [​IMG]

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

    [​IMG]
    [​IMG]

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

    [​IMG]
    [​IMG]

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

    [​IMG]
    [​IMG]

    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.

    [​IMG]
    [​IMG]

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

    [​IMG]
    [​IMG]

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

    [​IMG]
    [​IMG]

    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.

    [​IMG]
    [​IMG]

    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.

    [​IMG]
    [​IMG]

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

    [​IMG]
    [​IMG]

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

    [​IMG]
    [​IMG]

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

    [​IMG]
    [​IMG]

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


    [​IMG]

    [​IMG]

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


     

Compartir esta página