CSSBlog ES - /* El mejor recurso para enriquecer tu estilo */

CSS3 permite muchas más opciones de personalización de imágenes ya incluidas en CSS, usando la propiedad border-radius, sin necesidad de crear el efecto de dicha imagen en Photoshop, lo que facilita y nos ahorra trabajo, a la vez que la web carga mejor (ya que no existen imágenes).

Podemos ver la diferencia del potencial de CSS2 con el de CSS3 tomando como ejemplo, como crear bordes redondeados:

En CSS2:

En CSS2 no queda más remedio que utilizar imágenes de fondo para poder crear los bordes, o usar Javascript. El código CSS para los bordes quedaría así:

.curved-box
{
margin: 10px;
width: 298px;
background-color: #c3d0d4;
}

.curved-box h2
{
background: #c3d0d4 url(curva-top.png) no-repeat left top;
color: #f4fbfd;
padding: 10px 15px 5px 15px;
}

.curved-box p
{
background: #c3d0d4 url(curva_bottom.png) no-repeat left bottom;
margin: 0px;
padding: 5px 15px 10px 15px;
text-align: left;
}

El código HTML sería este:

<div class="curved-box">

<p>Mi texto</p>
</div>

Si nos fijamos, se usa la propiedad background para definir el fondo de la imagen, ahora veamos la diferencia con CSS3:

En CSS3:

El código CSS:

.curved-box-css3
{
width: 298px;
margin: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: #c3d0d4;
}

.curved-box-css3 h2
{
padding: 10px 15px 5px 15px;
color: #f4fbfd;
}

.curved-box-css3 p
{
margin: 0px;
padding: 5px 15px 10px 15px;
}

Se puede observar que se utiliza la propiedad border-radius para definir los bordes, con un color de fondo (#c3d0d4). Esta es la diferencia que tiene con CSS2, nada de imágenes, más ligero.

El código HTML sería este:

<div class="curved-box-css3">

<p>Mi texto</p>

</div>

Pero vamos, lo que queremos mostrar es la diferencia entre usar CSS2 y usar CSS3, principalmente la ventaja que supone usar CSS3, ya que sin usar imágenes, logramos lo mismo de una forma más simple.

Podemos ver un ejemplo de su funcionamiento.