Bordes, sombras y gradientes
En este capítulo vamos a explorar algunas de las nuevas características de CSS3 como bordes redondeados, sombras para cajas y textos, y gradientes.
Antes se utilizaban trucos para lograr el mismo efecto con imágenes pero ahora con CSS3 tenemos una forma más fácil y estándar de hacerlo.

Bordes redondeados

Veamos primero un ejemplo de bordes redondeados (consulta el HTML y CSS en la pestaña respectiva):
Para crear bordes redondeados utiliza la propiedad border-radius.
border-radius recibe un tamaño (puede ser en pixeles, rems, etc.) como valor.
Por ejemplo, para aplicar un borde redondeado con radio de 5px a un div con clase redondeado utilizarías la siguiente regla:
1
div.redondeado {
2
border-radius: 5px;
3
}
Copied!
También puedes aplicarle bordes redondeados a cada esquina individualmente utilizando las siguientes propiedades:
    border-top-left-radius
    border-top-right-radius
    border-bottom-left-radius
    border-bottom-left-radius
Sin embargo, también existen atajos que puedes utilizar con border-radius. Por ejemplo, puedes definir el tamaño de cada esquina separando los valores por espacio:
1
div.redondeado {
2
border-radius: 5px 10px 10px 20px;
3
}
Copied!
El primer valor aplica a la esquina superior izquierda, el segundo a la superior derecha, el tercero a la inferior izquierda y el cuarto a la inferior derecha.
Cuando los valores de la esquina superior derecha e inferior izquierda son iguales podemos utilizar otro atajo:
1
div.redondeado {
2
border-radius: 5px 10px 20px;
3
}
Copied!
El primer valor aplica a la esquina superior izquierda, el segundo a la superior derecha e inferior izquierda, y el tercero a la inferior derecha.
Si la esquina superior izquierda y la inferior derecha tuvieran el mismo valor (p.e. 5px) podríamos utilizar otro atajo:
1
div.redondeado {
2
border-radius: 5px 10px;
3
}
Copied!
El primer valor aplica a la esquina superior izquierda y a la inferior derecha. El segundo valor a la superior derecha y a la inferior izquierda.

Sombras

Utiliza la propiedad box-shadow para agregarle sombra a una caja y text-shadow para agregarle sombra al texto.

Sombra de caja

Veamos primero un ejemplo (consulta el HTML y CSS en la pestaña respectiva):
Para agregarle sombra a una caja utiliza la propiedad box-shadow.
box-shadow recibe los siguientes valores separados por espacio:
    Posición horizontal (requerido) - un valor positivo ubica la sombra a la derecha de la caja mientras que uno negativo la ubica a la izquierda.
    Posición vertical (requerido) - un valor positivo ubica la sombra debajo de la caja mientras que uno negativo la ubica encima de la caja.
    Difuminación (opcional) - el radio de difuminación, entre mayor el número más borrosa va a ser la sombra.
    Propagación (opcional) - el radio de propagación, un valor positivo incrementa el tamaño de la sombra mientras que uno negativo reduce el tamaño de la sombra.
    Color (opcional) - por defecto utiliza el color de la fuente.

Sombra de texto

Veamos primero un ejemplo (consulta el HTML y CSS en la pestaña respectiva):
Para agregarle sombra al texto utiliza la propiedad text-shadow.
text-shadow recibe los siguentes valores separados por espacio:
    Posición horizontal (requerido) - un valor positivo ubica la sombra a la derecha del texto, uno negativo a la izquierda.
    Posición vertical (requerido) - un valor positivo ubica la sombra debajo del texto, uno negativo encima.
    Difuminación (opcional) - el radio de difuminación, entre mayor el número, más borrosa la sombra.
    Color (opcional) - por defecto utiliza el color de la fuente.

Gradientes

Los gradientes te permiten realizar transiciones entre dos o más colores.
Existen dos tipos de gradientes:
    Lineales
    Radiales

Gradientes lineales

Para crear un gradiente lineal utiliza la función linear-gradient en la propiedad background o background-image:
1
.gradiente {
2
background: linear-gradient(red, orange);
3
}
Copied!
Por defecto la dirección es de arriba hacia abajo:

Dirección

Para cambiar la dirección puedes pasarle un primer argumento a linear-gradient. Los posibles valores son:
    to bottom - hacia abajo (el valor por defecto).
    to top - hacia arriba.
    to right - hacia la derecha.
    to left - hacia la izquierda.
    to top left - hacia la esquina superior izquierda.
    to top right - hacia la esquina superior derecha.
    to bottom left - hacia la esquina inferior izquierda.
    to bottom right - hacia la esquina inferior derecha.
    Un ángulo (p.e. 90deg, -45deg, etc.)

Múltiples colores

Puedes utilizar más de dos colores en tu gradiente:
1
.gradiente {
2
background: linear-gradient(to right, blue, red, yellow, green);
3
}
Copied!
Veamos este ejemplo en Codepen:
También puedes cambiar la ubicación donde cambia cada color:
1
.gradiente {
2
background: linear-gradient(to right, blue 20%, red 60%, yellow, green);
3
}
Copied!

Transparencias

Los gradientes soportan transparencias que se pueden utilizar para crear efectos interesantes. El siguiente gradiente inicia completamente transparente y termina en un rojo total:
1
.gradiente {
2
background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
3
}
Copied!

Gradientes radiales

Para crear un gradiente radial utiliza la función radial-gradient en la propiedad background o background-image:
1
.gradiente {
2
background: radial-gradient(red, yellow);
3
}
Copied!
Por defecto el gradiente inicia en el centro de la caja y tiene forma de elipse:
Si quieres cambiar el centro del gradiente puedes pasarle un primer argumento a radial-gradient:
1
.gradiente {
2
background: radial-gradient(at 20px 20px, red, yellow);
3
}
Copied!
Veamos este ejemplo en Codepen:
Además de posiciones exactas puedes utilizar top, right, bottom, left, top right, etc.
También puedes cambiar la forma del gradiente a un círculo de la siguiente forma:
1
.gradiente {
2
background: radial-gradient(circle at 20px 20px, red, yellow);
3
}
Copied!
Last modified 3yr ago