Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Dúvida no exercício do radial-gradient

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 Instrutor
| 1136k xp | 1471 posts
Instrutor

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*/