martes, 31 de agosto de 2010

Border-radius: Diseño Web con CSS 3 - Bordes redondeados

Este tutorial debe visualizarse desde Firefox, Opera, Safari o Google Chrome.

Si usan un navegador como Firefox, Chrome u Opera podrán ver cuales son las capacidades de diseño de CSS3 aplicados a la etiqueta DIV de abajo, que entrarán este año con las nuevas versiones de los navegadores más usados, incluyendo a Internet explorer.
Las principales en cuestiones de diseño son las propiedades border-radius que permite bordes redondeados sin usar imágenes. (Opera es el único navegador que implementa las instrucciones border-radius conforme lo que será la especificación de CSS 3)
aquí
Primero veremos la propiedad que es bastante sencilla, actualmente para usarla en Firefox, Chrome y Opera deberemos anteponer la instrucción -moz y -webkit, aunque finalmente cuando la especificación se libere solamente tendremos que hacerlo con border-radius:

Por ejemplo en el siguiente cuadro en el estilo agregamos al atributo Style:
Style="
border-radius: 40px 60px 100px 100px;
-moz-border-radius: 40px 60px 100px 100px;
-webkit-border-radius: 40px 60px 100px 100px;
"
1       2
-
-
-
-
-
3      4

El código de colores corresponde al orden en que los valores afectas a las esquinas, esto es:
border-radius: esquina superior izquierda, esquina superior derecha, esquina inferior derecha y esquina inferior izquierda.
¿Simple no?

Aclaraciones de uso
border-radius - Nombre del estándar bajo CSS (De momento solamente Opera)
-moz-border-radius - Navegadores bajo el motor de Mozilla (Firefox)
-webkit-border-radius - Navegadores bajo Webkit (Safari y Chrome)

Internet Explorer no soporta ninguna instrucción, a partir de Internet Explorer 9 se implementará.

Comentarios y Consultas

Los mensajes serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

2 comentarios:

  1. El diseño web deberia ser algo muy importante.

    dominiocolectivo.com

    ResponderBorrar
  2. gracias por los tips ya mismo me pongo a probar esto que aprendi en mi diseño web

    ResponderBorrar

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.