Curso IT Fundamentos CSS 024_Bordes, Contorno, Sombras

Bordes

Los bordes (Borders) en CSS son propiedades de estilo importantes utilizadas para crear límites visuales alrededor de los elementos.

Propiedades de borde

• border-width: Establece el ancho del borde.
• border-style: Establece el estilo del borde (solid: línea continua, dotted: línea punteada, dashed: línea discontinua, double: línea doble, groove: ranura, ridge: relieve, inset: hundido, outset: sobresaliente, none: sin borde).
• border-color: Establece el color del borde.

Ejemplo:

1
    .example1 {
2
        border-width: 2px;
3
        border-style: solid;
4
        border-color: #333;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example2 {
9
        border: 2px solid #333;
10
        /* Propiedad abreviada */
11
        width: 200px;
12
        height: 200px;
13
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

Efecto:

Dirección del borde

border-top, border-right, border-bottom, border-left: Establecen respectivamente el borde superior, derecho, inferior e izquierdo.

Ejemplo:

1
    .example1 {
2
        border-top: 2px solid #333;
3
        border-right: 1px dashed #555;
4
        border-bottom: 3px solid #777;
5
        border-left: 1px dotted #999;
6
        width: 200px;
7
        height: 200px;
8
    }

1
    <div class="example1"></div>

Efecto:

Bordes redondeados

border-radius: Establece los bordes redondeados del borde.

Ejemplo:

1
    .example1 {
2
        border-radius: 10px;
3
        /* Todas las esquinas tienen un radio de 10px */
4
        border: 1px solid black;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example2 {
9
        border-top-left-radius: 10px;
10
        border-top-right-radius: 20px;
11
        border-bottom-left-radius: 30px;
12
        border-bottom-right-radius: 40px;
13
        border: 1px solid black;
14
        width: 200px;
15
        height: 200px;
16
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

Efecto:

Sombras

La sombra (box-shadow) en CSS es una propiedad que crea efectos de sombra alrededor de los elementos. Las sombras se pueden usar para mejorar la sensación tridimensional de los elementos, haciendo que la página se vea más viva. Agregando la palabra clave inset antes del valor de box-shadow, se pueden crear sombras internas. Se pueden agregar múltiples efectos de sombra separando varios valores de box-shadow con comas. Si un elemento tiene bordes redondeados, la sombra se aplicará correspondientemente en las esquinas redondeadas.

Las sombras pueden tener múltiples parámetros, incluyendo desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, color de la sombra, etc.

• Desplazamiento horizontal (horizontal offset): El desplazamiento horizontal de la sombra.
• Desplazamiento vertical (vertical offset): El desplazamiento vertical de la sombra.
• Radio de desenfoque (blur radius): El grado de desenfoque de la sombra.
• Radio de expansión (spread radius): El tamaño de la sombra, valores positivos la amplían, valores negativos la reducen.
• Color de la sombra: El color de la sombra.

Ejemplo:

1
    .base {
2
        border: 1px solid black;
3
        width: 200px;
4
        height: 200px;
5
    }
6
    .example1 {
7
        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
8
    }
9
    .example2 {
10
        box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3);
11
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>

Efecto:

Contorno

El contorno (outline) en CSS es un borde visible que se puede agregar alrededor de los elementos, generalmente utilizado para resaltar el borde exterior de los elementos. Los contornos no afectan el diseño y no cambian el tamaño ni la posición del elemento. Los contornos se utilizan comúnmente para la visualización del foco en elementos de formulario, el estado activo de los enlaces, etc.

• outline-color: Establece el color del contorno.
• outline-style: Establece el estilo del contorno.
• outline-width: Establece el ancho del contorno.
• outline-offset: Establece el desplazamiento del contorno, el espacio entre el contorno y el borde.

Ejemplo:

1
    .example1 {
2
        outline-color: blue;
3
        outline-style: dotted;
4
        outline-width: 2px;
5
        outline-offset: 5px;
6
        border: 1px solid red;
7
        width: 200px;
8
        height: 200px;
9
    }
10
    .example2 {
11
        outline: 2px solid green;
12
        border: 1px solid red;
13
        width: 200px;
14
        height: 200px;
15
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

Efecto: