⏱️ Duración estimada: 2 horas

Sesión 07 - CSS: border-radius, box-shadow y height

Contenidos de la Sesión

1. Repaso de Estilos y Selectores CSS

En esta sesión repasamos las propiedades de CSS vistas en sesiones anteriores, especialmente las relacionadas con el Box Model:

• margin: Espacio externo que separa el elemento de otros elementos
• border: Línea visible que rodea el padding y el contenido

Ejemplo de repaso:

.caja {
  width: 200px;
  height: 200px;
  background-color: salmon;

  /* Margin */
  margin-inline: 10px;

  /* Border shorthand: ancho estilo color */
  border: 10px solid green;
}

2. border-radius - Esquinas Redondeadas

La propiedad border-radius permite redondear las esquinas de un elemento, creando formas que van desde ligeramente redondeadas hasta círculos perfectos.

Sintaxis:

selector {
  border-radius: valor;
}

Propiedades individuales por esquina

.caja {
  border-top-left-radius: 10px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 100px;
  border-bottom-left-radius: 5px;
}

Propiedad shorthand border-radius

/* Un valor: todas las esquinas iguales */
.caja {
  border-radius: 10px;
}

/* Dos valores: top-left & bottom-right | top-right & bottom-left */
.caja {
  border-radius: 10px 30px;
}

/* Cuatro valores: top-left | top-right | bottom-right | bottom-left */
.caja {
  border-radius: 150px 25px 100px 10px;
}

Casos prácticos

Crear un Círculo

Para crear un círculo perfecto, el elemento debe ser cuadrado y tener border-radius: 50% o border-radius: 100%.

.circle {
  width: 200px;
  height: 200px;
  background-color: blue;
  border-radius: 100%; /* o 50% */
}

Crear una Píldora (Pill)

Una píldora se consigue con un elemento rectangular y un border-radius igual a la mitad de su altura.

.pill {
  width: 200px;
  height: 100px;
  background-color: red;
  border-radius: 50px; /* = height / 2 */
}

Crear un Triángulo

Con border podemos crear triángulos sin usar imágenes:

.triangle {
  width: 0;
  height: 0;
  background-color: transparent;
  border: 100px solid transparent;
  border-top: 0 solid transparent;
  border-bottom: 170px solid red;
}

Cómo funciona:

Al hacer el elemento 0×0 y darle bordes grandes de color transparente, y solo uno de los bordes con color visible, obtenemos un triángulo.

Formas creativas

Combinando diferentes valores de border-radius podemos obtener formas orgánicas:

.forma-organica {
  width: 200px;
  height: 200px;
  background-color: violet;
  border: 10px solid aqua;
  border-radius: 150px 25px 100px 10px;
}

Ejemplo completo (de los ejemplos de la sesión):

<div class="figure circle"></div>
<div class="figure pill"></div>
<div class="figure engendro"></div>

.figure {
  height: 200px;
  width: 200px;
  background-color: red;
  display: inline-block;
  border: 10px solid green;
  margin-inline: 10px;
}

.circle {
  background-color: blue;
  border-radius: 100%;
}

.pill {
  height: 100px;
  border-radius: 50px;
}

.engendro {
  background-color: violet;
  border-color: aqua;
  border-radius: 150px 25px 100px 10px;
}

3. box-shadow - Sombras de Caja

La propiedad box-shadow añade una o más sombras a un elemento.

Sintaxis:

selector {
  box-shadow: offset-x offset-y blur spread color;
}

Parámetros:

Ejemplos básicos

/* Sombra simple */
.caja {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

/* Sin desplazamiento: sombra difuminada alrededor */
.caja {
  box-shadow: 0px 0px 15px black;
}

/* Sombra interior (inset) */
.caja {
  box-shadow: 0px 0px 10px 0px black inset;
}

Múltiples sombras

Se pueden añadir múltiples sombras separadas por comas:

.caja {
  box-shadow:
    10px 10px 10px -10px rgb(128, 5, 243),
    -10px -10px 10px -10px rgb(49, 192, 27),
    -3px 3px 3px 0px rgb(231, 143, 19),
    0px 0px 10px 0px black inset;
}

Las sombras se renderizan de arriba a abajo en el código: la primera declarada queda por encima.

Sombra exterior vs. sombra interior (inset)

/* Sombra exterior (por defecto): la sombra sale fuera del elemento */
.exterior {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

/* Sombra interior: la sombra se proyecta dentro del elemento */
.interior {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5) inset;
}

Casos de uso comunes

/* Efecto de tarjeta elevada */
.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Efecto hover elevado */
.card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Botón con efecto 3D */
.boton {
  box-shadow: 0 4px 0 #1a56db;
}

.boton:active {
  box-shadow: none;
  transform: translateY(4px);
}

/* Glow (efecto de brillo) */
.glow {
  box-shadow: 0 0 20px rgba(66, 135, 245, 0.8);
}

4. height: 100vh vs height: 100% vs height: 100dvh

Esta es una de las confusiones más comunes en CSS. Entender cuándo usar cada unidad es clave para construir layouts de pantalla completa.

height: 100%

100% es relativo al elemento padre. Para que funcione, todos los ancestros deben tener altura definida.

Ejemplo — el problema:

/* ❌ Esto NO funciona porque el padre no tiene altura definida */
section {
  height: 100%; /* 100% de nada = 0 */
}

Ejemplo — la solución correcta con %:

/* ✅ Para que 100% funcione, todos los padres deben tener altura */
html {
  height: 100%;
}

body {
  height: 100%;
}

main {
  height: 100%;
}

section {
  height: 100%; /* Ahora sí = 100% del main = 100% del body = 100% del html */
}

height: 100vh

100vh equivale al 100% del alto del viewport (la ventana del navegador), independientemente del padre.

/* ✅ Esto SÍ ocupa toda la pantalla sin necesidad de definir altura en los padres */
section {
  height: 100vh;
}

¿Cuándo usarlo?

• Secciones hero (splash) de pantalla completa
• Páginas de presentación que ocupan toda la ventana
• Sidebars o paneles laterales fijos

height: 100dvh (Dynamic Viewport Height)

100dvh es una unidad moderna que resuelve un problema específico en móviles: en algunos navegadores móviles (como Chrome en Android o Safari en iOS), la barra de dirección se muestra y oculta al hacer scroll, cambiando el alto visible de la pantalla.

/* Moderno y recomendado para pantallas completas en móvil */
section {
  height: 100dvh;
}

Ejemplo práctico del ejemplo de la sesión:

Aquí puedes ver el ejemplo práctico trabajado en esta sesión.

section {
  height: 100dvh;
  background-image: url("https://placecats.com/600/600");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

<main>
  <section>
    <h1>splash</h1>
  </section>
  <section class="lados">
    <h2>sección 2</h2>
  </section>
  <section>
    <h2>sección 3</h2>
  </section>
</main>

5. cursor - Control del Cursor del Ratón

La propiedad cursor permite cambiar el aspecto del cursor del ratón cuando el usuario pasa por encima de un elemento.

Sintaxis:

selector {
  cursor: tipo-de-cursor;
}

Valores más comunes

Ejemplos básicos

/* El cursor de mano en botones y enlaces */
button,
a {
  cursor: pointer;
}

/* Indica que algo no está disponible */
.deshabilitado {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Para elementos arrastrables */
.arrastrable {
  cursor: grab;
}

.arrastrable:active {
  cursor: grabbing;
}

Cursor personalizado con imagen

Podemos usar cualquier imagen como cursor personalizado.

Sintaxis:

selector {
  cursor:
    url("ruta/imagen.png") hotspot-x hotspot-y,
    fallback;
}

• ruta/imagen.png: Ruta a la imagen del cursor (se recomienda PNG o SVG)
• hotspot-x y hotspot-y: Coordenadas del punto activo del cursor (en píxeles)
• fallback: Cursor estándar a usar si la imagen no carga

/* Cursor personalizado con imagen SVG */
.seccion-especial {
  cursor:
    url("./ufo.svg") 10 10,
    pointer;
}

Ejemplo práctico del ejemplo de la sesión:

section.lados {
  background-color: salmon;
  cursor:
    url("./ufo.svg") 10 10,
    pointer;
}

Resumen

En esta sesión hemos aprendido:

• ✅ Repaso del Box Model: margin y border
• ✅ border-radius para redondear esquinas:
  • Propiedades individuales por esquina
  • Shorthand con 1, 2 o 4 valores
  • Crear círculos (border-radius: 50%)
  • Crear píldoras (half of height)
  • Formas orgánicas con valores distintos por esquina
• ✅ box-shadow para añadir sombras:
  • Sintaxis: offset-x offset-y blur spread color
  • Sombra exterior vs. interior (inset)
  • Múltiples sombras con comas
• ✅ Diferencia entre height: 100vh y height: 100%:
  • 100% es relativo al padre (requiere que todos los ancestros tengan altura)
  • 100vh es relativo al viewport (ventana del navegador)
  • 100dvh es la versión moderna y dinámica recomendada para móviles
• ✅ cursor para cambiar el cursor del ratón:
  • Valores predefinidos: pointer, grab, not-allowed, etc.
  • Cursores personalizados con imágenes

Lo más importante:

Recursos Adicionales

border-radius

• MDN - border-radius
• CSS border-radius Generator - Generador visual de formas con border-radius
• CSS Tricks - border-radius

box-shadow

• MDN - box-shadow
• Box Shadow CSS Generator - Generador visual de sombras
• CSS Tricks - box-shadow
• Smooth Shadow Generator - Generador de sombras suaves con múltiples capas

height y viewport units

• MDN - height
• MDN - Viewport-percentage lengths (dvh, svh, lvh)
• CSS Tricks - The Large, Small, and Dynamic Viewport Units

cursor

• MDN - cursor
• CSS Tricks - cursor