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.
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:div.redondeado {
border-radius: 5px;
}
También puedes aplicarle bordes redondeados a cada esquina individualmente utilizando las siguientes propiedades:
border-top-left-radiusborder-top-right-radiusborder-bottom-left-radiusborder-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:div.redondeado {
border-radius: 5px 10px 10px 20px;
}
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:
div.redondeado {
border-radius: 5px 10px 20px;
}
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:
div.redondeado {
border-radius: 5px 10px;
}
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.
Utiliza la propiedad
box-shadow para agregarle sombra a una caja y text-shadow para agregarle sombra al texto.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.
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.
Los gradientes te permiten realizar transiciones entre dos o más colores.
Existen dos tipos de gradientes:
- Lineales
- Radiales
Para crear un gradiente lineal utiliza la función
linear-gradient en la propiedad background o background-image:.gradiente {
background: linear-gradient(red, orange);
}
Por defecto la dirección es de arriba hacia abajo:
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.)
Puedes utilizar más de dos colores en tu gradiente:
.gradiente {
background: linear-gradient(to right, blue, red, yellow, green);
}
Veamos este ejemplo en Codepen:
También puedes cambiar la ubicación donde cambia cada color:
.gradiente {
background: linear-gradient(to right, blue 20%, red 60%, yellow, green);
}
Los gradientes soportan transparencias que se pueden utilizar para crear efectos interesantes. El siguiente gradiente 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));
}
Para crear un gradiente radial utiliza la función
radial-gradient en la propiedad background o background-image:.gradiente {
background: radial-gradient(red, yellow);
}
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:.gradiente {
background: radial-gradient(at 20px 20px, red, yellow);
}
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:
.gradiente {
background: radial-gradient(circle at 20px 20px, red, yellow);
}
Last modified 2mo ago