3.1 KiB
id | title | challengeType | videoUrl | forumTopicId | dashedName |
---|---|---|---|---|---|
587d78a5367417b2b2512ad7 | Usare un gradiente lineare CSS per creare un elemento a strisce | 0 | https://scrimba.com/c/c6bmQh2 | 301072 | use-a-css-linear-gradient-to-create-a-striped-element |
--description--
La funzione repeating-linear-gradient()
è molto simile a linear-gradient()
con la differenza che ripete il motivo del gradiente specificato. repeating-linear-gradient()
accetta una varietà di valori, ma per semplicità in questa sfida lavorerai solo con l'angolo e il punto finale del colore.
Il valore dell'angolo è la direzione del gradiente. Gli stop di colore sono come valori di larghezza che segnano dove avviene una transizione, e sono assegnati con una percentuale o un numero di pixel.
Nell'esempio mostrato nell'editor di codice, il gradiente inizia con un colore yellow
a 0 pixel che si fonde nel secondo colore blue
a 40 pixel di distanza dall'inizio. Dal momento che il prossimo stop di colore è anch'esso a 40 pixel, il gradiente cambia immediatamente al terzo colore green
, che a sua volta si fonde nel quarto colore red
quando è lontano 80 pixel dall'inizio del gradiente.
Per questo esempio, aiuta pensare gli stop di colore a coppie, dove due colori si fondono insieme.
0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px
Se ogni due valori di stop abbiamo lo stesso colore, la miscelazione non è evidente perché è tra lo stesso colore, seguito da una transizione repentina verso il colore successivo, e questo produce le strisce.
--instructions--
Crea le strisce cambiando il repeating-linear-gradient()
per usare un angolo di gradiente di 45deg
, quindi imposta i primi due color stop a yellow
, e infine i secondi due color stop a black
.
--hints--
L'angolo del repeating-linear-gradient()
dovrebbe essere di 45 gradi.
assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi));
L'angolo del repeating-linear-gradient()
dovrebbe essere di 90 gradi
assert(!code.match(/90deg/gi));
La fermata del colore a 0 pixel dovrebbe essere yellow
.
assert(code.match(/yellow\s+?0(px)?/gi));
Il primo stop di colore a 40 pixel dovrebbe essere yellow
.
assert(code.match(/yellow\s+?40px/gi));
Il secondo color stop a 40 pixel dovrebbe essere black
.
assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi));
L'ultimo color stop a 80 pixel dovrebbe essere black
.
assert(code.match(/black\s+?80px/gi));
--seed--
--seed-contents--
<style>
div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50 auto;
background: repeating-linear-gradient(
90deg,
yellow 0px,
blue 40px,
green 40px,
red 80px
);
}
</style>
<div></div>
--solutions--
<style>
div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50 auto;
background: repeating-linear-gradient(
45deg,
yellow 0px,
yellow 40px,
black 40px,
black 80px
);
}
</style>
<div></div>