Degradê (posição das cores) HTML5 CSS3, vídeo 53

Vemos 8 modos diferentes de posicionar as cores em um degradê utilizando HTML5 e CSS3. O mais importante quando se cria um gradiente é saber onde estarão posicionadas as cores que você citar no código e, esse vídeo mostra a primeira parte disso.

Código fonte HTML:

<!DOCTYPE html>

<html>
<head>
    <link rel="stylesheet" href="gedra.css">
</head>
<body>
    <section class="degraum">
    </section>
    <section class="degradois">
    </section>
    <section class="degratres">
    </section>
    <section class="degraquatro">
    </section>
    <section class="degracinco">
    </section>
    <section class="degraseis">
    </section>
    <section class="degrasete">
    </section>
    <section class="degraoito">
    </section>
</body>
</html>

Código fonte CSS:

.degraum, .degradois, .degratres, .degraquatro, .degracinco, .degraseis, .degrasete, .degraoito {
    height: 50px;
    width: 700px;
    margin: 10px;
}
.degraum {
    background: linear-gradient(to right, red 0%, blue 100%);
}
.degradois {
    background: linear-gradient(to left, red 0%, blue 100%);
}
.degratres {
    background: linear-gradient(to top, red 0%, blue 100%);
}
.degraquatro {
    background: linear-gradient(to bottom, red 0%, blue 100%);
}
.degracinco {
    background: linear-gradient(to top left, red 0%, blue 100%);
}
.degraseis {
    background: linear-gradient(to top right, red 0%, blue 100%);
}
.degrasete {
    background: linear-gradient(to bottom left, red 0%, blue 100%);
}
.degraoito {
    background: linear-gradient(to bottom right, red 0%, blue 100%);
}

Vídeo:

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.