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.