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 DesfocadaPratique por conta própria: Playground de Web