Propiedades CSS Esenciales: Box Shadow, Border Radius y Text-Shadow con Ejemplos HTML

Conceptos clave de diseño web con CSS y HTML

Plantilla: Sitios web prediseñados que disponen de una estructura definida, por lo que permiten desarrollar el sitio web de una forma mucho más ágil y rápida que los diseños desde cero.

Box Shadow: Añade efectos de sombra alrededor del marco de un elemento. Se pueden definir múltiples efectos.

box-shadow: 60px -16px teal;

Border Radius: La propiedad CSS permite definir qué tan redondeadas serán las esquinas de una figura.

border-radius: 25px;

Text-Shadow: Agrega sombra al texto. Acepta una lista de sombras separadas por comas, para aplicarlas al texto y a la propiedad text-decoration del elemento.

h1 { text-shadow: 0 0 3px #FF0000; }

Estructura básica de una página HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Ejemplo de HTML">
  <meta name="keywords" content="HTML, Ejemplo">
  <meta name="author" content="Tu Nombre">
  <title>Mi Página HTML</title>
  <link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body bgcolor="#f0f0f0" link="blue" alink="red" vlink="purple" text="black">
  <h1 align="center">Bienvenido a Mi Página</h1>
  <hr>
  <p><b>Este es un párrafo</b> con <u>texto subrayado</u> y <font face="Arial" color="green" size="4">estilo de fuente</font>.</p>
  <a href="https://www.ejemplo.com" target="_blank">Enlace a Ejemplo</a>
  <ul>
    <li>Elemento de lista 1</li>
    <li>Elemento de lista 2</li>
  </ul>
  <ol>
    <li>Elemento numerado 1</li>
    <li>Elemento numerado 2</li>
  </ol>
  <dl>
    <dt>Término 1</dt>
    <dd>Definición 1</dd>
    <dt>Término 2</dt>
    <dd>Definición 2</dd>
  </dl>
  <img src="imagen.jpg" align="left" alt="Imagen de ejemplo" width="300" height="200" border="1">
  <table border="1">
    <tr>
      <th>Encabezado 1</th>
      <th>Encabezado 2</th>
    </tr>
    <tr>
      <td>Contenido 1</td>
      <td>Contenido 2</td>
    </tr>
  </table>
  <div id="miDiv" class="miClase" style="box-shadow: 5px 5px 5px #888888; border-radius: 10px; text-shadow: 2px 2px 2px #000000;">Contenido con estilos en línea</div>
  <script></script>
</body>
</html>