Diseño gráfico y editorial. Tutoriales de Indesign y Photoshop. Vectorizar logo e imágenes

Bordes redondeados con CSS3

[private]Con la implementación de las nuevas reglas incluidas en CSS3 y las nuevas versiones de los principales navegadores (Firefox, basado en el motor Gecko) y (Safari y Google Chrome, basado en el motor Webkit) podemos crear bordes redondeados directamente desde CSS3, sin usar Javascript

Con este código CSS3 podremos ver, en Firefox 3, Safari 4 y Google Chrome, las esquinas redondeadas.

[css]
/*Para ver las esquinas redondeadas en
Firefox 3 y posteriores */
#ejemplo_001 {
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
}

/*Para ver las esquinas redondeadas en
Safari 4, Google Chrome y posteriores */
#ejemplo_002 {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}

#ejemplo_003 {
border-radius: 10px;
-moz-border-radius: 10px;/* Firefox, or Gecko-based browsers */
-webkit-border-radius: 10px;/* Safari, or Webkit-based browsers */
}

#ejemplo_004 {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
[/css][/private]


No hay comentarios.

Responder