chore(i18n,learn): processed translations (#45583)
This commit is contained in:
camperbot
GitHub
@@ -11,14 +11,14 @@ dashedName: add-a-box-shadow-to-a-card-like-element
|
||||
|
||||
La proprietà `box-shadow` applica una o più ombre ad un elemento.
|
||||
|
||||
La proprietà `box-shadow` è definita dai seguenti valori:
|
||||
La proprietà `box-shadow` prende i seguenti valori, in ordine:
|
||||
|
||||
<ul>
|
||||
<li><code>offset-x</code> (quanto l'ombra si sposta orizzontalmente dall'elemento),</li>
|
||||
<li><code>offset-y</code> (quanto l'ombra si sposta verticalmente dall'elemento),</li>
|
||||
<li><code>blur-radius</code>, cioè quanto è ampia la sfumatura,</li>
|
||||
<li><code>spread-radius</code>, cioè quanto è ampia la base dell'ombra e</li>
|
||||
<li><code>color</code> per definirne il colore, in quest'ordine.</li>
|
||||
<li><code>offset-x</code> (quanto l'ombra si sposta orizzontalmente dall'elemento)</li>
|
||||
<li><code>offset-y</code> (quanto l'ombra si sposta verticalmente dall'elemento)</li>
|
||||
<li><code>blur-radius</code></li>
|
||||
<li><code>spread-radius</code></li>
|
||||
<li><code>color</code></li>
|
||||
</ul>
|
||||
|
||||
I valori `blur-radius` e `spread-radius` sono opzionali.
|
||||
|
||||
@@ -9,9 +9,9 @@ dashedName: adjust-the-hue-of-a-color
|
||||
|
||||
# --description--
|
||||
|
||||
I colori hanno diverse caratteristiche tra cui tonalità, saturazione e luminosità. CSS3 ha introdotto la proprietà `hsl()` (hue, saturation, lightness) come metodo alternativo per scegliere un colore indicando direttamente queste caratteristiche.
|
||||
I colori hanno diverse caratteristiche tra cui tonalità, saturazione e luminosità. CSS3 ha introdotto la funzione `hsl()` (hue-tonalità, saturation-saturazione, lightness-luminosità) come metodo alternativo per scegliere un colore indicando direttamente queste caratteristiche.
|
||||
|
||||
**Tonalità** (Hue) è ciò che la gente generalmente intende come 'colore'. Se si immagina uno spettro di colori che inizia con il rosso a sinistra, passando attraverso il verde nel mezzo, e blu a destra, la tonalità è dove un colore si posiziona lungo questa linea. Con l'`hsl()`, la tonalità utilizza il concetto del cerchio cromatico invece dello spettro, dove l'angolo del colore sul cerchio è indicato come valore compreso tra 0 e 360.
|
||||
**Tonalità** è ciò che la gente generalmente intende come 'colore'. Se si immagina uno spettro di colori che inizia con il rosso a sinistra, passando attraverso il verde nel mezzo, e blu a destra, la tonalità è dove un colore si posiziona lungo questa linea. Con l'`hsl()`, la tonalità utilizza il concetto del cerchio cromatico invece dello spettro, dove l'angolo del colore sul cerchio è indicato come valore compreso tra 0 e 360.
|
||||
|
||||
**Saturazione** è la quantità di grigio in un colore. Un colore completamente saturo non ha grigio in esso, e un colore minimamente saturo è quasi completamente grigio. Questo dato è in percentuale, dove 100% la saturazione completa.
|
||||
|
||||
@@ -23,41 +23,41 @@ Ecco alcuni esempi di utilizzo dell'`hsl()` con colori di luminosità normali co
|
||||
|
||||
# --instructions--
|
||||
|
||||
Cambia il `background-color` di ogni elemento `div` basandoti sui nomi delle classi (`green`, `cyan` o `blue`) utilizzando la proprietà `hsl()`. Tutti e tre dovrebbero avere piena saturazione e luminosità normale.
|
||||
Cambia il `background-color` di ogni elemento `div` basandoti sui nomi delle classi (`green` - verde, `cyan` - ciano o `blue` - blu) utilizzando la proprietà `hsl()`. Tutti e tre dovrebbero avere piena saturazione e luminosità normale.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe utilizzare la proprietà `hsl()` per dichiarare il colore `green`.
|
||||
Il tuo codice dovrebbe usare le funzioni `hsl()` per dichiarare il colore verde.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe utilizzare la proprietà `hsl()` per dichiarare il colore `cyan`.
|
||||
Il tuo codice dovrebbe utilizzare le funzioni `hsl()` per dichiarare il colore ciano.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe utilizzare la proprietà `hsl()` per dichiarare il colore `blue`.
|
||||
Il tuo codice dovrebbe utilizzare le funzioni `hsl()` per dichiarare il colore blu.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
L'elemento `div` con classe `green` dovrebbe avere un `background-color` verde (green).
|
||||
L'elemento `div` con classe `green` dovrebbe avere un `background-color` verde.
|
||||
|
||||
```js
|
||||
assert($('.green').css('background-color') == 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
L'elemento `div` con classe `cyan` dovrebbe avere un `background-color` ciano (cyan).
|
||||
L'elemento `div` con classe `cyan` dovrebbe avere un `background-color` ciano.
|
||||
|
||||
```js
|
||||
assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
L'elemento `div` con classe `blue` dovrebbe avere un `background-color` blu (blu).
|
||||
L'elemento `div` con classe `blue` dovrebbe avere un `background-color` blu.
|
||||
|
||||
```js
|
||||
assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||
|
||||
@@ -15,11 +15,11 @@ Creerai un oggetto rotondo trasparente con un'ombra netta leggermente sfalsata s
|
||||
|
||||
Per creare un oggetto rotondo, la proprietà `border-radius` dovrebbe essere impostata su un valore del 50%.
|
||||
|
||||
Potresti ricordare da una sfida precedente che la proprietà `box-shadow` richiede dei valori per `offset-x`, `offset-y`, `blur-radius`, `spread-radius`, e un valore per il colore, in quest'ordine. I valori `blur-radius` e `spread-radius` sono opzionali.
|
||||
Potresti ricordare da una sfida precedente che la proprietà `box-shadow` richiede dei valori per `offset-x`, `offset-y`, `blur-radius`, `spread-radius`, e un valore per `color`, in quest'ordine. I valori `blur-radius` e `spread-radius` sono opzionali.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Manipola l'elemento quadrato nell'editor per creare la forma della luna. Innanzitutto, cambia il `background-color` con `transparent`, quindi imposta la proprietà `border-radius` al 50% per rendere la forma circolare. Infine, cambia la proprietà `box-shadow` per impostare l'`offset-x` a 25px, l'`offset-y` a 10px, il `blur-radius` a 0, lo `spread-radius` a 0, e il colore a `blue`.
|
||||
Manipola l'elemento quadrato nell'editor per creare la forma della luna. Innanzitutto, cambia il `background-color` con `transparent`, quindi imposta la proprietà `border-radius` al 50% per rendere la forma circolare. Infine, cambia la proprietà `box-shadow` per impostare l'`offset-x` a 25px, l'`offset-y` a 10px, il `blur-radius` a 0, lo `spread-radius` a 0, e `color` a `blue`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -35,7 +35,7 @@ Il valore della proprietà `border-radius` dovrebbe essere impostato a `50%`.
|
||||
assert(code.match(/border-radius:\s*?50%;/gi));
|
||||
```
|
||||
|
||||
I valori della proprietà `box-shadow` dovrebbero essere impostati a 25px per l'`offset-x`, 10px per l'`offset-y`, 0 per il `blur-radius`, 0 per lo `spread-radius`, e infine `blue` per il colore.
|
||||
I valori della proprietà `box-shadow` dovrebbero essere impostati a 25px per l'`offset-x`, 10px per l'`offset-y`, 0 per il `blur-radius`, 0 per lo `spread-radius`, e infine `blue` per `color`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -28,15 +28,15 @@ Affinché gli pseudo-elementi `::before` e `::after` funzionino correttamente, d
|
||||
|
||||
# --instructions--
|
||||
|
||||
Trasforma l'elemento sullo schermo in un cuore. Nel selettore `heart::after`, cambia il `background-color` a `pink` e il `border-radius` a 50%.
|
||||
Trasforma l'elemento sullo schermo in un cuore. Nel selettore `.heart::after`, cambia il `background-color` a `pink` e il `border-radius` a 50%.
|
||||
|
||||
Poi, seleziona l'elemento di classe `heart` (solo `heart`) e riempi la proprietà `transform`. Usa la funzione `rotate()` con un argomento di -45 gradi.
|
||||
|
||||
Infine, nel selettore `heart::before`, imposta la proprietà `content` su una stringa vuota.
|
||||
Infine, nel selettore `.heart::before`, imposta la proprietà `content` su una stringa vuota.
|
||||
|
||||
# --hints--
|
||||
|
||||
La proprietà `background-color` del selettore `heart::after` dovrebbe essere `pink`.
|
||||
La proprietà `background-color` del selettore `.heart::after` dovrebbe essere `pink`.
|
||||
|
||||
```js
|
||||
const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0];
|
||||
@@ -45,7 +45,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Il `border-radius` del selettore `heart::after` dovrebbe essere del 50%.
|
||||
Il `border-radius` del selettore `.heart::after` dovrebbe essere del 50%.
|
||||
|
||||
```js
|
||||
assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
|
||||
@@ -57,7 +57,7 @@ La proprietà `transform` per la classe `heart` dovrebbe utilizzare una funzione
|
||||
assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
|
||||
```
|
||||
|
||||
Il `content` del selettore `heart::before` dovrebbe essere una stringa vuota.
|
||||
Il `content` del selettore `.heart::before` dovrebbe essere una stringa vuota.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
|
||||
|
||||
@@ -11,7 +11,9 @@ dashedName: set-the-font-size-for-multiple-heading-elements
|
||||
|
||||
La proprietà `font-size` è usata per specificare quanto grande è il testo in un dato elemento. Questa regola può essere utilizzata per più elementi per creare coerenza visiva del testo in una pagina. In questa sfida, imposterai i valori per tutti i tag da `h1` a `h6` per bilanciare le dimensioni dell'intestazione.
|
||||
|
||||
# --instructions-- <p>Nel tag <code>style</code>, imposta la dimensione del font (<code>font-size</code>) per:</p>
|
||||
# --instructions--
|
||||
|
||||
<p>Nel tag <code>style</code>, imposta la dimensione del font (<code>font-size</code>) per:</p>
|
||||
|
||||
<ul>
|
||||
<li>Il tag <code>h1</code> a 68px.</li>
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: use-a-bezier-curve-to-move-a-graphic
|
||||
|
||||
Una sfida precedente ha discusso la parola chiave `ease-out` che descrive un cambiamento di animazione che prima accelera e poi rallenta verso la fine dell'animazione. Sulla destra è mostrata la differenza tra la parola chiave `ease-out` (per l'elemento blu) e la parola chiave `linear` (per l'elemento rosso). Una progressione dell'animazione simile alla parola chiave `ease-out` può essere ottenuta utilizzando una curva di Bezier cubica personalizzata.
|
||||
|
||||
In generale, cambiando i punti di ancoraggio `p1` e `p2` otteniamo la creazione di diverse curve di Bezier, che controllano come l'animazione progredisce nel tempo. Ecco un esempio di curva Bezier che usa valori per imitare lo stile ease-out:
|
||||
In generale, cambiando i punti di ancoraggio `p1` e `p2` otteniamo la creazione di diverse curve di Bezier, che controllano come l'animazione progredisce nel tempo. Ecco un esempio di curva di Bezier che usa valori per imitare lo stile `ease-out`:
|
||||
|
||||
```css
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||
|
||||
@@ -47,7 +47,7 @@ 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`.
|
||||
Il primo stop di colore a 40 pixel dovrebbe essere `yellow`.
|
||||
|
||||
```js
|
||||
assert(code.match(/yellow\s+?40px/gi));
|
||||
|
||||
Reference in New Issue
Block a user