Dúvida no exercício do radial-gradient | HTML5 e CSS3 II: Turbinando as suas páginas

Solucionado (ver solução)

Solucionado
(ver solução)

1
resposta

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Gradientes e atividade Gradientes radiais

por ROGER RUIZ DA SILVA

| 369k xp | 178 posts

Olá, no exercício https://cursos.alura.com.br/course/avancando-html-css/task/6161, tive dúvidas. Poderiam me ajudar?

background-image: radial-gradient(circle at bottom right,
    yellow,
    yellow 20%,
    black 20%,
    black 30%,
    yellow 30%,
    yellow);

1) Retirando o primeiro e o último yellow, o resultado foi o mesmo. Por quê?

2) A porcentagem indica o ponto de partida da cor?

1 resposta

solução!

por Felipe Moreno Borges

| 1130.9k xp | 1471 posts

Instrutor Desenvolvedor Android/iOS

06/02/2019

Roger, bom dia!

O primeiro ele indica que o circulo deve começar com a cor amarela e terminar com a cor amarela, sendo assim o efeito não fica degradê e sim algo constante.

Ela indica o ponto de inicio, porém nesse caso em específico foi usado para resaltar o fim

background-image: radial-gradient(circle at bottom right,
    yellow,//inicio amarelo
    yellow 20%,//ele poderia iniciar com outra cor, mas escolheu a mesma cor para dar sensação de continuidade
    black 20%,
    black 30%,
    yellow 30%,
    yellow);

/*O mesmo se repete para  black e o yellow de novo*/