Bordes sombras y gradientes con CSS

En este articulo te voy a explicar, de forma rápida y simple, algunas características para aplicar a cajas y textos, los bordes, sombras y gradientes con CSS.

En los comienzos de la web, se utilizaban trucos para lograr estos mismos efectos mediante imágenes pero desde la llegada de CSS tenemos una forma más fácil y estándar de hacerlo.

Bordes redondeados

Veamos primero un ejemplo de como aplicar bordes redondeados a un contenedor. En este caso se trata de un DIV con la clase .redondeado (consulta el HTML y CSS en la pestaña respectiva):

Para crear bordes redondeados a cualquier contenedor, se utiliza la propiedad border-radius. Esta propiedad recibe un valor (puede ser en pixeles, rems, etc.) que determina el radio de las esquinas del objeto.

Por ejemplo, para aplicar un borde redondeado con radio de 5px a un div con clase .redondeado utilizarías la siguiente regla:

div.redondeado {
  border-radius: 5px;
}

También puedes aplicarle bordes redondeados a cada esquina individualmente utilizando las siguientes propiedades:

Cuatro valores – border-radius: 15px 50px 30px 5px; (el primer valor aplica a la esquina superior izquierda, el segundo valor es la esquina superior derecha, el tercero corresponde a la esquina inferior derecha y el cuarto y ultimo es para el borde inferior izquierdo):

Tres valores – border-radius: 15px 50px 30px; (el primer valor se aplica a la esquina superior-izquierda, el segundo valor es para las esquinas superior-derecha e inferior-izquierda, y el ultimo valor es para la punta inferior-derecha):

Dos valores – border-radius: 15px 50px; (el primer numero se aplica a las esquinas superior-izquierda y a la inferior-derecha, y el segundo corresponde a las esquinas superior-derecha e inferior-izquierda):

Un solo valor – border-radius: 15px; el valor indicado se aplica a las cuatro esquinas del objeto:

La definición completa de la propiedad border-radius puede encontrarse aquí.

Sombras usando CSS

Existen dos propiedades de que podemos utilizar para agregar sombras a un objeto mediante CSS. Utiliza la propiedad box-shadow para agregarle sombra a una caja y la propiedad text-shadow para agregarle sombras al texto.

Como aplicarle sombra a una caja o DIV:

Mediante la propiedad box-shadow podemos aplicar una o mas sombras a una caja. Por ejemplo, si vemos el ejemplo anterior, donde tenemos un DIV con borde color verde y queremos aplicar una sombra a dos de sus lados, tendremos que aplicar la clase .sombras como te comparto en este ejemplo:

La propiedad box-shadow de CSS recibe los siguientes valores separados por un 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 o Blur (opcional) – el radio de difuminación, entre mayor el número más borrosa va a ser la sombra. Si no se indica este valor, la sombra será de color pleno.
• 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) – En caso de no indicar ningún color, por defecto se utiliza el color de la fuente.

La definición completa de la propiedad box-shadow puede encontrarse aquí.

Como aplicarle sombra a un texto:

En el mismo ejemplo anterior, dejé una sombra color rojo aplicada sobre el titulo (H2). Para agregarle una sombra al texto se utiliza la propiedad text-shadow.

La propiedad text-shadow recibe los siguientes 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 o Blur (opcional) – el radio de difuminación, entre mayor el número, más borrosa la sombra. Si no se indica este valor, la sombra será de color pleno.
• Color (opcional) – En caso de no indicar ningún color, por defecto utiliza el color de la fuente.

La definición completa de la propiedad text-shadow puede encontrarse aquí.

Gradientes con CSS

Los gradientes o degradados te permiten realizar transiciones entre dos o más colores determinados. Y en CSS existen tres tipos de gradientes diferentes:

• Gradiente Lineales (pueden ir hacia abajo/arriba/izquierda/derecha/diagonal)
• Gradientes Radiales (definidos desde el centro)
• Gradientes Conicos (rotado alrededor de un punto central)

Para crear un degradado lineal hay que definir al menos dos colores. Estos colores serán los extremos entre los cuales deseamos crear las transiciones. También se puede establecer un punto de inicio y una dirección (o un ángulo) junto con el efecto de degradado.

Para crear un gradiente lineal utiliza la función linear-gradient en la propiedad background o background-image:

#grad {
  background-image: linear-gradient(red, yellow);
}

Utilizando este ejemplo, se mostrará un gradiente que va del color rojo hasta el amarillo. Como no se indicó una dirección, se asume la dirección por defecto, que es de arriba hacia abajo. El resultado final seria algo así:

Dirección​

Para cambiar la dirección puedes pasarle un primer argumento a la propiedad 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​

Para hacer esto mas entretenido, se pueden utilizar más de dos colores en tu gradiente:

.gradiente {
  background: linear-gradient(to right, blue, red, yellow, green);
}

Otra opción muy interesante, es indicar mediante un porcentaje, en que punto del degradado cambiara cada uno de los colores:

.gradiente {
  background: linear-gradient(to right, blue 20%, red 60%, yellow, green);
}

Transparencias​

Los gradientes también soportan las transparencias, que se pueden utilizar para crear efectos muy interesantes.

Para añadir transparencia, utilizamos la función rgba() para definir los topes de color. El último parámetro de la función rgba() puede ser un valor que va de 0 a 1, y define la transparencia del color: el 0 indica transparencia total, 1 indica color total (sin transparencia).

El siguiente degradado inicia completamente transparente y termina en un rojo total:

.gradiente {
  background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}

La definición completa de la propiedades para aplicar gradientes o degradados puede encontrarse aquí.

De esta forma se pueden aplicar muchos efectos a las cajas o Divs, como también al texto utilizando unas pocas propiedades de CSS y sin tener que recurrir a complejos trucos usando imágenes. Espero que estos consejos para aplicar bordes sombras y gradientes con CSS, te resulten de utilidad y puedas seguir explorando sus funcionalidades.

Si te gustó o te entretuvo el contenido de este posteo, haciendo un click en los avisos me ayudas a mantener el sitio con vida y a seguir publicando.

Y si quieres ganar algo de dinero sin esfuerzo, registrate en Honeygain desde este banner y recibí 5 dolares de regalo al comenzar a usar la aplicación para generar ingresos pasivos.

Acá puedes conocer más sobre ingresos pasivos, que es y como funciona HoneyGain.