Curso CSS Módulo 7

 

Módulo 7: Multimedia en CSS

En este módulo aprenderás cómo usar CSS para mejorar la presentación de imágenes, videos y audios en tu sitio web. Trabajaremos con ajustes de tamaño, bordes, sombras y efectos visuales que harán que tu contenido multimedia luzca atractivo y profesional.

• ✔️ Cómo controlar el tamaño y proporción de las imágenes.
• ✔️ Cómo aplicar efectos como bordes redondeados y sombras.
• ✔️ Cómo estilizar videos y audios con CSS.
• ✔️ Cómo hacer que las imágenes sean responsivas (adaptables a distintos dispositivos).

---

🖼️ Ajuste básico de imágenes

Con CSS puedes cambiar el tamaño de una imagen y hacer que se adapte a diferentes pantallas. Usar max-width al 100% evita que la imagen se “rompa” en pantallas pequeñas.

img { max-width: 100%; height: auto; display: block; margin: auto; }

✅ Así la imagen siempre se adapta al contenedor sin distorsionarse.

---

🎨 Bordes redondeados y sombras

Con unas pocas líneas de CSS puedes darle un aspecto más moderno a tus imágenes.

img { border-radius: 15px; box-shadow: 0px 4px 10px rgba(0,0,0,0.3); }

✅ Ahora la imagen tiene bordes suaves y una sombra que la hace resaltar.

---

📹 Estilizando videos

Los videos también pueden tener bordes redondeados, sombras o adaptarse a diferentes pantallas con CSS.

video { max-width: 100%; border-radius: 10px; box-shadow: 0px 4px 10px rgba(0,0,0,0.3); }

✅ Tu video se verá bien en computadoras, tablets y móviles.

---

🎵 Personalizando elementos de audio

Aunque el control de audio depende del navegador, puedes ajustar su tamaño y margen para integrarlo mejor con el diseño.

audio { width: 100%; margin-top: 10px; }

✅ El reproductor de audio ocupa todo el ancho del contenedor.

---

✨ Ejemplo completo de multimedia con CSS

.media-container { text-align: center; padding: 20px; } .media-container img, .media-container video { max-width: 90%; border-radius: 10px; box-shadow: 0px 4px 10px rgba(0,0,0,0.3); }

✅ Así puedes crear una sección multimedia limpia y atractiva.

---

📥 Preguntas de repaso

Pregunta 1

¿Qué propiedad CSS hace que una imagen se ajuste al ancho del contenedor sin deformarse?

• A) width: auto;
• B) max-width: 100%;
• C) height: fixed;
• D) flex: 1;

✅ Respuesta correcta: B) max-width: 100%;

---

Pregunta 2

¿Qué efecto genera la propiedad box-shadow en una imagen?

• A) Redondea las esquinas
• B) Añade una sombra
• C) Hace la imagen responsiva
• D) Cambia la resolución

✅ Respuesta correcta: B) Añade una sombra

---

Pregunta 3

¿Cuál de estos elementos HTML puede recibir estilos CSS para hacerse responsivo?

• A) Solo imágenes
• B) Solo videos
• C) Imágenes, videos y audios
• D) Ninguno de los anteriores

✅ Respuesta correcta: C) Imágenes, videos y audios

---

Este módulo forma parte del curso básico de CSS. En el siguiente módulo aprenderás las mejores prácticas de CSS para escribir código limpio, optimizado y fácil de mantener.