background-image: radial-gradient(ellipse at left bottom, rgba(60, 29, 61, 0.8), rgba(60, 29, 61, 0.8) 65%, black 65%, black 70%, transparent 70%, transparent);
Não consegui entender a distribuição desse gradiente. Gostaria de saber passo a passo o que acontece nessa linha css.
Oi Cintia,
Basicamente voce esta criando um gradiente radial, que é o redondo igual no Photoshop.
Gradiente esse do tipo elipse (poderia ser circulo) no canto inferior direito do elemento.
Agora as cores...
Começa com um roxinho semi-transparente (repare que foi usado o RGBA, justamente para passar transparencia, o canal alpha).
Na segunda linha tem o mesmo roxo, e a % especifica até onde ele vai.
Na terceira linha ele quer um corte seco no gradiente, ou seja, sem aquela transicao de uma cor pra outra. Para isso basta colocarmos exatamente a mesma % de onde acabou a cor anterior! Olha esse exemplo que fiz aqui só que com menos cores.
E assim vai até chegar no transparent, que é justamente para parecer uma bolinha no canto do elemento.
Deixar um desafio para voce. Cria um Jsbin e tenta fazer a bandeira da França usando esse conhecimento da aula sobre gradiente. É a mesma ideia, mas com outras cores e outra direção.
Espero ter ajudado e bons estudos,
Abcs!
Muito Obrigado Natan, também estava com esta dúvida.
Fiz a bandeira da frança: =D http://jsbin.com/yanayoradu/edit?html,css,output
Boa, Lucas!
Tente depois fazer outros desenhos.
Bandeira do Japao, um smile, etc.
Abcs!
Tem uma ferramenta bem bacana e popular que vc pode usar para entender como funciona os tipos de gradiente e também criar seus próprios gradientes:
http://www.colorzilla.com/gradient-editor/
:)