1

Até onde sei, o css não suporta transição de backgrounds com gradient, mas suporta transição de cores "chapadas", por exemplo (background-color:#fff)

Como este efeito foi aplicado aqui, então? https://stripe.com/

Consegui reproduzir o efeito colocando uma das cores do gradient transparente, e um background de uma cor apenas atrás, transicionado assim a cor do background de trás, mas o efeito não é o mesmo.

Tentei entender usando as ferramentas de desenvolvedor, sem sucesso.

1 Resposta 1

1

Pois, como dizes, fazer transition com gradient não é possivel ainda com CSS.

Nesse site o que eles têm são divs diferentes para cada background, todas com

header.hero div.backgrounds>div {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: none;
    opacity: 0;

e depois com classes de CSS ativam uma a uma fazendo transition da opacity.

Aqui podes ver as divs todas: https://jsfiddle.net/7nv4dxym/

Aqui podes ver elas a mudarem: https://jsfiddle.net/cLaxoz7t/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .