Módulos de bordes y sombras en CSS3

CSS

Una de las ventajas que aporta CSS3 son los módulos de bordes y sombras. Antes de su implementación, para poder tener bordes redondeados o que un div tuviera sombra era preciso emplear imágenes y CSS. Hoy en día basta con poner un par de valores y obtener los mismos o mejores resultados que antes.

Prefijos de fabricante

Antes de hablar y bordes y sombras es preciso hacer un pequeño inciso en los prefijos de fabricante. Esto se debe a que antes era preciso usarlos para propiedades como estas. En los navegadores con versiones más modernas no es obligatorio usarlo pero puede darse el caso de que alguna propiedad de CSS3 necesite implementarlo, sobre todo si son navegadores de versiones anteriores.

Estos son los prefijos usados con sus respectivos navegadores:

  • -webkit- (Chrome, Safari, versiones actuales Opera, la mayoría de navegadores iOS.
  • -moz- (Firefox).
  • -o- (versiones antiguas de Opera).
  • -ms- (Internet Explorer y Microsoft Edge).

Seguramente estarás pensando que poner los prefijos muchas reglas en CSS es un verdadero suplicio. Por suerte hay herramientas que nos facilitan el trabajo como es el caso de autoprefixer que se encargará de poner los prefijos necesarios al código CSS que le pasemos.

La propiedad border-radius

Con esta propiedad puedes dar un borde redondeado a los elementos de CSS. Funciona de manera similar al border, si introduces sólo un valor se aplicará el radio a las 4 esquinas.

CSS
1
2
3
4
5
6
div{
   border-radius:15px;
   background-color:#39F;
   width:200px;
   height:100px
}

bordes y sombras en CSS3 - border-radius

Ejemplo border-radius

Y de meter 2 aplicará un radio a una pareja de esquinas y otro a la otra pareja y así hasta introducir los 4 valores. En esta ocasión aplicaré los respectivos prefijos

CSS
1
2
3
4
5
6
div{
   border-radius:5px 20px;
   background-color:#39F;
   width:200px;
   height:100px
}

 

bordes y sombras en CSS3 - border-radius2

Border-radius con 2 valores

Propiedad box-shadow y text-shadow

Permiten aplicar sombra a las cajas y texto respectivamente. Los posibles valores para una propiedad de sombra son:

  • Posición de sombra horizontal.  (obligatorio)
  • Posición sombra vertical.  (obligatorio)
  • Blur o difusión. Cuanto más alto sea más difuminada será la sombra.
  • Cuanto se expande la sombra o «bleed». (No se usa en text-shadow)
  • Color de al sombra.

Por ejemplo, voy a mostrar un div con sombras en todos los lados. Para que las sombras sean iguales en los 4 lados es preciso que las posiciones de sombras estén a 0.

CSS
1
2
3
4
5
6
div {
background-color: #03F;
width: 200px;
height: 100px;
box-shadow: 0px 0px 15px 5px grey;
}

bordes y sombras en CSS3 - box-shadow

Ejemplo box-shadow

Esto no quiere decir que sólo se aplique a los div, recordad que en CSS todo son cajas de manera que podrías aplicarlo a otros elementos.

Un ejemplo con text-shadow

CSS
1
2
3
p{
    text-shadow: 5px 5px 10px green;
}

bordes_y_sombras en_CSS3-text-shadow

Resultado con text-shadow

Y hasta aquí bordes y sombras en CSS3, espero que os hayan gustado y podáis sacarles partido. A seguir picando 🙂