3

Como faço em CSS com que três div tenham o background gradiente (degradê) mudando da cor verde para amarela e por fim azul, sendo a primeira de cima para baixo, a segunda da esquerda pra direita e a terceira radial? De preferência um código que seja válido na maioria dos navegadores.

HTML:

<div class='conjunto'>
    <div></div>
    <div></div>
    <div></div>
</div>
5
  • Isso parece pergunta de trabalho de casa :P
    – Sergio
    Commented 8/03/2015 às 22:06
  • Hahaha, é uma dúvida recorrente para paraquedistas do Google :)
    – Paulo
    Commented 8/03/2015 às 22:10
  • E ainda é semi-duplicata pt.stackoverflow.com/questions/32800 :P - falta fazer um com as cores da bandeira de Portugal :)
    – Largato
    Commented 8/03/2015 às 23:33
  • @Bacco eu tinha até buscando antes mas não havia visto essa, sorte que o seu link pede solução em JavaScript :P
    – Paulo
    Commented 9/03/2015 às 0:07
  • 2
    Se bem que a duplicata é considerada mais pelas respostas, mesmo que a pergunta seja um pouco diferente. Mas como a sua é mais completa, acho que dá pra considerar só "semi" duplicata mesmo, principalmente por usar mais cores e formas. (por isso provavelmente nenhum dos visitantes vai querer votar pra fechar :).
    – Largato
    Commented 9/03/2015 às 0:09

2 Respostas 2

6

Aqui fica uma possibilidade:

.conjunto div:nth-child(1) {
  background: -webkit-linear-gradient(green, yellow, blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(green, yellow, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(green, yellow, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(green, yellow, blue); /* Standard syntax */
}
.conjunto div:nth-child(2) {
  background: -webkit-linear-gradient(left, green, yellow, blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, green, yellow, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, green, yellow, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(right, green, yellow, blue); /* Standard syntax */
}
.conjunto div:nth-child(3) {
  background: -webkit-radial-gradient(green, yellow, blue); /* For Safari 5.1 to 6.0 */
  background: -o-radial-gradient(green, yellow, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-radial-gradient(green, yellow, blue); /* For Firefox 3.6 to 15 */
  background: radial-gradient(green, yellow, blue); /* Standard syntax */
}

.conjunto div {
    width: 400px;
    height: 200px;
}

jsFiddle: https://jsfiddle.net/2uogtubn/

Por acaso o w3schools tem uma boa página sobre isto, a MDN também, mas no fundo a sintaxe é:

background: linear-gradient(direcao, cor_1, cor_2, ...);

3

Esta ferramenta (Ultimate CSS Gradient Color Generator) é uma mão na roda na hora de gerar estes degradês. O código que ele gera é compatível com diversos navegadores.

Um exemplo do código gerado com o que você perguntou:

.conjunto div {
  width: 150px;
  height: 100px;
  margin-left: 5px;
  float: left;
}

.conjunto div:nth-child(1) {
    background: #00ff00; /* Old browsers */
    background: -moz-linear-gradient(top,  #00ff00 0%, #ffff00 50%, #0000ff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00ff00), color-stop(50%,#ffff00), color-stop(100%,#0000ff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #00ff00 0%,#ffff00 50%,#0000ff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #00ff00 0%,#ffff00 50%,#0000ff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #00ff00 0%,#ffff00 50%,#0000ff 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #00ff00 0%,#ffff00 50%,#0000ff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#0000ff',GradientType=0 ); /* IE6-9 */;
}

.conjunto div:nth-child(2) {
    background: #0000ff; /* Old browsers */
    background: -moz-linear-gradient(left,  #0000ff 0%, #ffff00 50%, #00ff00 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0000ff), color-stop(50%,#ffff00), color-stop(100%,#00ff00)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #0000ff 0%,#ffff00 50%,#00ff00 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #0000ff 0%,#ffff00 50%,#00ff00 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #0000ff 0%,#ffff00 50%,#00ff00 100%); /* IE10+ */
    background: linear-gradient(to right,  #0000ff 0%,#ffff00 50%,#00ff00 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ff', endColorstr='#00ff00',GradientType=1 ); /* IE6-9 */;
}

.conjunto div:nth-child(3) {
    background: #0000ff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #0000ff 0%, #ffff00 50%, #00ff00 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#0000ff), color-stop(50%,#ffff00), color-stop(100%,#00ff00)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  #0000ff 0%,#ffff00 50%,#00ff00 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  #0000ff 0%,#ffff00 50%,#00ff00 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  #0000ff 0%,#ffff00 50%,#00ff00 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  #0000ff 0%,#ffff00 50%,#00ff00 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ff', endColorstr='#00ff00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */;
}
<div class='conjunto'>
    <div></div>
    <div></div>
    <div></div>
</div>

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 .