• Sigueme en Twitter

Realizar bordes redondeados facilmente con CSS3

bordes-redondeados

Desde sus primeras versiones CSS ha tenido como premisa separar el contenido del aspecto visual,lo cual se ha logrado, hoy en día se encuentra en desarrollo la versión de CSS3, yo he venido trabajando con CSS2 , a pesar de que este sigue vigente, es importante comenzar a conocer que opciones nos dará CSS3, es por eso que hoy les traigo un tutorial sencillo que nos permitirá realizar uno de los elemento visuales mas usados hoy en día. Hablo de los bordes redondeados, eso que le dan un toque visual bastante agradable a los contenedores de texto e imágenes.

Para realizar esto haremos uso de la propiedad CSS3 Border-radius, el único inconveniente de este método es que solo funciona con los navegadores Chrome,Firefox, Safari, y no con Internet Explorer, ya saben como se las gastan los de Microsoft con eso de seguir estándares , esperemos que en el IE9 por fin se pongan a la par con sus competidores, pero no se diga mas, manos a la obra.

1.- Lo primero que haremos será crear nuestro div contenedor, como quizás uses muchos bordes redondeados podemos crear una clase para el Div al que llamaremos redondeado. nuestro código puede verse como este :

<div>
<p>Esta es la nueva forma de crear bordes redondeados..fácil y sencillo</p>
<p>Esta es la nueva forma de crear bordes redondeados..fácil y sencillo</p>
<p>Esta es la nueva forma de crear bordes redondeados..fácil y sencillo</p>
<p>Esta es la nueva forma de crear bordes redondeados..fácil y sencillo</p>
<p>Esta es la nueva forma de crear bordes redondeados..fácil y sencillo</p>
</div>

2.- Ahora lo siguiente sera aplicar la nueva regla de CSS3 para creer los bordes redondeados .

.redondeado {
-moz-border-radius: 20px; /*borde para Firefox*/
-webkit-border-radius: 20px; /*borde para chrome y safari*/
padding-left:15px; /*Ajustamos nuestro texto*/
background-color: black;
color:white;
}

El resultado final sera algo como esto :

bordes-redondeados

Como podrán observer más facil imposible.

Notas finales:

Esta nueva propiedad permite redondear cada una de las esquina por separa para lograr efectos diferentes para esto se pueden utilizar las siguientes propiedades.

Para Firefox

  • -moz-border-radius-topleft
  • -moz-border-radius-topright
  • -moz-border-radius-bottomleft
  • -moz-border-radius-bottomright

Para Chrome y Safari

  • -webkit-border-top-left-radius
  • -webkit-border-top-right-radius
  • -webkit-border-bottom-left-radius
  • -webkit-border-bottom-right-radius

Visto en CSS3 Info

Anuncios

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: