• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 2/6/20

Bordes y sombreado

Log in or subscribe for free to enjoy all this course has to offer!

Nuevo capítulo, nuevo conjunto de propiedades CSS. Vamos a ver los bordes y los efectos de sombreado que se pueden aplicar, tanto en el texto como en los bloques.

En particular, vamos a volver a usar nuestro conocimiento de los colores para elegir el color de nuestros bordes y sombreados.

¿Preparado para sorprenderte de nuevo?

Bordes estándar

CSS te ofrece una amplia selección de bordes para decorar tu página. Muchas propiedades CSS te permiten cambiar la apariencia de tus bordes:border-width,border-color,border-style

Intento usar directamente la superpropiedadborderque incluye todas estas propiedades. ¿Recuerdas la superpropiedadbackground? Funciona con el mismo principio: vamos a poder combinar varios valores.

Para elborde, puedes usar hasta tres valores para cambiar la apariencia del borde:

  • La anchura: especifica la anchura de tu borde. Introduce un valor en píxeles (como2px).

  • El color: es el color de tu borde. Como hemos aprendido, usa un nombre de color (negro,rojo, etc.) o un valor hexadecimal ( #FF0000) o un valor RGB ( rgb(198, 212, 37)).

El tipo de borde: hay varias opiniones disponibles. Tu borde puede ser una única línea sólida, una línea de puntos o una línea discontinua. Aquí están los valores disponibles: none: sin borde (por defecto); solid: una sola línea sólida; dotted: una línea de puntos; dashed: una línea discontinua; double: con doble borde; groove: una línea estriada; ridge: una línea con crestas; inset: inset global efecto 3D; outset: outset global efecto 3D.

  • El tipo de borde: hay varias opiniones disponibles. Tu borde puede ser una única línea sólida, una línea de puntos o una línea discontinua. Aquí están los valores disponibles:

    • none: sin borde (por defecto);

    • solid: una sola línea sólida;

    • dotted: una línea de puntos;

    • dashed: una línea discontinua;

    • double: con doble borde;

    • groove: una línea estriada;

    • ridge: una línea con crestas;

    • inset: inset global efecto 3D;

    • outset: outset global efecto 3D.

Para obtener un borde azul, una línea discontinua de 3 píxeles de grueso introduciré:

h1
{
    border: 3px blue dashed;
}

La siguiente figura muestra los diferentes estilos de bordes que puedes usar.

Varios estilos de borde
Varios estilos de borde

En la parte superior, a la derecha, a la izquierda, en la parte inferior...

¿Quién dijo que tenías que aplicar el mismo borde a los cuatro lados de tu elemento?
Nada, si quieres poner bordes diferentes dependiendo del lado (arriba, abajo, derecha o izquierda), puedes hacerlo sin problema. En este caso, tienes que usar estas cuatro propiedades:

  • border-top: borde superior;

  • border-bottom: borde inferior;

  • border-left: borde izquierdo;

  • border-right: borde derecho;

Son también superpropiedades que funcionan comoborder, pero se aplica a un solo lado.

Para añadir un borde a la izquierda o derecha de los párrafos, solo tenemos que introducir:

p
{
    border-left: 2px solid black;
    border-right: 2px solid black;
}

Bordes redondeados

Los bordes redondeados son un poco como los webmasters del Holy Grain que han estado esperando desde el milenio anterior (o eso parece). ¡Desde la llegada de CSS3, ahora es posible crearlos fácilmente!

La propiedadborder-radiusnos permitirá fácilmente redondear las esquinas de cualquier elemento. Simplemente especifica el tamaño («importancia») del radio en píxeles:

p
{
    border-radius: 10px;
}

El radio se ve especialmente si el elemento tiene bordes, como se muestra en la figura siguiente.

Bordes redondeados
Bordes redondeados

... o si tiene un color de fondo, como en la figura siguiente.

Un fondo con esquinas redondeadas
Un fondo con esquinas redondeadas

También puedes especificar la forma del radio de cada esquina. En este caso, especifica cuatro valores:

p
{
    border-radius: 10px 5px 10px 5px;
}

Los valores corresponden a las siguientes esquinas en el orden indicado:

  1. superior izquierda;

  2. superior derecha;

  3. inferior derecha;

  4. inferior izquierda;

Finalmente, puedes definir la redondez de tus esquinas creando curvas elípticas como en la siguiente figura En este caso, tienes que especificar dos valores separados por un carácter / ( barra oblicua). Para ver el efecto, lo mejor es probarlo:

p
{
    border-radius: 20px / 10px;
}
Bordes redondeados elípticos
Bordes redondeados elípticos

¿Quién dijo que tenías que aplicar el mismo borde a los cuatro lados de tu elemento?
Nada, si quieres poner bordes diferentes dependiendo del lado (arriba, abajo, derecha o izquierda), puedes hacerlo sin problema. En este caso, tienes que usar estas cuatro propiedades:

  • border-top: borde superior;

  • border-bottom: borde inferior;

  • border-left: borde izquierdo;

  • border-right: borde derecho;

Son también superpropiedades que funcionan comoborder, pero se aplica a un solo lado.

Para añadir un borde a la izquierda o derecha de los párrafos, solo tenemos que introducir:

p
{
    border-left: 2px solid black;
    border-right: 2px solid black;
}

Sombreado

Las sombras se incluyen en las últimas innovaciones ofrecidas por CSS3. ¡Ahora sólo necesitas una única línea de CSS para añadir sombras a tu página!

Aquí vamos a conocer dos tipos de sombras:

  • sombras de caja;

  • sombras de texto;

box-shadow: sombras de caja

La propiedadbox-shadowse aplica a todo el bloque y tiene cuatro valores en el siguiente orden:

  1. el offset horizontal de la sombra;

  2. el offset vertical de la sombra;

  3. la bajada de tono;

  4. el color de la sombra.

Por ejemplo, para un negro, sombra de 6 píxeles, sin bajada de tono, introduciríamos:

p
{
    box-shadow: 6px 6px 0px black;
}

El resultado que esto tendría se muestra en la siguiente figura (añadí un borde al párrafo para mostrar mejor el efecto).

Sombra bajo el párrafo
Sombra bajo el párrafo

Bajemos el tono de la sombra usando el tercer ajuste (siguiente figura). La bajada de tono puede ser ligera (menos que el offset), normal (igual al offset) o fuerte (mayor que el offset). Vamos a probar un offset normal:

p
{
    box-shadow: 6px 6px 6px black;
}
Una sombra redondeada bajo el párrafo
Una sombra redondeada bajo el párrafo

También puedes añadir un cuarto valor opcional:inset. En este caso, la sombra estará situada dentro del bloque, para dar un efecto de inset:

p
{
    box-shadow: 6px 6px 6px black inset;
}

Te dejo probarlo para que veas el resultado.

text-shadow: sombra del texto

Context-shadow, puedes añadir una sombra directamente a los letras de tu texto. Los valores trabajan exactamente de la misma manera que labox-shadow: offset, bajada de tono y color.

p
{
    text-shadow: 2px 2px 4px black;
}

El resultado se muestra en la figura siguiente.

Texto con sombra
Texto con sombra

En resumen

  • Puedes aplicar un borde a un elemento usando la propiedadborderTienes que especificar la anchura del borde, el color, y el tipo (línea sólida, de puntos, etc.).

  • Puedes redondear los bordes usandoborder-radius.

  • Puedes añadir una sombra a los bloques de texto usandobox-shadow. Tienes que especificar la sombra vertical y horizontal, su tono y su color.

  • Al texto también se le pude dar una sombra usandotext-shadow.

Example of certificate of achievement
Example of certificate of achievement