Menu
Coddy logo textTech
EMPEZAR A APRENDER
flag Es iconEspañoldown icon

Imagen Hero desenfocada

Parte de la sección CSS Mastery del Journey de HTML de Coddy — lección 43 de 43.

challenge icon

Desafío

Fácil

Hay una imagen de la ciudad de Nueva York en la sección .gallery.
Tu tarea es aplicar un filtro de desenfoque con un valor de 2px a la misma usando CSS.

Pruébalo tú mismo

<html>
<head>
  <title>Blurred Hero Image</title>
  <style> 
    /* Add your CSS styles here: */
    img {
    width: 100%;
    }
  </style>
</head>
<body>
    <div class="gallery">
        <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/View_of_Empire_State_Building_from_Rockefeller_Center_New_York_City_dllu.jpg
">
    </div>
</body>
</html>

Todas las lecciones de CSS Mastery

1Dominio de selectores – Combinación

IntroducciónSelector de descendienteSelector de hijoSelector de hermano adyacenteSelector de hermano generalDesafío de repaso

4Proyecto de menú desplegable

Añadir el submenúMostrar el submenúMás estilosInput y botón

7Construye con CSS Grid

Conceptos básicos de GridPosicionamiento de elementos en Grid-rowÁreas con nombreDesafío de repaso

2Pseudoclases interactivas

PseudoclasesEfectos de hoverEfectos de focusEstilos de estado activoDesafío de repaso

5Efectos visuales

DegradadosFiltros CSSTransformacionesTransiciones y efectos hoverDesafío de repaso

8Sitio web de Flavor Fiesta

Configuración del gridEncabezadoLa parte principalPie de página

3Pseudoclases estructurales

Pseudoclases estructuralesSeleccionando el primer hijoSeleccionando el último hijoEl poder de los patrones: Usando nth-childDesafío de repaso

6Landing Page

Dar estilo a la sección del encabezadoDar estilo al botónDiseño de la secciónDiseño de tarjetasAñadir los toques finales

9Desafíos finales

Resaltar menú activoFilas de tabla tipo cebraEfecto hover en botonesDiseño de tarjetas en GridImagen Hero desenfocada