Curso de HTML5 y CSS3: Bordes y sombras

¿Qué son los bordes en CSS3?

Los bordes son líneas que rodean un elemento HTML, aportando contorno y definición a este. En CSS3, existen varias propiedades que nos permiten personalizar los bordes, incluyendo:

border-style: Define el estilo del borde (sólido, punteado, doble, etc.).
border-width: Indica el grosor del borde.
border-color: Establece el color del borde.

Ejemplo de bordes

A continuación, mostramos un ejemplo de cómo aplicar bordes a un elemento div:


<div class="mi-borde">
    Este es un div con borde.
</div>

Y el CSS correspondiente sería:


.mi-borde {
    border-style: solid;
    border-width: 2px;
    border-color: #3498db; /* Color azul */
    padding: 10px;
    margin: 20px;
}

Propiedades adicionales para bordes

Además de las propiedades básicas, CSS3 introduce la propiedad border-radius, que permite crear bordes redondeados. Este efecto puede utilizarse para dar un toque moderno a cualquier diseño.

Ejemplo:


.mi-borde-redondeado {
    border: 2px solid #3498db;
    border-radius: 15px; /* bordes redondeados */
}

Introducción a las sombras en CSS3

Las sombras son una técnica que añade profundidad y dimensión a los elementos de una página. En CSS3, podemos aplicar sombras tanto a los textos como a los elementos en sí. Existen dos propiedades clave para las sombras:

box-shadow: Añade sombra a los elementos rectangular.
text-shadow: Aplicable solo a textos, añade sombras detrás del texto.

Ejemplo de box-shadow

Para ilustrar cómo utilizar box-shadow, veamos el siguiente ejemplo:


.mi-caja-con-sombra {
    width: 300px;
    height: 200px;
    background-color: #ecf0f1; /* Color de fondo */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* Sombra */
}

Ejemplo de text-shadow

Para aplicar una sombra a un texto, usamos la propiedad text-shadow. Aquí un ejemplo:


.mensaje {
    font-size: 24px;
    color: #2c3e50; /* Color del texto */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Sombra del texto */
}

Combinando bordes y sombras

Combinar bordes y sombras puede dar resultados muy atractivos, creando una jerarquía visual en los elementos de la página. Por ejemplo, al aplicar ambos efectos a un elemento div, tenemos:


.mi-elemento {
    border: 2px solid #3498db;
    border-radius: 15px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    padding: 20px;
}

Práctica recomendada

Al utilizar bordes y sombras, es importante no abusar de estos efectos. Un diseño sobrecargado puede resultar confuso y poco profesional. Se sugiere:

Usar bordes sutiles y colores que armonicen con la paleta de la web.
Aplicar sombras con moderación para no distraer al usuario del contenido principal.
Probar diferentes estilos y verificar su legibilidad en dispositivos móviles.

Conclusión

El uso de bordes y sombras en HTML5 y CSS3 es fundamental para mejorar la estética y la usabilidad de un sitio web. Estas propiedades ofrecen una gran flexibilidad para personalizar la apariencia de los elementos, haciendo que nuestros proyectos sean más atractivos. Recuerda siempre mantener el equilibrio en el diseño y priorizar la claridad en la presentación de la información.

blog.vermiip.es