3.0 KiB

Raw Blame History

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));

Un color stop 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>

3.0 KiB Raw Blame History