Publicidad
Publicidad

Curso Completo de CSS de principiante a avanzado - CURSO de CSS - 75 ¿Como DIFUMINAR o DESENFOCAR una IMAGEN en CSS?

Miniatura del vídeo

Clase: Cómo aplicar efectos de desenfoque y difuminado en imágenes con CSS

Aprende a usar la propiedad filter de CSS y la función blur para desenfocar o difuminar imágenes de forma sencilla. Mejora el diseño visual de tus sitios web hoy.

En esta lección del curso, se explora el uso de herramientas de estilo CSS para manipular la apariencia de los elementos visuales. A través de la propiedad filter, es posible aplicar efectos de desenfoque (blur) a cualquier imagen, permitiendo un control preciso sobre la intensidad del efecto mediante diferentes unidades de medida como píxeles o rem.

Puntos Clave de la Lección

  • Uso de la propiedad filter: Para aplicar efectos visuales, se utiliza la propiedad CSS 'filter' aplicada directamente al elemento de imagen deseado. [00:00:16]
  • Implementación de la función blur: La función 'blur' permite generar el desenfoque, recibiendo como argumento la intensidad del efecto expresada en píxeles. [00:00:21]
  • Control de la intensidad: Al aumentar el valor numérico en píxeles, el nivel de desenfoque se intensifica; un valor de cero mantiene la imagen original sin alteraciones. [00:01:04]
  • Uso de unidades relativas (REM): Además de píxeles, se pueden emplear unidades REM, las cuales se calculan en base al tamaño de fuente definido en la raíz del documento. [00:01:38]

Productos útiles para este curso

Para llevar a cabo estas prácticas de diseño, se recomienda contar con un entorno de desarrollo web configurado y un navegador actualizado para visualizar los cambios en tiempo real.

Resumen Final

El manejo de efectos visuales como el desenfoque es fundamental para crear interfaces modernas y atractivas. La combinación de la propiedad filter y la función blur ofrece una manera eficiente y flexible de transformar imágenes, permitiendo ajustar su nitidez mediante valores en píxeles o unidades relativas como rem, adaptándose a las necesidades de diseño del proyecto.

Créditos del Autor

Esta lección ha sido adaptada del contenido original creado por el canal, especializado en desarrollo web y programación frontend. Se recomienda visitar su canal oficial de YouTube para profundizar en estos contenidos.

75. CURSO de CSS - 75 ¿Como DIFUMINAR o DESENFOCAR una IMAGEN en CSS?

Contenido

Guarda tu progreso

Presiona Ctrl + D para favoritos.

Ver otros cursos