Articles
Introducción a CSS
Propiedades de CSS relacionadas con la decoración del modelo de caja

Propiedades de CSS relacionadas con la decoración del modelo de caja

Este artículo explica las propiedades de CSS relacionadas con la decoración del modelo de caja.

Puedes aprender cómo escribir propiedades como bordes y sombras.

YouTube Video

HTML para vista previa

css-decoration.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-decoration.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Decoration Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>border</h3>
 23            <section>
 24                <header><h4>border: 3px solid #333</h4></header>
 25                <section class="sample-view">
 26                    <div class="border-solid">Solid Border</div>
 27                </section>
 28                <header><h4>border: 3px dashed #666</h4></header>
 29                <section class="sample-view">
 30                    <div class="border-dashed">Dashed Border</div>
 31                </section>
 32                <header><h4>border: 5px double #999</h4></header>
 33                <section class="sample-view">
 34                    <div class="border-double">Double Border</div>
 35                </section>
 36                <header><h4>border: 2px solid #000; border-radius: 15px;</h4></header>
 37                <section class="sample-view">
 38                    <div class="border-rounded">Rounded Border</div>
 39                </section>
 40            </section>
 41        </article>
 42
 43        <article>
 44            <h3>border-radius</h3>
 45            <section>
 46                <header><h4>border-radius: 20px</h4></header>
 47                <section class="sample-view">
 48                    <div class="border-radius-all-rounded">All corners rounded</div>
 49                </section>
 50                <header><h4>border-top-left-radius: 20px</h4></header>
 51                <section class="sample-view">
 52                    <div class="border-radius-top-left-rounded">Top-left rounded</div>
 53                </section>
 54                <header><h4>border-radius: 50px / 25px</h4></header>
 55                <section class="sample-view">
 56                    <div class="border-radius-ellipse-corners">Ellipse corners</div>
 57                </section>
 58            </section>
 59        </article>
 60
 61        <article>
 62            <h3>outline</h3>
 63            <section>
 64                <h4>Outline Examples</h4>
 65                <header><h4>outline: 2px solid red</h4></header>
 66                <section class="sample-view">
 67                    <div class="outline-solid">Solid Red Outline</div>
 68                </section>
 69                <header><h4>outline: 3px dashed blue</h4></header>
 70                <section class="sample-view">
 71                    <div class="outline-dashed">Dashed Blue Outline</div>
 72                </section>
 73                <header><h4>outline: 4px double green</h4></header>
 74                <section class="sample-view">
 75                    <div class="outline-double">Double Green Outline</div>
 76                </section>
 77                <header><h4>outline: 2px solid purple; outline-offset: 10px;</h4></header>
 78                <section class="sample-view">
 79                    <div class="outline-offset">Outline with Offset</div>
 80                </section>
 81            </section>
 82        </article>
 83
 84        <article>
 85            <h3>box-shadow</h3>
 86            <section>
 87                <h4>Box Shadow Examples</h4>
 88                <header><h4>box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5)</h4></header>
 89                <section class="sample-view">
 90                    <div class="box-shadow-basic-shadow">Basic Shadow</div>
 91                </section>
 92                <header><h4>box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3)</h4></header>
 93                <section class="sample-view">
 94                    <div class="box-shadow-inset-shadow">Inset Shadow</div>
 95                </section>
 96                <header><h4>box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);</h4></header>
 97                <section class="sample-view">
 98                    <div class="box-shadow-multiple-shadow">Multiple Shadows</div>
 99                </section>
100            </section>
101        </article>
102    </main>
103</body>
104</html>

Decoración

Propiedad border 

 1.border-solid, .border-dashed, .border-double, .border-rounded {
 2    background-color: lightsteelblue;
 3}
 4
 5.border-solid {
 6    border: 3px solid #333;
 7}
 8
 9.border-dashed {
10    border: 3px dashed #666;
11}
12
13.border-double {
14    border: 5px double #999;
15}
16
17.border-rounded {
18    border: 2px solid #000;
19    border-radius: 15px;
20}

La propiedad border se usa en CSS para establecer el marco de un elemento. border consta de tres elementos: ancho, estilo y color, y se combinan para establecer el marco del elemento.

Estructura Básica de border 

 1/* Shorthand syntax */
 2border: [border-width] [border-style] [border-color];
 3
 4/* Example of border property */
 5border: 5px solid white;
 6
 7/* Example of individual properties */
 8border-width: 5px;
 9border-style: solid;
10border-color: black;

  • Usa border-width para especificar el grosor del borde. Las unidades se especifican en px, em, %, etc.

  • Especifica el tipo de borde con border-style. Puedes especificar los siguientes valores.

    • Valores de Estilo:
      • none (sin borde)
      • solid (línea continua)
      • dotted (línea de puntos)
      • dashed (línea discontinua)
      • double (línea doble)
      • groove (línea en relieve)
      • ridge (línea con bordes)
      • inset (línea de sombra interior)
      • outset (línea de sombra exterior)

Especifica el color del borde con border-color. El color se puede especificar usando nombres de colores, rgb(), rgba(), hex, etc.

Configuraciones Individuales para Cada Lado 

1.box {
2    border-top: 3px solid red;    /* Top border: 3px solid red */
3    border-right: 5px dashed blue; /* Right border: 5px dashed blue */
4    border-bottom: 2px double green; /* Bottom border: 2px double green */
5    border-left: 1px dotted black;  /* Left border: 1px dotted black */
6}

También puedes establecer diferentes estilos para cada lado, como este.

Configuraciones Individuales para Ancho, Estilo y Color 

 1.box {
 2    /* Specify border width for top, right, bottom, and left */
 3    border-width: 2px 4px 6px 8px;
 4
 5    /* Specify border style for top, right, bottom, and left */
 6    border-style: solid dotted dashed double;
 7
 8    /* Specify border color for top, right, bottom, and left */
 9    border-color: red green blue yellow;
10}

También puedes especificar cada aspecto por separado utilizando border-width, border-style y border-color.

Combinando con border-radius 

1.box-rounded {
2    border: 2px solid #000;
3    border-radius: 10px; /* Round corners by 10px */
4}

Usando la propiedad border-radius, puedes redondear las esquinas del borde.

Propiedad border-radius 

 1.border-radius-all-rounded, .border-radius-top-left-rounded, .border-radius-ellipse-corners {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Round all corners */
 6.border-radius-all-rounded {
 7    border-radius: 20px;
 8}
 9
10/* Round only the top-left corner */
11.border-radius-top-left-rounded {
12    border-top-left-radius: 20px;
13}
14
15/* Elliptical corners */
16.border-radius-ellipse-corners {
17    border-radius: 50px / 25px;
18}

La propiedad border-radius se usa para redondear las esquinas de un elemento. Puedes curvar suavemente las cuatro esquinas de un elemento HTML, transformando rectángulos o cuadrados en un diseño redondeado.

Explicación:

  • La clase border-radius-all-rounded hace que todas las esquinas sean redondeadas con 20 píxeles, resultando en una caja suavemente redondeada.
  • La clase border-radius-top-left-rounded redondea solo la esquina superior izquierda con 20 píxeles, manteniendo las otras esquinas cuadradas.
  • La clase border-radius-ellipse-corners crea esquinas elípticas, resultando en una caja con una forma redondeada alargada horizontalmente.

El formato de la propiedad border-radius 

1border-radius: value;
2border-radius: top-left-and-bottom-right top-right-and-bottom-left;
3border-radius: top-left top-right bottom-right bottom-left;
4border-top-left-radius: value;
5border-top-right-radius: value;
6border-bottom-right-radius: value;
7border-bottom-left-radius: value;
  • El valor de la propiedad border-radius generalmente se especifica en píxeles o porcentajes. Además, puedes establecer de 1 a 4 valores.
    • Especificar un solo valor redondea uniformemente todas las esquinas.
    • Especificar dos valores aplica el primer valor a las esquinas superior izquierda e inferior derecha, y el segundo valor a las esquinas superior derecha e inferior izquierda.
    • Al especificar cuatro valores, puedes definir diferentes radios para cada esquina. Los valores se aplican en el sentido de las agujas del reloj desde la esquina superior izquierda.
  • También puedes especificarlos individualmente como border-top-left-radius.
1border-radius: 50px / 25px;
  • La propiedad border-radius también puede especificar radios verticales y horizontales individualmente para hacer las esquinas elípticas. En este caso, sepáralos con /.
    • Por ejemplo, especificar 50px / 25px hace que el radio horizontal sea de 50 píxeles y el radio vertical de 25 píxeles.

Resumen

  • border-radius es una propiedad para redondear las esquinas de un elemento.
  • Puedes especificar el redondeo de las esquinas en píxeles o porcentajes, aplicarlo a todas las esquinas, a esquinas específicas o hacerlas elípticas.
  • Es útil para diseños flexibles y personalizar interfaces de usuario.

Propiedad outline 

 1.outline-solid, .outline-dashed, .outline-double, .outline-offset {
 2    background-color: lightsteelblue;
 3}
 4
 5.outline-solid {
 6    outline: 2px solid red;
 7}
 8
 9.outline-dashed {
10    outline: 3px dashed blue;
11}
12
13.outline-double {
14    outline: 4px double green;
15}
16
17.outline-offset {
18    outline: 2px solid purple;
19    outline-offset: 10px;
20}

La propiedad outline es una propiedad de CSS para definir la línea que se dibuja alrededor de un elemento.

outline es similar a border, pero difiere en los siguientes puntos:.

  • outline no afecta el modelo de caja del elemento, por lo que no tiene impacto en la disposición del elemento.
  • Como outline se dibuja fuera del elemento, aparece fuera de border.
  • border se dibuja dentro del elemento, por lo que puede afectar el tamaño y la disposición del elemento.

En este ejemplo, la propiedad outline se establece de la siguiente manera:.

  • La clase outline-solid establece un contorno sólido rojo de 2px de grosor.
  • La clase outline-dashed establece un contorno azul discontinuo de 3px.
  • La clase outline-double establece un contorno verde de doble línea de 4px de grosor.
  • La clase outline-offset establece un espacio de 10px entre el contorno y el elemento.

Sintaxis Básica 

1element {
2    outline: outline-width outline-style outline-color;
3    outline-offset: 10px;
4}
outline-width
  • outline-width especifica el grosor del contorno.
  • Puedes especificar valores específicos como thin, medium, thick o en unidades como px, em.
outline-style
  • outline-style especifica el estilo del contorno.
  • Puedes especificar estilos como solid, dotted, dashed, double, groove, ridge, inset, outset, none, etc.
outline-color
  • outline-color especifica el color del contorno.
  • Puedes especificar cualquier color usando nombres, HEX, RGB, etc.
outline-offset
  • outline-offset especifica la distancia entre el contorno y el elemento.
  • Puedes especificar valores exactos en unidades como px, em, etc.

Propiedad box-shadow 

 1.box-shadow-basic-shadow, .box-shadow-inset-shadow, .box-shadow-multiple-shadow {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Basic shadow */
 6.box-shadow-basic-shadow {
 7    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
 8}
 9
10/* Inner shadow */
11.box-shadow-inset-shadow {
12    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
13}
14
15/* Multiple shadows */
16.box-shadow-multiple-shadow {
17    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
18                -5px -5px 10px rgba(255, 0, 0, 0.5);
19}

La propiedad box-shadow se utiliza para añadir sombras a los elementos. Al usar esta propiedad, puedes crear sombras alrededor de los elementos para expresar un sentido de dimensionalidad y profundidad.

Explicación:

  • En la clase box-shadow-basic-shadow, se muestra una sombra negra difuminada en la parte inferior derecha del elemento.

  • En la clase box-shadow-inset-shadow, se muestra una sombra difuminada dentro del elemento. Con la sombra entrando hacia dentro, puedes lograr un diseño hundido.

  • En la clase box-shadow-multiple-shadow, se aplican dos sombras, negra y roja, al elemento. Dado que se muestran en diferentes posiciones, se logra un efecto tridimensional.

Formato de la propiedad box-shadow 

1box-shadow: [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
2box-shadow: inset [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
Significado de cada valor

El primer horizontal offset es el valor del desplazamiento horizontal, especificando la posición de la sombra desde el lado izquierdo del elemento. Especificar un valor positivo coloca la sombra a la derecha, y un valor negativo la coloca a la izquierda.

El segundo vertical offset es el valor del desplazamiento vertical, especificando la posición de la sombra desde la parte superior del elemento. Especificar un valor positivo coloca la sombra debajo, y un valor negativo la coloca arriba.

El tercer blur radius es el valor de la cantidad de difuminado, especificando lo difusa que estará la sombra. Cuanto mayor sea el valor, más se extenderá la sombra, resultando en una sombra más difuminada. Especificar un valor positivo coloca la sombra debajo, y un valor negativo la coloca arriba. Esto es opcional, y el valor predeterminado es 0, lo que significa que no hay difuminado en la sombra.

El cuarto spread radius es el valor del rango de expansión, que especifica cuánto se extiende la sombra. Especificar un valor positivo hará que la sombra crezca, mientras que un valor negativo hará que se reduzca. Este valor también es opcional.

El quinto color es el valor del color, que especifica el color de la sombra. Los colores se pueden configurar utilizando nombres de colores, RGB, HEX, HSL y otros modelos de color disponibles en CSS. Si se omite, se aplica el color de texto predeterminado del elemento (valor de la propiedad color).

También puedes especificar primero la palabra clave inset. Especificar la palabra clave inset dibuja la sombra dentro del elemento en lugar de fuera. También es posible configurar múltiples sombras separadas por comas.

Ejemplo de box-shadow

Ejemplo básico de sombra 
1div {
2    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}
  • El desplazamiento horizontal es de 10px, creando una sombra 10 píxeles a la derecha.
  • El desplazamiento vertical es de 10px, creando una sombra 10 píxeles hacia abajo.
  • El radio de desenfoque es de 5px, resultando en un desenfoque de sombra de 5 píxeles.
  • El color es rgba(0, 0, 0, 0.5), resultando en un negro semitransparente.
Ejemplo de sombra interior 
1div {
2    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}
  • Usar inset dibuja la sombra dentro del elemento.
Ejemplo de sombras múltiples 
1div {
2    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);
3}
  • También puedes configurar múltiples sombras separadas por comas. En este ejemplo, se aplican dos sombras: una negra y una roja.

Resumen

  • box-shadow es una propiedad utilizada para añadir sombras a los elementos y crear una sensación de profundidad.
  • Combinando desplazamientos horizontal y vertical, desenfoque, radio de expansión y color, se pueden lograr una variedad de efectos.
  • Puedes dibujar sombras dentro con inset, y también puedes configurar múltiples sombras a la vez.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Propiedades de CSS relacionadas con el fondoPropiedades CSS relacionadas con listas