Saltar al contenido principal
Codigo Heroe
Tarea anterior
Kekstagram: el comienzo. Filtros CSS8/12
A la lista de tareas
  1. 1. Brillo y contraste: brightness y contrast
  2. 2. Escala de grises y sepia: grayscale y sepia
  3. 3. Inversión y saturación: invert y saturate
  4. 4. Rotación del tono: hue-rotate
  5. 5. Desenfoque y opacidad: blur y opacity
  6. 6. Sombras con drop-shadow
  7. 7. Diferencias entre box-shadow y drop-shadow
  8. 8. Aplicar filtros CSS al texto
  9. 9. Combinar filtros
  10. 10. Combinar filtros drop-shadow
  11. 11. Animar filtros CSS
  12. 12. Transiciones y filtros CSS
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Aplicar filtros CSS al texto

Los filtros pueden aplicarse tanto a imágenes como a otros elementos HTML. Probemos los filtros de sombra y desenfoque en los textos que acompañan las fotografías.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Aplicar filtros CSS al texto</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <div class="image text"> <img src="img/spb-2.jpg" alt=""> <p>Iglesia del Salvador</p> </div> <div class="compare text"> <div class="compare-left blur"> <div class="image"> <img src="img/spb-1.jpg" alt=""> <p>Catedral de San Isaac</p> </div> </div> <div class="compare-right shadow"> <div class="image"> <img src="img/spb-5.jpg" alt=""> <p>Catedral de la Trinidad</p> </div> </div> </div> </body> </html>
CSS
.blur p { } .shadow p { }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. Aplica al párrafo del bloque .blur el filtro de desenfoque con el valor 2px.
    2. Aplica al párrafo del bloque .shadow el filtro de sombra con el valor 2px 2px 2px black.
    Codigo Heroe

    © 2023-2026, codigoheroe.com