Nouvel exercice pour ajouter et créer des dégradés CSS. Ci-dessous le résultat à obtenir :

Première étape, construction de la page HTML et de la mise en forme des cases :

Voici le résultat :

Puis, nous avons appliqué les différents dégradés mis en forme avec le CSS :

Dégradé n°1 :

.test:nth-child(1) {
background: linear-gradient(black, #26f);
}

Dégradé n°2 :

.test:nth-child(2) {
background: linear-gradient(90deg, black, #26f);
}

Dégradé n°3 :

.test:nth-child(3) {
background: linear-gradient(0deg, black, #26f);
}

Dégradé n°4 :

.test:nth-child(4) {
background: linear-gradient(45deg, black, #26f);
}

Dégradé n°5 :

.test:nth-child(5) {
background: linear-gradient(to right,
hsl(0, 100%, 50%),
hsl(60, 100%, 50%) 50%,
hsl(120, 100%, 50%) 60%,
hsl(180, 100%, 50%),
hsl(240, 100%, 50%),
hsl(300, 100%, 50%));
}

Dégradé n°6 :

.test:nth-child(6) {
background: linear-gradient(to top right, white 25%,
#26f 25%,
rgb(34, 102, 255) 50%,
#aaa 50%,
#aaa 75%,
blue 75%);
}

Dégradé n°7 :

.test:nth-child(7) {
background: repeating-linear-gradient(45deg, white, white 10px, red 10px, red 20px);
}

Dégradé n°8 :

.test:nth-child(8) {
background: repeating-linear-gradient(45deg, rgba(30, 90, 255, 0.5),
rgba(30, 90, 255, 0.5) 20px,
transparent 20px,
transparent 40px),
repeating-linear-gradient(-45deg, rgba(30, 90, 255, 0.5), rgba(30, 90, 255, 0.5) 20px, transparent 20px, transparent 40px);
}

Dégradé n°9 :

.test:nth-child(9) {
background: radial-gradient(#26f, white) 75px;
}

Dégradé n°10 :

.test:nth-child(10) {
background: radial-gradient(white, #26f) 0 0/50% 50%;
}

Dégradé n°11 :

.test:nth-child(11) {
background: radial-gradient(white 80%, #26f) 0 0/50% 50%;
}

Dégradé n°12 :

.test:nth-child(12) {
background: radial-gradient(white 20%, #26f) 0/50% no-repeat;
}

Dégradé n°13 :

.test:nth-child(13) {
background: linear-gradient(rgba(34, 102, 255, .6), rgba(34, 102, 255, .2)) no-repeat, url(http://placeimg.com/200/200/animals/color/1) center/cover;
}

Dégradé n°14 :

.test:nth-child(14) {
background: radial-gradient(rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 70%) no-repeat, url(http://placeimg.com/200/200/animals/color/2) center/cover;
}

Dégradé n°15 :

.test:nth-child(15) {
background: repeating-radial-gradient(white 0%, white 8%, black 10%, black 18%, white 20%);
}

Dégradé n°16 :

.test:nth-child(16) {
background: repeating-radial-gradient(white 0%, white 8%, black 10%, black 18%, white 20%) 40%/40%;
}

Dégradé n°17 :

.test:nth-child(17) {
background: linear-gradient(45deg, white 49%, #26f 50%) 0 0/ 20% 20%;
}

Dégradé n°18 :

.test:nth-child(18) {
background: linear-gradient(45deg, white 75%, #26f 75%) 0 0/ 20% 20%;
}

Dégradé n°19 :

.test:nth-child(19) {
background: linear-gradient(-45deg, #26f 25%, transparent 26%, transparent 74%, #26f 75%) 0 0/ 15% 20%, linear-gradient(45deg, #26f 25%, transparent 26%, transparent 74%, #26f 75%) 0 0/ 15% 20%;
}

Dégradé n°20 :

.test:nth-child(20) {
background: linear-gradient(-45deg, #000 25%, transparent 26%, transparent 74%, #000 75%) 0 0/ 15% 20%, linear-gradient(45deg, #000 25%, #26f 26%, #26f 74%, #000 75%) 0 0/ 15% 20%;
}