Imagem Hero Desfocada
Parte da seção CSS Mastery do Journey de HTML da Coddy — lição 43 de 43.
Desafio
FácilHá uma imagem da cidade de Nova York na seção .gallery.
Sua tarefa é aplicar um filtro de desfoque com um valor de 2px a ela usando CSS.
Experimente você mesmo
<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 as lições de CSS Mastery
1Domínio de Seletores – Combinação
IntroduçãoSeletor de DescendenteSeletor de FilhoSeletor de Irmão AdjacenteSeletor de Irmão GeralDesafio de Recapitulação7Construa com CSS Grid
Fundamentos do GridPosicionamento de Itens com Grid-rowÁreas NomeadasDesafio de Revisão2Pseudo-classes Interativas
Pseudo-classesEfeitos de HoverEfeitos de FocoEstilos AtivosDesafio de Recapitulação3Pseudo-classes estruturais
Pseudo-classes estruturaisSelecionando o primeiro filhoSelecionando o último filhoO poder dos padrões: Usando nth-childDesafio de recapitulação6Landing Page
Estilizar a seção do cabeçalhoEstilizar o botãoLayout da seçãoLayout de cardAdicionar toques finais9Desafios Finais
Destacar Menu AtivoLinhas de Tabela ZebradasEfeito Hover em BotõesLayout de Cards em GridImagem Hero Desfocada