Categorias: CSS

Tags: Efeitos

Parallax com sobreposição

Escrito por Amanda de Lavra

19 de agosto de 2021

Uma cliente queria um fundo colorido e claro com efeito parallax, mas as cores escuras para o texto ficavam ruins e com o texto em branco dificultava a leitura. Pensei em colocar uma sobreposição para escurecer um pouco o fundo, mas descobri que não existe esta opção no Divi. Achei em um site (https://astucesdivi.com/en/degrade-image-parallaxe/) uma maneira simples de fazer isso e reproduzo aqui.

Inicialmente é preciso colocar a imagem como plano de fundo (sem clicar na opção de efeito parallax), selecionar um fundo gradiente para a seção. Eu selecionei duas variações de transparência da mesma cor (1ª cor: rgba(51,51,51,0.4); 2ª cor: rgba(51,51,51,0.3)) e depois ativar title background image. Feito isso, é só ir seção, aba Avançado > Customize CSS > Elemento Principal e incluir o seguinte código:

background-attachment: fixed;

E então está feito, a imagem ficou mais escura e pude usar o texto na cor branca!

Posts relacionados

Customizações da página de login e painel administrativo do WordPress

Customizações da página de login e painel administrativo do WordPress

Para todo o site que eu faço, personalizo a página de login e também o wp-admin para ficar com a marca do cliente. Recentemente, aperfeiçoei o código para que o login ficasse no meio da página, tanto verticalmente quanto horizontalmente. Segue código usado aqui neste...

Botão Leia Mais no Elementor

Botão Leia Mais no Elementor

O site do cliente tinham alguns textos que eram muito extensos e, num layout de coluna, variavam muito de tamanho. Decidi adaptar o que já havia feito no Divi, ao incluir um botão Leia Mais (https://blog.amandadelavra.com.br/modulo-texto-com-botao-leia-mais/), mas...

Como manter a proporção de um elemento com CSS

Como manter a proporção de um elemento com CSS

Me pediram para colocar um elemento flutuante no site com o preço de cada produto. Como os preços variam de acordo com o produto, eu não podia ajustar com padding apenas para que ficasse redondinho na proporção 1:1. Para isso, usei a propriedade do CSS aspect-ratio....