Desfocando fundos com CSS: evitando desfoque de conteúdo

Fundos desfocados podem melhorar a estética do site e focar a atenção no conteúdo principal. Mas e se o desfoque afetar involuntariamente o próprio conteúdo?

Neste exemplo, é feita uma tentativa de desfocar a imagem de fundo enquanto preserva a clareza do texto de primeiro plano dentro de um elemento span. Para conseguir isso, CSS pode ser empregado estrategicamente.

A técnica principal envolve a utilização da pseudo classe :before para herdar a imagem de fundo. Um novo elemento div com a classe "blur-bgimage" é introduzido e uma pseudo classe :before é adicionada. Este pseudoelemento herda a imagem de fundo usando a propriedade background: inherit.

Em seguida, o pseudoelemento :before é efetivamente desfocado usando filtros CSS. Ao incorporar esses filtros (desfoque (10px) neste caso), a imagem de fundo recebe o efeito de desfoque desejado.

A div ".blur-bgimage" recebe então overflow: hidden para ocultar a área desfocada além os limites do div. Margem, alinhamento de texto e índice z também são definidos adequadamente.

Para alternar o efeito de desfoque, JavaScript pode ser empregado para adicionar ou remover a classe ".blur-bgimage", conforme demonstrado no exemplo jsfiddle fornecido . Usando este método, o efeito de desfoque de fundo pode ser controlado dinamicamente sem comprometer a clareza do conteúdo.