chore(i18n,curriculum): update translations (#42487)
* chore(i18n,curriculum): update translations * chore: Italian to italian Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com>
This commit is contained in:
camperbot
GitHub
@ -0,0 +1,46 @@
|
||||
---
|
||||
id: 587d774c367417b2b2512a9c
|
||||
title: Aggiungere un testo alternativo alle immagini per renderle accessibili agli ipovedenti
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp7VfD'
|
||||
forumTopicId: 16628
|
||||
dashedName: add-a-text-alternative-to-images-for-visually-impaired-accessibility
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Probabilmente hai già avuto modo di vedere un attributo `alt` in un `img` tag in altre sfide. Il testo `alt` descrive il contenuto dell'immagine e fornisce un'alternativa testuale per essa. Un attributo `alt` aiuta nei casi in cui l'immagine non riesce ad essere caricata o non può essere vista da un utente. Anche i motori di ricerca lo usano per comprendere qual è il contenuto di un'immagine per poi includerla nei risultati di ricerca. Ecco un esempio:
|
||||
|
||||
```html
|
||||
<img src="importantLogo.jpeg" alt="Company logo">
|
||||
```
|
||||
|
||||
Le persone ipovedenti si affidano agli screen reader per convertire il contenuto del web in un formato audio. Essi non riescono ad ottenere le informazioni se esse sono presentate solo visualmente. Per le immagini gli screen reader possono accedere all'attributo `alt` e leggere il suo contenuto per fornire le informazioni chiave.
|
||||
|
||||
Un buon testo `alt` fornisce al lettore una breve descrizione dell'immagine. Dovresti sempre includere un attributo `alt` nelle tue immagini. Nelle specifiche di HTML5 questo è ormai considerato obbligatorio.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat è sia un ninja del codice che un ninja reale, e sta costruendo un sito web per condividere la sua conoscenza. L'immagine del profilo che vuole utilizzare mostra le sue abilità e dovrebbe essere apprezzata da tutti i visitatori del sito. Aggiungi un attributo `alt` nel tag `img` che spieghi che Camper Cat sta facendo karate. (L'attributo `src` dell'immagine non è collegato a un file reale, quindi dovresti vedere il testo `alt` nel display.)
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo tag `img` dovrebbe avere un attributo `alt` e non dovrebbe essere vuoto.
|
||||
|
||||
```js
|
||||
assert($('img').attr('alt'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<img src="doingKarateWow.jpeg">
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<img src="doingKarateWow.jpeg" alt="Someone doing karate">
|
||||
```
|
||||
@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 587d778b367417b2b2512aa8
|
||||
title: Aggiungere un selettore di data accessibile
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cR3bRbCV'
|
||||
forumTopicId: 301008
|
||||
dashedName: add-an-accessible-date-picker
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
I moduli spesso includono il campo `input`, che può essere usato per creare diversi tipi di controlli. L'attributo `type` indica che tipo di elemento `input` sarà creato.
|
||||
|
||||
Potresti aver notato i tipi di input `text` e `submit` nelle sfide precedenti, e HTML5 ha introdotto anche un'opzione per specificare un campo `date`. A seconda del supporto del browser, un selettore di date appare nel campo `input` quando è selezionato, il che rende la compilazione del modulo più semplice per tutti gli utenti.
|
||||
|
||||
Nei browser più vecchi il tipo sarà predefinito a `text`, quindi è utile mostrare agli utenti il formato di data previsto nella `label` o nel testo `placeholder` per sicurezza.
|
||||
|
||||
Ecco un esempio:
|
||||
|
||||
```html
|
||||
<label for="input1">Enter a date:</label>
|
||||
<input type="date" id="input1" name="input1">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat sta organizzando un torneo di Mortal Kombat e vuole chiedere ai suoi concorrenti di vedere quale data sia la migliore. Aggiungi un tag `input` con un attributo `type` pari a `date`, un attributo `id` pari a `pickdate` e un attributo `name` pari a `date`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe aggiungere un tag `input` per il campo di selezione della data.
|
||||
|
||||
```js
|
||||
assert($('input').length == 2);
|
||||
```
|
||||
|
||||
Il tuo tag `input` dovrebbe avere un attributo `type` con un valore di `date`.
|
||||
|
||||
```js
|
||||
assert($('input').attr('type') == 'date');
|
||||
```
|
||||
|
||||
Il tuo tag `input` dovrebbe avere un attributo `id` con un valore di `pickdate`.
|
||||
|
||||
```js
|
||||
assert($('input').attr('id') == 'pickdate');
|
||||
```
|
||||
|
||||
Il tuo tag `input` dovrebbe avere un attributo `name` con un valore di `date`.
|
||||
|
||||
```js
|
||||
assert($('input').attr('name') == 'date');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Mortal Kombat Tournament Survey</h2>
|
||||
<form>
|
||||
<p>Tell us the best date for the competition</p>
|
||||
<label for="pickdate">Preferred Date:</label>
|
||||
|
||||
<!-- Only change code below this line -->
|
||||
|
||||
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Mortal Kombat Tournament Survey</h2>
|
||||
<form>
|
||||
<p>Tell us the best date for the competition</p>
|
||||
<label for="pickdate">Preferred Date:</label>
|
||||
<input type="date" id="pickdate" name="date">
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aad
|
||||
title: >-
|
||||
Evitare i problemi dovuti al daltonismo scegliendo con cura i colori che trasmettono informazioni
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c437as3'
|
||||
forumTopicId: 301011
|
||||
dashedName: >-
|
||||
avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ci sono diverse forme di daltonismo. Queste forme vanno dalla ridotta sensibilità ad alcune lunghezze d'onda della luce alla totale incapacità di vedere i colori. La forma più comune è una ridotta sensibilità nel rilevare il colore verde.
|
||||
|
||||
Per esempio, se il colore in primo piano e il colore di sfondo sono due verdi simili, un utente daltonico potrebbe non essere in grado di distinguerli. I colori simili sono quelli vicini nel cerchio dei colori, e il loro uso dovrebbe essere evitato quando si comunicano informazioni importanti.
|
||||
|
||||
**Nota:** Alcuni strumenti per la selezione dei colori online consentono di effettuare delle simulazioni visive di come i colori appaiono in diverse forme di daltonismo. Queste sono ottime risorse da utilizzare insieme ai calcolatori di contrasto disponibili in rete.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat sta testando diversi stili per un bottone importante, ma il giallo (`#FFFF33`) usato per il `background-color` e il verde (`#33FF33`) usato per il `color` del testo sono tonalità vicine sulla ruota dei colori e virtualmente indistinguibili per alcuni utenti daltonici. (La loro luminosità simile crea problemi anche con il contrasto). Cambia il `color` del testo usando un blu scuro (`#003366`) per risolvere entrambi i problemi.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe cambiare il valore di `color` per il `button` a blu scuro.
|
||||
|
||||
```js
|
||||
assert($('button').css('color') == 'rgb(0, 51, 102)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
button {
|
||||
color: #33FF33;
|
||||
background-color: #FFFF33;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Danger!</h1>
|
||||
</header>
|
||||
<button>Delete Internet</button>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
button {
|
||||
color: #003366;
|
||||
background-color: #FFFF33;
|
||||
font-size: 14px;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Danger!</h1>
|
||||
</header>
|
||||
<button>Delete Internet</button>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aac
|
||||
title: Evitare i problemi dovuti al daltonismo usando un contrasto sufficiente
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzMEUw'
|
||||
forumTopicId: 301012
|
||||
dashedName: avoid-colorblindness-issues-by-using-sufficient-contrast
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Il colore rappresenta una grande parte del visual design, ma introduce due problemi di accessibilità. Prima di tutto, non si dovrebbe fare ricorso al solo colore per veicolare informazioni importanti in quanto gli utenti che utilizzano uno screen reader non sarebbero in grado di vederlo. In secondo luogo, i colori usati per il primo piano e per lo sfondo devono avere un contrasto sufficiente affinché le persone daltoniche possano distinguerli.
|
||||
|
||||
Nelle sfide precedenti abbiamo visto come utilizzare delle alternative testuali per risolvere il primo problema. La sfida precedente, invece, ci hamostrato come utilizzare gli strumenti per il controllo del contrasto per aiutarci a risolvere il secondo. Il rapporto di contrasto di 4.5:1 raccomandato dal WCAG vale sia per l'uso di colori che per le combinazioni in scala di grigi.
|
||||
|
||||
Gli utenti daltonici fanno fatica a distinguere alcuni colore da altri - solitamente per la tonalità ma a volte anche per la luminosità. Ricorderai che il rapporto di contrasto è calcolato usando i valori di luminanza (o luminosità) relativa del primo piano e dello sfondo.
|
||||
|
||||
In pratica, il contrasto 4.5:1 può essere raggiunto scurendo (aggiungendo nero) il colore più scuro e schiarendo (aggiungendo bianco) il colore più chiaro. Tonalità scure sulla ruota dei colori sono solitamente quelle di blu, violetto, magenta e rosso, mentre quelle più chiare sono arancione, giallo, verde e blu-verde.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat sta sperimentato colori per il testo e lo sfondo del suo blog, ma la combinazione attuale di verdastro per lo sfondo (`background-color`) e marrone per il testo (`color`) ha un rapporto di contrasto di 2.5:1. È possibile modificare facilmente la luminosità dei colori dal momento che li ha dichiarati usando la proprietà di CSS `hsl()` (che regola la tonalità, la saturazione e la luminosità) modificando il terzo argomento. Aumenta la luminosità di `background-color` dal 35% al 55% e diminuisci la luminosità di `color` dal 20% al 15%. Questo porterà il contrasto a 5.9:1.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe cambiare solamente il valore di luminosità per la proprietà `color` del testo a un valore del 15%.
|
||||
|
||||
```js
|
||||
assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi));
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe solamente portare il valore di luminosità per la proprietà `background-color` a un valore del 55%.
|
||||
|
||||
```js
|
||||
assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: hsl(0, 55%, 20%);
|
||||
background-color: hsl(120, 25%, 35%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: hsl(0, 55%, 15%);
|
||||
background-color: hsl(120, 25%, 55%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 587d778f367417b2b2512aae
|
||||
title: Dare un significato ai link usando un testo descrittivo
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c437DcV'
|
||||
forumTopicId: 301013
|
||||
dashedName: give-links-meaning-by-using-descriptive-link-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Gli utenti che usano uno screen reader hanno diverse opzioni per il tipo di contenuto che il loro dispositivo legge. Queste opzioni includono saltare a (o oltre) elementi di riferimento, saltare al contenuto principale, o ottenere un riepilogo della pagina dalle intestazioni. Un'altra opzione è di ascoltare solo i link disponibili nella pagina.
|
||||
|
||||
Gli screen reader fanno questo leggendo il testo del link, o quello che c'è tra i tag anchor (`a`). Una lista di "clicca qui" o "continua a leggere" non aiuta. Al contrario, dovresti usare testi brevi ma descrittivi all'interno dei tag `a` per fornire più informazioni a questi utenti.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Il testo del link che Camper Cat usa, privato del contesto, non è molto descrittivo. Sposta il tag anchor (`a`) in modo che racchiuda il testo `information about batteries` anziché `Click here`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe spostare gli anchor tag `a` dalla loro posizione intorno alle parole `Click here` per racchiudere le parole `information about batteries`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a')
|
||||
.text()
|
||||
.match(/^(information about batteries)$/g)
|
||||
);
|
||||
```
|
||||
|
||||
L'elemento `a` dovrebbe avere un attributo `href` con un valore di una stringa vuota `""`.
|
||||
|
||||
```js
|
||||
assert($('a').attr('href') === '');
|
||||
```
|
||||
|
||||
L'elemento `a` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/a>/g) &&
|
||||
code.match(/<\/a>/g).length === code.match(/<a href=(''|"")>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near. <a href="">Click here</a> for information about batteries</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near. Click here for <a href="">information about batteries</a></p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,115 @@
|
||||
---
|
||||
id: 587d7789367417b2b2512aa4
|
||||
title: Migliorare l'accessibilità dei contenuti audio con l'elemento audio
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJVkcZ'
|
||||
forumTopicId: 301014
|
||||
dashedName: improve-accessibility-of-audio-content-with-the-audio-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'elemento `audio` di HTML5 fornisce un significato semantico quando racchiude un flusso audio o sonoro nel tuo markup. Per essere accessibile da persone sorde o con problemi di udito, un contenuto audio ha anche bisogno di un testo alternativo. Questo risultato può essere ottenuto inserendo un testo vicino all'elemento audio o tramite un link alla trascrizione.
|
||||
|
||||
Il tag `audio` supporta l'attributo `controls`. Questo mostra i comandi di default del browser play, pausa, ecc. e supporta l'uso direttamente da tastiera. Esso è un attributo booleano, cioè non ha bisogno di un valore: la sua presenza all'interno del tag attiva l'impostazione.
|
||||
|
||||
Ecco un esempio:
|
||||
|
||||
```html
|
||||
<audio id="meowClip" controls>
|
||||
<source src="audio/meow.mp3" type="audio/mpeg">
|
||||
<source src="audio/meow.ogg" type="audio/ogg">
|
||||
</audio>
|
||||
```
|
||||
|
||||
**Nota:** di solito i contenuti multimediali hanno sia componenti visuali che sonori. Necessitano inoltre di sottotitoli sincronizzati e trascrizioni affinché gli utenti con difficoltà visive e/o uditive possano accedervi. Di solito, uno sviluppatore web non è responsabile per la creazione di sottotitoli e trascrizioni, ma deve sapere come includerli.
|
||||
|
||||
# --instructions--
|
||||
|
||||
È il momento di prendersi una pausa da Camper Cat e fare la conoscenza di camper Zersiax (@zersiax), un campione in fatto di accessibilità, e un utilizzatore di screen reader. Per ascoltare una clip del suo screen reader in azione, aggiungi un elemento `audio` dopo il `p`. Includi l'attributo `controls`. Quindi aggiungi un tag `source` all'interno dei tag `audio` con l'attributo `src` impostato su `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3` e l'attributo `type` impostato su `"audio/mpeg"`.
|
||||
|
||||
**Nota:** la clip audio potrebbe sembrare veloce e difficile da capire, ma questa è la velocità normale per gli utenti di screen reader.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe avere un tag `audio`.
|
||||
|
||||
```js
|
||||
assert($('audio').length === 1);
|
||||
```
|
||||
|
||||
Il tuo elemento `audio` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/audio>/g).length === 1 &&
|
||||
code.match(/<audio.*>[\s\S]*<\/audio>/g)
|
||||
);
|
||||
```
|
||||
|
||||
Il tag `audio` dovrebbe avere l'attributo `controls`.
|
||||
|
||||
```js
|
||||
assert($('audio').attr('controls'));
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe avere un tag `source`.
|
||||
|
||||
```js
|
||||
assert($('source').length === 1);
|
||||
```
|
||||
|
||||
Il tuo tag `source` dovrebbe essere all'interno dei tag `audio`.
|
||||
|
||||
```js
|
||||
assert($('audio').children('source').length === 1);
|
||||
```
|
||||
|
||||
Il valore dell'attributo `src` all'interno del tag `source` dovrebbe corrispondere esattamente al link presente nelle istruzioni.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('source').attr('src') ===
|
||||
'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3'
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe includere un attributo `type` all'interno del tag `source` con un valore audio/mpeg.
|
||||
|
||||
```js
|
||||
assert($('source').attr('type') === 'audio/mpeg');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Real Coding Ninjas</h1>
|
||||
</header>
|
||||
<main>
|
||||
<p>A sound clip of Zersiax's screen reader in action.</p>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Real Coding Ninjas</h1>
|
||||
</header>
|
||||
<main>
|
||||
<p>A sound clip of Zersiax's screen reader in action.</p>
|
||||
<audio controls>
|
||||
<source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg"/>
|
||||
</audio>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,161 @@
|
||||
---
|
||||
id: 587d778a367417b2b2512aa5
|
||||
title: Migliorare l'accessibilità di un grafico con l'elemento figure
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJMqtE'
|
||||
forumTopicId: 301015
|
||||
dashedName: improve-chart-accessibility-with-the-figure-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 ha introdotto l'elemento `figure`, insieme al relativo `figcaption`. Usati insieme, questi elementi contengono una rappresentazione visiva (come un'immagine, un diagramma o un grafico) e la sua didascalia. Avvolgere questi elementi insieme dà un doppio impulso di accessibilità raggruppando semanticamente i contenuti correlati e fornendo un testo alternativo che spiega la `figure`.
|
||||
|
||||
Per la visualizzazione di dati come nei grafici, la didascalia può essere utilizzata per annotare brevemente le tendenze o i risultati per gli utenti ipovedenti. Un'altra sfida spiegherà come spostare una versione tabulare dei dati del grafico fuori dallo schermo (utilizzando CSS) per chi utilizza uno screen reader.
|
||||
|
||||
Ecco un esempio - nota che il `figcaption` va dentro i tag `figure` e può essere combinato con altri elementi:
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
|
||||
<br>
|
||||
<figcaption>
|
||||
Master Camper Cat demonstrates proper form of a roundhouse kick.
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat sta lavorando sodo per creare un grafico a barre che mostra la quantità di tempo settimanale da trascorrere allenandosi in invisibilità, combattimento e armi. Aiutalo a strutturare meglio la sua pagina cambiando il tag `div` che usava con un tag `figure`, e il tag `p` che circonda la didascalia con un tag `figcaption`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe avere un tag `figure`.
|
||||
|
||||
```js
|
||||
assert($('figure').length == 1);
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe avere un tag `figcaption`.
|
||||
|
||||
```js
|
||||
assert($('figcaption').length == 1);
|
||||
```
|
||||
|
||||
Il tuo codice non dovrebbe avere alcun tag `div`.
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
Il tuo codice non dovrebbe avere alcun tag `p`.
|
||||
|
||||
```js
|
||||
assert($('p').length == 0);
|
||||
```
|
||||
|
||||
La `figcaption` dovrebbe essere un elemento figlio (child) del tag `figure`.
|
||||
|
||||
```js
|
||||
assert($('figure').children('figcaption').length == 1);
|
||||
```
|
||||
|
||||
Il tuo elemento `figure` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/figure>/g) &&
|
||||
code.match(/<\/figure>/g).length === code.match(/<figure>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
|
||||
<!-- Only change code below this line -->
|
||||
<div>
|
||||
<!-- Stacked bar chart will go here -->
|
||||
<br>
|
||||
<p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p>
|
||||
</div>
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<figure>
|
||||
<!-- Stacked bar chart will go here -->
|
||||
<br>
|
||||
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 587d778a367417b2b2512aa6
|
||||
title: Migliorare l'accessibilità dei moduli con l'elemento label
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJMMAN'
|
||||
forumTopicId: 301016
|
||||
dashedName: improve-form-field-accessibility-with-the-label-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Migliorare l'accessibilità con l'HTML semantico richiede di usare sia i nomi che gli attributi appropriati per i tag. Le prossime sfide riguardano alcuni possibili scenari significativi in cui si utilizzano gli attributi nei moduli.
|
||||
|
||||
Il tag `label` racchiude il testo per uno specifico elemento di controllo del modulo, di solito il nome o l'etichetta di una delle scelte possibili. Questo fa sì che il significato sia legato all'elemento e rende il modulo più leggibile. L'attributo `for` di un tag `label` associa esplicitamente quella `label` al controllo del modulo, ed è usato dagli screen reader.
|
||||
|
||||
Hai conosciuto i pulsanti di opzione e le loro etichette in una lezione della sezione HTML di base. In quella lezione, abbiamo avvolto l'elemento input del pulsante di opzione all'interno di un elemento `label` insieme al testo dell'etichetta, in modo da rendere il testo cliccabile. Un altro modo per raggiungere questo obiettivo è utilizzare l'attributo `for`, come spiegato in questa lezione.
|
||||
|
||||
Il valore dell'attributo `for` deve essere uguale al valore dell'attributo `id` del controllo del modulo. Ecco un esempio:
|
||||
|
||||
```html
|
||||
<form>
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name">
|
||||
</form>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat si aspetta un sacco di interesse per i suoi post e vuole includere un modulo di iscrizione alla newsletter. Aggiungi un attributo `for` nella `label` dell'email che corrisponda all'`id` del suo campo `input`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe avere un attributo `for` non vuoto nel tag `label`.
|
||||
|
||||
```js
|
||||
assert($('label').attr('for'));
|
||||
```
|
||||
|
||||
Il valore del tuo attributo `for` dovrebbe corrispondere al valore dell'`id` nell'`input` email.
|
||||
|
||||
```js
|
||||
assert($('label').attr('for') == 'email');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
|
||||
|
||||
<label>Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
|
||||
|
||||
<label for="email">Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,80 @@
|
||||
---
|
||||
id: 587d778e367417b2b2512aab
|
||||
title: Migliorare la leggibilità con il testo ad alto contrasto
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cKb3nCq'
|
||||
forumTopicId: 301017
|
||||
dashedName: improve-readability-with-high-contrast-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Il basso contrasto tra i colori di primo piano e di sfondo può rendere il testo difficile da leggere. Un contrasto sufficiente migliora la leggibilità del tuo contenuto, ma cosa significa esattamente "sufficiente"?
|
||||
|
||||
Le linee guida di accessibilità dei contenuti Web (WCAG) raccomandano almeno un rapporto di contrasto di 4.5 a 1 per il testo normale. Il rapporto viene calcolato confrontando i valori relativi di luminanza di due colori. Questo varia da 1:1 per lo stesso colore, o nessun contrasto, a 21:1 per il bianco contro il nero, il contrasto più sostanziale. Esistono molti strumenti di controllo del contrasto disponibili online che calcolano questo rapporto per te.
|
||||
|
||||
# --instructions--
|
||||
|
||||
La scelta di Camper Cat di un testo grigio chiaro su uno sfondo bianco per il suo recente post sul blog ha un rapporto di contrasto di 1,5:1, che lo rende difficile da leggere. Cambia il `color` del testo dal grigio corrente (`#D3D3D3`) a un grigio più scuro (`#636363`) per migliorare il rapporto di contrasto a 6:1.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe cambiare il valore di `color` per il `body` al grigio più scuro.
|
||||
|
||||
```js
|
||||
assert($('body').css('color') == 'rgb(99, 99, 99)');
|
||||
```
|
||||
|
||||
Il tuo codice non dovrebbe cambiare il `background-color` del `body`.
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') == 'rgb(255, 255, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: #D3D3D3;
|
||||
background-color: #FFF;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
color: #636363;
|
||||
background-color: #FFF;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>A Word on the Recent Catnip Doping Scandal</h2>
|
||||
<p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
|
||||
<p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
|
||||
</article>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 587d774e367417b2b2512a9f
|
||||
title: Andare direttamente al contenuto usando l'elemento main
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp7zuE'
|
||||
forumTopicId: 301018
|
||||
dashedName: jump-straight-to-the-content-using-the-main-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 ha introdotto diversi nuovi elementi che danno agli sviluppatori più opzioni, incorporando anche funzioni di accessibilità. Questi tag comprendono tra l'altro `main`, `header`, `footer`, `nav`, `article`, e `section`.
|
||||
|
||||
Di default, un browser visualizza questi elementi come fa con il semplice `div`. Tuttavia, usarli dove appropriato dà più significato alla formattazione. Il nome del tag da solo può indicare il tipo di informazione che contiene, aggiungendo significato semantico a quel contenuto. Le tecnologie assistive possono accedere a queste informazioni per fornire ai loro utenti un miglior riepilogo della pagina o delle opzioni di navigazione.
|
||||
|
||||
L'elemento `main` viene utilizzato per avvolgere (indovina) il contenuto principale, e dovrebbe essercene solo uno per pagina. Ha lo scopo di racchiudere le informazioni relative al tema centrale della tua pagina. Non è fatto per includere elementi che si ripetono tra le pagine, come link o banner.
|
||||
|
||||
Inoltre il tag `main` ha una funzione di riferimento incorporata che la tecnologia assistiva può utilizzare per andare rapidamente al contenuto principale. Se hai mai visto un link "Vai al contenuto principale" in cima ad una pagina, usare il tag `main` dà ai dispositivi assistivi quella funzionalità in automatico.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat ha delle grandi idee per la sua pagina di armi ninja. Aiutalo a impostare la formattazione aggiungendo i tag `main` di apertura e chiusura tra `header` e `footer` (trattati in altre sfide). Tieni i tag `main` vuoti per ora.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe avere un tag `main`.
|
||||
|
||||
```js
|
||||
assert($('main').length == 1);
|
||||
```
|
||||
|
||||
I tag `main` dovrebbero stare tra il tag `header` di chiusura e il tag `footer` di apertura.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<header>
|
||||
<h1>Weapons of the Ninja</h1>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<footer></footer>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<header>
|
||||
<h1>Weapons of the Ninja</h1>
|
||||
</header>
|
||||
<main>
|
||||
|
||||
</main>
|
||||
<footer></footer>
|
||||
```
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 587d774c367417b2b2512a9d
|
||||
title: Sapere quando il testo alternativo dovrebbe essere lasciato vuoto
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM9P4t2'
|
||||
forumTopicId: 301019
|
||||
dashedName: know-when-alt-text-should-be-left-blank
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Nell'ultima sfida, hai imparato che usando i tag `img`, è obbligatorio includere un attributo `alt`. Tuttavia, a volte le immagini sono già raggruppate con una didascalia che le descrive, o sono utilizzate solo a scopo decorativo. In questi casi, il testo `alt` può sembrare ridondante o inutile.
|
||||
|
||||
Quando un'immagine è già spiegata con del contenuto testuale o non aggiunge altro significato alla pagina, il tag `img` ha ancora bisogno di un attributo `alt`, ma esso può essere impostato su una stringa vuota. Un esempio:
|
||||
|
||||
```html
|
||||
<img src="visualDecoration.jpeg" alt="">
|
||||
```
|
||||
|
||||
Le immagini di sfondo solitamente cadono nella categoria 'decorativo'. Tuttavia, sono tipicamente applicate con regole CSS e quindi sono escluse dal processo di lettura dello schermo.
|
||||
|
||||
**Nota:** Per le immagini con didascalia, potresti voler includere comunque il testo `alt` poiché aiuta i motori di ricerca a catalogare il contenuto dell'immagine.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat ha scritto lo scheletro della pagina per la sezione blog del suo sito. Vuole aggiungere una separazione visiva tra i suoi due articoli usando l'immagine decorativa di una spada samurai. Aggiungi un attributo `alt` al tag `img` e impostalo su una stringa vuota. (Nota che il link all'immagine sorgente `src` non punta ad un file reale - non preoccuparti che non ci siano spade mostrate nella pagina.)
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo tag `img` dovrebbe avere un attributo `alt`.
|
||||
|
||||
```js
|
||||
assert(!($('img').attr('alt') == undefined));
|
||||
```
|
||||
|
||||
L'attributo `alt` dovrebbe essere impostato su una stringa vuota.
|
||||
|
||||
```js
|
||||
assert($('img').attr('alt') == '');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg">
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>To Come...</p>
|
||||
</article>
|
||||
```
|
||||
@ -0,0 +1,244 @@
|
||||
---
|
||||
id: 587d778d367417b2b2512aaa
|
||||
title: Rendere gli elementi visibili solo a uno screen reader usando del CSS ad hoc
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cJ8QGkhJ'
|
||||
forumTopicId: 301020
|
||||
dashedName: make-elements-only-visible-to-a-screen-reader-by-using-custom-css
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Hai notato che tutte le sfide di accessibilità viste finora non hanno utilizzato alcun CSS? Questo mostra quanto è importante utilizzare una struttura logica e dei tag semanticamente significativi intorno al contenuto, prima di introdurre l'aspetto del visual design.
|
||||
|
||||
Tuttavia, la magia dei CSS può anche migliorare l'accessibilità sulla tua pagina quando vuoi nascondere visivamente i contenuti destinati solo agli screen reader. Questo accade quando le informazioni sono in formato visivo (come un grafico), ma gli utenti degli screen reader hanno bisogno di una presentazione alternativa (come una tabella) per accedere ai dati. Il CSS è utilizzato per posizionare gli elementi destinati solo agli screen reader fuori dall'area visiva della finestra del browser.
|
||||
|
||||
Ecco un esempio delle regole CSS che lo rendono possibile:
|
||||
|
||||
```css
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
top: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
```
|
||||
|
||||
**Nota:** I seguenti approcci CSS NON fara la stessa cosa:
|
||||
|
||||
<ul>
|
||||
<li><code>display: none;</code> o <code>visibility: hidden;</code> nascondono i contenuti a tutti, compresi gli utenti degli screen reader</li>
|
||||
<li>Assegnare valori nulli per le dimensioni in pixel, come <code>width: 0px; height: 0px;</code> rimuove l'elemento dal flusso del documento, di conseguenza gli screen reader lo ignoreranno</li>
|
||||
</ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat ha creato un bel grafico a barre sovrapposte per la sua pagina di allenamento, e ha messo i dati in una tabella per i suoi utenti ipovedenti. La tabella ha già una classe `sr-only`, ma le regole CSS non sono ancora complete. Assegna a `position` il valore `absolute`, a `left` il valore `-10000px`, e a `width` e `height` il valore `1px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe impostare la proprietà `position` della classe `sr-only` al valore `absolute`.
|
||||
|
||||
```js
|
||||
assert($('.sr-only').css('position') == 'absolute');
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe impostare la proprietà `left` della classe `sr-only` ad un valore di `-10000px`.
|
||||
|
||||
```js
|
||||
assert($('.sr-only').css('left') == '-10000px');
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe impostare la proprietà `width` della classe `sr-only` ad un valore di `1` pixel.
|
||||
|
||||
```js
|
||||
assert(code.match(/width:\s*?1px/gi));
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe impostare la proprietà `height` della classe `sr-only` ad un valore di `1` pixel.
|
||||
|
||||
```js
|
||||
assert(code.match(/height:\s*?1px/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
.sr-only {
|
||||
position: ;
|
||||
left: ;
|
||||
width: ;
|
||||
height: ;
|
||||
top: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<section>
|
||||
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
|
||||
<figure>
|
||||
<!-- Stacked bar chart of weekly training -->
|
||||
<p>[Stacked bar chart]</p>
|
||||
<br />
|
||||
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||
</figure>
|
||||
<table class="sr-only">
|
||||
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th scope="col">Stealth & Agility</th>
|
||||
<th scope="col">Combat</th>
|
||||
<th scope="col">Weapons</th>
|
||||
<th scope="col">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Week One</th>
|
||||
<td>3</td>
|
||||
<td>5</td>
|
||||
<td>2</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Two</th>
|
||||
<td>4</td>
|
||||
<td>5</td>
|
||||
<td>3</td>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Three</th>
|
||||
<td>4</td>
|
||||
<td>6</td>
|
||||
<td>3</td>
|
||||
<td>13</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
left: -10000px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
top: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<section>
|
||||
<h2>Master Camper Cat's Beginner Three Week Training Program</h2>
|
||||
<figure>
|
||||
<!-- Stacked bar chart of weekly training -->
|
||||
<p>[Stacked bar chart]</p>
|
||||
<br />
|
||||
<figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
|
||||
</figure>
|
||||
<table class="sr-only">
|
||||
<caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th scope="col">Stealth & Agility</th>
|
||||
<th scope="col">Combat</th>
|
||||
<th scope="col">Weapons</th>
|
||||
<th scope="col">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Week One</th>
|
||||
<td>3</td>
|
||||
<td>5</td>
|
||||
<td>2</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Two</th>
|
||||
<td>4</td>
|
||||
<td>5</td>
|
||||
<td>3</td>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Week Three</th>
|
||||
<td>4</td>
|
||||
<td>6</td>
|
||||
<td>3</td>
|
||||
<td>13</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512aaf
|
||||
title: Rendere i link navigabili con le chiavi di accesso HTML
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cQvmaTp'
|
||||
forumTopicId: 301021
|
||||
dashedName: make-links-navigable-with-html-access-keys
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML offre l'attributo `accesskey` per specificare una scorciatoia da tastiera per attivare o portare il focus su un elemento. L'aggiunta di un attributo `accesskey` può rendere la navigazione più efficiente per chi usa solo la tastiera.
|
||||
|
||||
HTML5 permette di utilizzare questo attributo su qualsiasi elemento, ma esso è particolarmente utile quando viene utilizzato con un elemento interattivo. Questo include link, pulsanti e controlli dei moduli.
|
||||
|
||||
Ecco un esempio:
|
||||
|
||||
```html
|
||||
<button accesskey="b">Important Button</button>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat vuole che i link intorno ai due titoli degli articoli del blog abbiano delle scorciatoie da tastiera, in modo che gli utenti possano passare rapidamente alla storia completa. Aggiungi un attributo `accesskey` ad entrambi i link e imposta il primo a `g` (per Garfield) e il secondo a `c` (per Chuck Norris).
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe avere un attributo `accesskey` sul tag `a` con l' `id` di `first`.
|
||||
|
||||
```js
|
||||
assert($('#first').attr('accesskey'));
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe avere un attributo `accesskey` sul tag `a` con l' `id` di `second`.
|
||||
|
||||
```js
|
||||
assert($('#second').attr('accesskey'));
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe impostare l'attributo `accesskey` sul tag `a` con l'`id` di `first` a `g`. Nota che c'è differenza tra lettere maiuscole e minuscole.
|
||||
|
||||
```js
|
||||
assert($('#first').attr('accesskey') == 'g');
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe impostare l'attributo `accesskey` sul tag `a` con l'`id` di `second` a `c`. Nota che c'è differenza tra lettere maiuscole e minuscole.
|
||||
|
||||
```js
|
||||
assert($('#second').attr('accesskey') == 'c');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
|
||||
|
||||
<h2><a id="first" href="#">The Garfield Files: Lasagna as Training Fuel?</a></h2>
|
||||
|
||||
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<article>
|
||||
|
||||
|
||||
<h2><a id="second" href="#">Is Chuck Norris a Cat Person?</a></h2>
|
||||
|
||||
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<article>
|
||||
|
||||
|
||||
<h2><a id="first" accesskey="g" href="#">The Garfield Files: Lasagna as Training Fuel?</a></h2>
|
||||
|
||||
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<article>
|
||||
|
||||
|
||||
<h2><a id="second" accesskey="c" href="#">Is Chuck Norris a Cat Person?</a></h2>
|
||||
|
||||
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,116 @@
|
||||
---
|
||||
id: 587d7788367417b2b2512aa3
|
||||
title: Rendere più semplice la navigazione dagli screen reader con il riferimento al footer
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/crVrDh8'
|
||||
forumTopicId: 301022
|
||||
dashedName: make-screen-reader-navigation-easier-with-the-footer-landmark
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Simile a `header` e a `nav`, l'elemento `footer` ha un riferimento incorporato che consente alle tecnologie assistive di navigare rapidamente ad esso. Esso viene utilizzato principalmente per contenere informazioni sul copyright o link a documenti correlati che di solito stanno in fondo a una pagina.
|
||||
|
||||
# --instructions--
|
||||
|
||||
La pagina di allenamento di Camper Cat sta procedendo bene. Sostituisci il `div` usato per contenere le informazioni sul copyright in fondo alla pagina con un elemento `footer`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe avere un tag `footer`.
|
||||
|
||||
```js
|
||||
assert($('footer').length == 1);
|
||||
```
|
||||
|
||||
Il tuo codice non dovrebbe avere alcun tag `div`.
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe avere un tag `footer` di apertura e uno di chiusura.
|
||||
|
||||
```js
|
||||
assert(code.match(/<footer>\s*© 2018 Camper Cat\s*<\/footer>/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
<div>© 2018 Camper Cat</div>
|
||||
|
||||
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
|
||||
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 587d7787367417b2b2512aa1
|
||||
title: Rendere più semplice la navigazione dagli screen reader con il riferimento all'header
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB76vtv'
|
||||
forumTopicId: 301023
|
||||
dashedName: make-screen-reader-navigation-easier-with-the-header-landmark
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Il prossimo elemento HTML5 che aggiunge significato semantico e migliora l'accessibilità è il tag `header`. È usato per contenere informazioni introduttive o link di navigazione per il suo tag genitore e funziona bene intorno a contenuti che si ripetono in cima a più pagine dello stesso sito.
|
||||
|
||||
`header` condivide il riferimento incorporato che hai visto con `main`, consentendo alle tecnologie assistive di navigare rapidamente a quel contenuto.
|
||||
|
||||
**Nota:** L'`header` è destinato all'uso all'interno del tag `body` del tuo documento HTML. È diverso dall'elemento `head`, che contiene il titolo della pagina, meta informazioni, ecc.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat sta scrivendo alcuni grandi articoli sull'allenamento ninja, e vuole aggiungere al suo sito una pagina dedicata ad essi. Cambia il `div` che attualmente contiene l'`h1` con un tag `header`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe avere un tag `header`.
|
||||
|
||||
```js
|
||||
assert($('header').length == 1);
|
||||
```
|
||||
|
||||
I tag `header` dovrebbero racchiudere il tag `h1`.
|
||||
|
||||
```js
|
||||
assert($('header').children('h1').length == 1);
|
||||
```
|
||||
|
||||
Il tuo codice non dovrebbe avere alcun tag `div`.
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
Il tuo elemento `header` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/header>/g) &&
|
||||
code.match(/<\/header>/g).length === code.match(/<header>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
</div>
|
||||
|
||||
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
</header>
|
||||
|
||||
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,121 @@
|
||||
---
|
||||
id: 587d7788367417b2b2512aa2
|
||||
title: Rendere più semplice la navigazione dagli screen reader con il riferimento alla barra di navigazione
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/czVwWSv'
|
||||
forumTopicId: 301024
|
||||
dashedName: make-screen-reader-navigation-easier-with-the-nav-landmark
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'elemento `nav` è un altro elemento HTML5 con il riferimento incorporato per facilitare la navigazione degli screen reader. Questo tag serve a contenere i principali collegamenti di navigazione nella tua pagina.
|
||||
|
||||
Se ci sono collegamenti al sito ripetuti in fondo alla pagina, non è necessario marcare anche quelli con un tag `nav`. Utilizzare un tag `footer` (coperto nella prossima sfida) è sufficiente.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat ha incluso link di navigazione nella parte superiore della sua pagina di allenamento, ma li ha avvolti in un tag `div`. Cambia il tag `div` in un tag `nav` per migliorare l'accessibilità della sua pagina.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe avere un tag `nav`.
|
||||
|
||||
```js
|
||||
assert($('nav').length == 1);
|
||||
```
|
||||
|
||||
I tuoi tag `nav` dovrebbero avvolgere i tag `ul` e gli elementi della lista.
|
||||
|
||||
```js
|
||||
assert($('nav').children('ul').length == 1);
|
||||
```
|
||||
|
||||
Il tuo codice non dovrebbe avere alcun tag `div`.
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
Il tuo elemento `nav` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/nav>/g) &&
|
||||
code.match(/<\/nav>/g).length === code.match(/<nav>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
|
||||
<div>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Training with Camper Cat</h1>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#stealth">Stealth & Agility</a></li>
|
||||
<li><a href="#combat">Combat</a></li>
|
||||
<li><a href="#weapons">Weapons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
<main>
|
||||
<section id="stealth">
|
||||
<h2>Stealth & Agility Training</h2>
|
||||
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
|
||||
<article><h3>No training is NP-complete without parkour</h3></article>
|
||||
</section>
|
||||
<section id="combat">
|
||||
<h2>Combat Training</h2>
|
||||
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
|
||||
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
|
||||
</section>
|
||||
<section id="weapons">
|
||||
<h2>Weapons Training</h2>
|
||||
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
|
||||
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,132 @@
|
||||
---
|
||||
id: 587d778c367417b2b2512aa9
|
||||
title: Standardizzare gli orari con l'attributo HTML5 datetime
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzMgtz'
|
||||
forumTopicId: 301025
|
||||
dashedName: standardize-times-with-the-html5-datetime-attribute
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Proseguendo con il tema della data, HTML5 ha introdotto l'elemento `time` insieme a un attributo `datetime` per standardizzare gli orari. L'elemento `time` è un elemento in linea che può avvolgere una data o un'ora in una pagina. Un attributo `datetime` contiene un formato valido di quella data. Questo è il valore accessibile alle tecnologie assistive. Esso aiuta ad evitare confusione fornendo una versione standardizzata di una data, anche se è scritta in modo informale o colloquiale nel testo.
|
||||
|
||||
Ecco un esempio:
|
||||
|
||||
```html
|
||||
<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
I risultati del sondaggio di Camper Cat sul torneo di Mortal Kombat sono arrivati! Metti un tag `time` intorno al testo `Thursday, September 15<sup>th</sup>` e aggiungi un attributo `datetime` impostato a `2016-09-15`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe avere un elemento `p` che include il testo `Thank you to everyone for responding to Master Camper Cat's survey.` e che abbia un elemento `time`.
|
||||
|
||||
```js
|
||||
assert(timeElement.length);
|
||||
```
|
||||
|
||||
I tuoi tag `time` aggiuntivi dovrebbero avvolgere il testo `Thursday, September 15<sup>th</sup>`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
timeElement.length &&
|
||||
$(timeElement).html().trim() === 'Thursday, September 15<sup>th</sup>'
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo tag `time` dovrebbe avere un attributo `datetime` non vuoto.
|
||||
|
||||
```js
|
||||
assert(datetimeAttr && datetimeAttr.length);
|
||||
```
|
||||
|
||||
Il tuo attributo `datetime` dovrebbe essere impostato sul valore `2016-09-15`.
|
||||
|
||||
```js
|
||||
assert(datetimeAttr === '2016-09-15');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --after-user-code--
|
||||
|
||||
```html
|
||||
<script>
|
||||
const pElement = $("article > p")
|
||||
.filter((_, elem) => $(elem).text().includes("Thank you to everyone for responding to Master Camper Cat's survey."));
|
||||
const timeElement = pElement[0] ? $(pElement[0]).find("time") : null;
|
||||
const datetimeAttr = $(timeElement).attr("datetime");
|
||||
</script>
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Mortal Kombat Tournament Survey Results</h2>
|
||||
|
||||
<!-- Only change code below this line -->
|
||||
|
||||
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is Thursday, September 15<sup>th</sup>. May the best ninja win!</p>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<section>
|
||||
<h3>Comments:</h3>
|
||||
<article>
|
||||
<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
|
||||
<p>Johnny Cage better be there, I'll finish him!</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
|
||||
<p>Wow, much combat, so mortal.</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
|
||||
<p>Looks like I'll be busy that day.</p>
|
||||
</article>
|
||||
</section>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Tournaments</h1>
|
||||
</header>
|
||||
<article>
|
||||
<h2>Mortal Kombat Tournament Survey Results</h2>
|
||||
|
||||
<p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>. May the best ninja win!</p>
|
||||
|
||||
<section>
|
||||
<h3>Comments:</h3>
|
||||
<article>
|
||||
<p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
|
||||
<p>Johnny Cage better be there, I'll finish him!</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
|
||||
<p>Wow, much combat, so mortal.</p>
|
||||
</article>
|
||||
<article>
|
||||
<p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
|
||||
<p>Looks like I'll be busy that day.</p>
|
||||
</article>
|
||||
</section>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 587d774d367417b2b2512a9e
|
||||
title: Utilizzare le intestazioni per mostrare le relazioni gerarchiche tra i contenuti
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cqVEktm'
|
||||
forumTopicId: 301026
|
||||
dashedName: use-headings-to-show-hierarchical-relationships-of-content
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Le intestazioni (da `h1` a `h6`) sono il cavallo di battaglia per fornire una struttura e dei titoli ai tuoi contenuti. Gli screen reader possono essere impostati per leggere solo le intestazioni di una pagina in modo che l'utente abbia un riepilogo. Questo significa che è importante che i tag di intestazione nella tua struttura abbiano un significato semantico e si relazionino l'uno con l'altro, e non che siano scelti solo per i loro valori dimensionali.
|
||||
|
||||
*Significato semantico* vuol dire che il tag usato intorno ad un contenuto indica il tipo di informazioni che contiene.
|
||||
|
||||
Se stai scrivendo un articolo con un'introduzione, un corpo, e una conclusione, non ha molto senso mettere la conclusione come sottosezione del corpo. Dovrebbe piuttosto essere una sezione a parte. Allo stesso modo, i tag di intestazione in una pagina web devono andare in ordine e indicare le relazioni gerarchiche del tuo contenuto.
|
||||
|
||||
Le intestazioni di rango uguale (o superiore) iniziano nuove sezioni implicite, intestazioni di rango minore iniziano sottosezioni di quella precedente.
|
||||
|
||||
Ad esempio, una pagina con un elemento `h2` seguito da diverse sottosezioni etichettate con tag `h4` confonderebbe un utente di screen reader. Con sei scelte, è allettante utilizzare un tag perché appare meglio nel browser, ma ricorda che puoi utilizzare CSS per modificarne la dimensione.
|
||||
|
||||
Un ultimo punto: ogni pagina dovrebbe avere sempre uno (e uno solo) elemento `h1`, relativo al tema principale del tuo contenuto. Questa e le altre intestazioni sono utilizzate in parte dai motori di ricerca per capire l'argomento della pagina.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat vuole una pagina sul suo sito dedicata a come diventare un ninja. Aiutarlo a sistemare le intestazioni in modo che la formattazione dia significato semantico al contenuto, e mostri le corrette relazioni genitore-figlio delle sue sezioni. Sostituisci tutti i tag `h5` con il livello di intestazione corretto per indicare che sono sottosezioni di quelli `h2`. Usa i tag `h3` per lo scopo.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe avere 6 tag `h3`.
|
||||
|
||||
```js
|
||||
assert($('h3').length === 6);
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe avere 6 tag di chiusura `h3`.
|
||||
|
||||
```js
|
||||
assert((code.match(/\/h3/g) || []).length === 6);
|
||||
```
|
||||
|
||||
Il tuo codice non dovrebbe avere alcun tag `h5`.
|
||||
|
||||
```js
|
||||
assert($('h5').length === 0);
|
||||
```
|
||||
|
||||
Il tuo codice non dovrebbe avere alcun tag di chiusura `h5`.
|
||||
|
||||
```js
|
||||
assert(/\/h5/.test(code) === false);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>How to Become a Ninja</h1>
|
||||
<main>
|
||||
<h2>Learn the Art of Moving Stealthily</h2>
|
||||
<h5>How to Hide in Plain Sight</h5>
|
||||
<h5>How to Climb a Wall</h5>
|
||||
|
||||
<h2>Learn the Art of Battle</h2>
|
||||
<h5>How to Strengthen your Body</h5>
|
||||
<h5>How to Fight like a Ninja</h5>
|
||||
|
||||
<h2>Learn the Art of Living with Honor</h2>
|
||||
<h5>How to Breathe Properly</h5>
|
||||
<h5>How to Simplify your Life</h5>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>How to Become a Ninja</h1>
|
||||
<main>
|
||||
<h2>Learn the Art of Moving Stealthily</h2>
|
||||
<h3>How to Hide in Plain Sight</h3>
|
||||
<h3>How to Climb a Wall</h3>
|
||||
|
||||
<h2>Learn the Art of Battle</h2>
|
||||
<h3>How to Strengthen your Body</h3>
|
||||
<h3>How to Fight like a Ninja</h3>
|
||||
|
||||
<h2>Learn the Art of Living with Honor</h2>
|
||||
<h3>How to Breathe Properly</h3>
|
||||
<h3>How to Simplify your Life</h3>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,144 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512ab0
|
||||
title: Usare l'attributo tabindex per evidenziare un elemento tramite tastiera
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzMDHW'
|
||||
forumTopicId: 301027
|
||||
dashedName: use-tabindex-to-add-keyboard-focus-to-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'attributo HTML `tabindex` ha tre funzioni distinte relative alla selezione di un elemento tramite tastiera. Quando è su un tag, indica che l'elemento può essere evidenziato. Il valore (un intero positivo, negativo o nullo) ne determina il comportamento.
|
||||
|
||||
Alcuni elementi, come i link e i controlli dei moduli, vengono selezionati automaticamente da tastiera quando un utente preme il tasto tab attraverso una pagina. La selezione segue lo stesso ordine con cui gli elementi compaiono nella formattazione HTML. La stessa funzionalità può essere data ad altri elementi, come `div`, `span`, e `p`, posizionando un attributo `tabindex="0"` su di essi. Ecco un esempio:
|
||||
|
||||
```html
|
||||
<div tabindex="0">I need keyboard focus!</div>
|
||||
```
|
||||
|
||||
**Nota:** Un valore `tabindex` negativo (tipicamente -1) indica che un elemento è selezionabile, ma non è raggiungibile dalla tastiera. Questo metodo viene generalmente utilizzato per mettere a fuoco i contenuti a livello di programmazione (come quando viene attivato un `div` utilizzato per una finestra popup), e va oltre lo scopo di queste sfide.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat ha creato un nuovo sondaggio per raccogliere informazioni sui suoi utenti. Sa che i campi di input ottengono automaticamente la selezione da tastiera, ma vuole assicurarsi che gli utenti della sola tastiera si soffermino sulle istruzioni mentre scorrono con il tasto tab attraverso gli elementi. Aggiungi un attributo `tabindex` al tag `p` e impostane il valore a `0`. Bonus - utilizzare l'attributo `tabindex` consente anche alla pseudo-classe CSS `:focus` di funzionare sul tag `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe aggiungere un attributo `tabindex` sul tag `p` che contiene le istruzioni del modulo.
|
||||
|
||||
```js
|
||||
assert($('p').attr('tabindex'));
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe impostare l'attributo `tabindex` sul tag `p` ad un valore di 0.
|
||||
|
||||
```js
|
||||
assert($('p').attr('tabindex') == '0');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
p:focus {
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Ninja Survey</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
|
||||
|
||||
<p>Instructions: Fill in ALL your information then click <b>Submit</b></p>
|
||||
|
||||
|
||||
<label for="username">Username:</label>
|
||||
<input type="text" id="username" name="username"><br>
|
||||
<fieldset>
|
||||
<legend>What level ninja are you?</legend>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">9th Life Master</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<fieldset>
|
||||
<legend>Select your favorite weapons:</legend>
|
||||
<input id="stars" type="checkbox" name="weapons" value="stars">
|
||||
<label for="stars">Throwing Stars</label><br>
|
||||
<input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
|
||||
<label for="nunchucks">Nunchucks</label><br>
|
||||
<input id="sai" type="checkbox" name="weapons" value="sai">
|
||||
<label for="sai">Sai Set</label><br>
|
||||
<input id="sword" type="checkbox" name="weapons" value="sword">
|
||||
<label for="sword">Sword</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form><br>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
p:focus {
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Ninja Survey</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
|
||||
|
||||
<p tabindex="0">Instructions: Fill in ALL your information then click <b>Submit</b></p>
|
||||
|
||||
|
||||
<label for="username">Username:</label>
|
||||
<input type="text" id="username" name="username"><br>
|
||||
<fieldset>
|
||||
<legend>What level ninja are you?</legend>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">9th Life Master</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<fieldset>
|
||||
<legend>Select your favorite weapons:</legend>
|
||||
<input id="stars" type="checkbox" name="weapons" value="stars">
|
||||
<label for="stars">Throwing Stars</label><br>
|
||||
<input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
|
||||
<label for="nunchucks">Nunchucks</label><br>
|
||||
<input id="sai" type="checkbox" name="weapons" value="sai">
|
||||
<label for="sai">Sai Set</label><br>
|
||||
<input id="sword" type="checkbox" name="weapons" value="sword">
|
||||
<label for="sword">Sword</label>
|
||||
</fieldset>
|
||||
<br>
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form><br>
|
||||
</section>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,160 @@
|
||||
---
|
||||
id: 587d7790367417b2b2512ab1
|
||||
title: Usare l'attributo tabindex per specificare l'ordine di selezione da tastiera per più elementi
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cmzRRcb'
|
||||
forumTopicId: 301028
|
||||
dashedName: use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'attributo `tabindex` può anche specificare l'esatto ordine di selezione degli elementi. Questo si ottiene quando il valore dell'attributo è impostato su un numero positivo maggiore o uguale a 1.
|
||||
|
||||
Impostare un `tabindex="1"` porterà la selezione della tastiera a quell'elemento per primo. Dopodiché passa attraverso la sequenza dei valori `tabindex` specificati (2, 3, ecc.), prima di passare agli elementi predefiniti e a quelli con `tabindex="0"`.
|
||||
|
||||
È importante notare che quando l'ordine di tabulazione è impostato in questo modo, sovrascrive l'ordine predefinito (che utilizza il sorgente HTML). Questo potrebbe confondere gli utenti che si aspettano di iniziare la navigazione dall'inizio della pagina. Questa tecnica può essere necessaria in alcune circostanze, ma in termini di accessibilità fai attenzione prima di applicarla.
|
||||
|
||||
Ecco un esempio:
|
||||
|
||||
```html
|
||||
<div tabindex="1">I get keyboard focus, and I get it first!</div>
|
||||
```
|
||||
|
||||
```html
|
||||
<div tabindex="2">I get keyboard focus, and I get it second!</div>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat ha un campo di ricerca sulla sua pagina di Citazioni Motivazionali che prevede di posizionare in alto a destra con CSS. Vuole che l'`input` di ricerca e l'`input` di invio siano i primi due elementi nell'ordine di selezione. Aggiungi un attributo `tabindex` impostato a `1` all'`input` `search`, e un attributo `tabindex` impostato a `2` all'`input` `submit`.
|
||||
|
||||
Un'altra cosa da notare è che alcuni browser possono posizionarti al centro del tuo elenco di tabulazione quando viene fatto clic su un elemento. Alla pagina è stato aggiunto un elemento che assicura che inizierai sempre dal primo elemento dell'ordine di tabulazione.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe aggiungere un attributo `tabindex` al tag `input` di tipo `search`.
|
||||
|
||||
```js
|
||||
assert($('#search').attr('tabindex'));
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe aggiungere un attributo `tabindex` al tag `input` di tipo `submit`.
|
||||
|
||||
```js
|
||||
assert($('#submit').attr('tabindex'));
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe impostare l'attributo `tabindex` del tag `input` di tipo `search` ad un valore di 1.
|
||||
|
||||
```js
|
||||
assert($('#search').attr('tabindex') == '1');
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe impostare l'attributo `tabindex` del tag `input` di tipo `submit` a un valore di 2.
|
||||
|
||||
```js
|
||||
assert($('#submit').attr('tabindex') == '2');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<div tabindex="1" class="overlay"></div>
|
||||
<header>
|
||||
<h1>Even Deeper Thoughts with Master Camper Cat</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Blog</a></li>
|
||||
<li><a href="">Training</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<form>
|
||||
<label for="search">Search:</label>
|
||||
|
||||
|
||||
<input type="search" name="search" id="search">
|
||||
<input type="submit" name="submit" value="Submit" id="submit">
|
||||
|
||||
|
||||
</form>
|
||||
<h2>Inspirational Quotes</h2>
|
||||
<blockquote>
|
||||
<p>“There's no Theory of Evolution, just a list of creatures I've allowed to live.”<br>
|
||||
- Chuck Norris</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>“Wise men say forgiveness is divine, but never pay full price for late pizza.”<br>
|
||||
- TMNT</p>
|
||||
</blockquote>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
<style>
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0 !important;
|
||||
padding: 8px;
|
||||
}
|
||||
.overlay {
|
||||
margin: -8px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<div tabindex="1" class="overlay"></div>
|
||||
<header>
|
||||
<h1>Even Deeper Thoughts with Master Camper Cat</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Blog</a></li>
|
||||
<li><a href="">Training</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<form>
|
||||
<label for="search">Search:</label>
|
||||
|
||||
|
||||
<input tabindex="1" type="search" name="search" id="search">
|
||||
<input tabindex="2" type="submit" name="submit" value="Submit" id="submit">
|
||||
|
||||
|
||||
</form>
|
||||
<h2>Inspirational Quotes</h2>
|
||||
<blockquote>
|
||||
<p>“There's no Theory of Evolution, just a list of creatures I've allowed to live.”<br>
|
||||
- Chuck Norris</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>“Wise men say forgiveness is divine, but never pay full price for late pizza.”<br>
|
||||
- TMNT</p>
|
||||
</blockquote>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
<style>
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0 !important;
|
||||
padding: 8px;
|
||||
}
|
||||
.overlay {
|
||||
margin: -8px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 587d774e367417b2b2512aa0
|
||||
title: Inserire contenuti nell'elemento article
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp79S3'
|
||||
forumTopicId: 301029
|
||||
dashedName: wrap-content-in-the-article-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`article` è un altro dei nuovi elementi HTML5 che aggiungono significato semantico alla formattazione. `article` è un elemento di sezionamento ed è utilizzato per racchiudere contenuti indipendenti e autonomi. Il tag funziona bene con voci dei blog, post dei forum, o articoli di notizie.
|
||||
|
||||
Determinare se il contenuto può stare da solo è di solito una decisione a tua discrezione, ma è possibile utilizzare un paio di semplici test. Chiediti: se avessi rimosso tutto il contesto circostante, quel contenuto avrebbe ancora senso? Allo stesso modo, per il testo, il contenuto reggerebbe se fosse in un feed RSS?
|
||||
|
||||
Ricorda che le persone che utilizzano tecnologie assistive si basano su una formattazione organizzata e semanticamente significativa per capire meglio il tuo lavoro.
|
||||
|
||||
**Nota:** Anche l'elemento `section` è nuovo in HTML5, e ha un significato semantico leggermente diverso rispetto a `article`. L'`article` è per i contenuti autonomi e il `section` è per raggruppare i contenuti legati ad un tema. Possono essere utilizzati l'uno all'interno l'altro, se necessario. Ad esempio, se un libro è l'`article`, ogni capitolo è una `section`. Quando non c'è alcuna relazione tra gruppi di contenuti, allora si utilizza un `div`.
|
||||
|
||||
`<div>` - raggruppa i contenuti `<section>` - raggruppa contenuti legati ad un tema `<article>` - raggruppa contenuti indipendenti e autonomi
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat ha usato i tag `article` per racchiudere i post sulla sua pagina del blog, ma ha dimenticato di usarli intorno a quello superiore. Cambia il tag `div` in un tag `article`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe avere tre tag `article`.
|
||||
|
||||
```js
|
||||
assert($('article').length == 3);
|
||||
```
|
||||
|
||||
Il tuo codice non dovrebbe avere nessun tag `div`.
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<main>
|
||||
<div>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</div>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
<main>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,165 @@
|
||||
---
|
||||
id: 587d778b367417b2b2512aa7
|
||||
title: Inserire i pulsanti di opzione in un elemento fieldset per una migliore accessibilità
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJVefw'
|
||||
forumTopicId: 301030
|
||||
dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Il prossimo argomento sui moduli riguarda l'accessibilità dei pulsanti di opzione. Ad ogni scelta viene data un'etichetta (`label`) con un attributo `for` che la lega all' `id` dell'elemento corrispondente, come spiegato nell'ultima sfida. Poiché i pulsanti di opzione vengono spesso usati in un gruppo in cui l'utente deve sceglierne uno, c'è un modo per mostrare semanticamente che le scelte fanno parte di uno stesso set.
|
||||
|
||||
Il tag `fieldset` circonda l'intero raggruppamento dei pulsanti di opzione per ottenere questo risultato. Si usa spesso un tag `legend` per fornire una descrizione del raggruppamento, che gli screen reader leggono per ogni scelta nell'elemento `fieldset`.
|
||||
|
||||
I tag di raggruppamento `fieldset` e `legend` non sono necessari quando le scelte sono auto-esplicative, come una selezione di genere. In questi casi è sufficiente utilizzare un'etichetta `label` con l'attributo `for` per ogni pulsante radio.
|
||||
|
||||
Ecco un esempio:
|
||||
|
||||
```html
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Choose one of these three items:</legend>
|
||||
<input id="one" type="radio" name="items" value="one">
|
||||
<label for="one">Choice One</label><br>
|
||||
<input id="two" type="radio" name="items" value="two">
|
||||
<label for="two">Choice Two</label><br>
|
||||
<input id="three" type="radio" name="items" value="three">
|
||||
<label for="three">Choice Three</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Camper Cat vuole informazioni sul livello ninja dei suoi utenti quando si iscrivono alla sua mailing list. Ha aggiunto un set di pulsanti di opzione e ha imparato dalla nostra ultima lezione ad usare i tag `label` con degli attributi `for` per ogni scelta. Grande Camper Cat! Tuttavia, il suo codice ha ancora bisogno di qualche aiutino. Cambia il tag `div` che circonda i pulsanti di opzione in un tag `fieldset`, e cambia il tag `p` al suo interno in un tag `legend`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe avere un tag `fieldset` attorno all'insieme dei pulsanti di opzione.
|
||||
|
||||
```js
|
||||
assert($('fieldset').length == 1);
|
||||
```
|
||||
|
||||
L'elemento `fieldset` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/fieldset>/g) &&
|
||||
code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe avere un tag `legend` intorno al testo che chiede qual è il livello ninja dell'utente.
|
||||
|
||||
```js
|
||||
assert($('legend').length == 1);
|
||||
```
|
||||
|
||||
Il tuo codice non dovrebbe avere nessun tag `div`.
|
||||
|
||||
```js
|
||||
assert($('div').length == 0);
|
||||
```
|
||||
|
||||
Il tuo codice non dovrebbe più avere un tag `p` attorno al testo che chiede qual è il livello ninja dell'utente.
|
||||
|
||||
```js
|
||||
assert($('p').length == 4);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
<label for="email">Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
|
||||
<!-- Only change code below this line -->
|
||||
<div>
|
||||
<p>What level ninja are you?</p>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">Master</label>
|
||||
</div>
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Deep Thoughts with Master Camper Cat</h1>
|
||||
</header>
|
||||
<section>
|
||||
<form>
|
||||
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
|
||||
<label for="email">Email:</label>
|
||||
<input type="text" id="email" name="email">
|
||||
|
||||
<fieldset>
|
||||
<legend>What level ninja are you?</legend>
|
||||
<input id="newbie" type="radio" name="levels" value="newbie">
|
||||
<label for="newbie">Newbie Kitten</label><br>
|
||||
<input id="intermediate" type="radio" name="levels" value="intermediate">
|
||||
<label for="intermediate">Developing Student</label><br>
|
||||
<input id="master" type="radio" name="levels" value="master">
|
||||
<label for="master">Master</label>
|
||||
</fieldset>
|
||||
|
||||
<input type="submit" name="submit" value="Submit">
|
||||
</form>
|
||||
</section>
|
||||
<article>
|
||||
<h2>The Garfield Files: Lasagna as Training Fuel?</h2>
|
||||
<p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Defeating your Foe: the Red Dot is Ours!</h2>
|
||||
<p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
|
||||
</article>
|
||||
<img src="samuraiSwords.jpeg" alt="">
|
||||
<article>
|
||||
<h2>Is Chuck Norris a Cat Person?</h2>
|
||||
<p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
|
||||
</article>
|
||||
<footer>© 2018 Camper Cat</footer>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,154 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abe
|
||||
title: Aggiungere un effetto ombra ad un elemento in stile Card
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cvVZdUd'
|
||||
forumTopicId: 301031
|
||||
dashedName: add-a-box-shadow-to-a-card-like-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La proprietà `box-shadow` applica una o più ombre ad un elemento.
|
||||
|
||||
La proprietà `box-shadow` è definita dai seguenti valori:
|
||||
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
I valori `blur-radius` e `spread-radius` sono opzionali.
|
||||
|
||||
È possibile creare più ombre usando le virgole per separare le proprietà di ogni elemento `box-shadow`.
|
||||
|
||||
Ecco un esempio di CSS per creare ombre multiple con un po' di sfocatura, per lo più di colore nero e quasi trasparente:
|
||||
|
||||
```css
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
L'elemento adesso ha un id di `thumbnail`. Tramite questo selettore, utilizza i valori CSS nell'esempio sopra per posizionare una `box-shadow` sulla card.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe aggiungere una proprietà `box-shadow` per l'id `thumbnail`.
|
||||
|
||||
```js
|
||||
assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g));
|
||||
```
|
||||
|
||||
Dovresti usare il CSS nell'esempio per assegnare il valore di `box-shadow`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\)\s*?,\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,146 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abc
|
||||
title: Regolare il colore di sfondo del testo
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDqwA6'
|
||||
forumTopicId: 301032
|
||||
dashedName: adjust-the-background-color-property-of-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Invece di regolare lo sfondo generale o il colore del testo per rendere il primo piano facilmente leggibile, puoi aggiungere un `background-color` all'elemento che contiene il testo che vuoi enfatizzare. Questa sfida utilizza il formato `rgba()` invece dei codici esadecimali `hex` o il classico `rgb()`.
|
||||
|
||||
<blockquote>rgba sta per:<br> r = rosso<br> g = verde <br>b = blu <br>a = alfa/livello di opacità</blockquote>
|
||||
|
||||
I valori RGB possono variare da 0 a 255. Il valore alfa può variare da 1, che è rappresenta un colore completamente opaco, a 0, che invece è completamente trasparente. `rgba()` è ottimo da usare in questo caso, in quanto consente di regolare l'opacità. Ciò significa che non è necessario coprire completamente lo sfondo.
|
||||
|
||||
Per questa sfida utilizzerai `background-color: rgba(45, 45, 45, 0.1)`. Questo produce un colore grigio scuro che è quasi trasparente, per via del basso valore di opacità di 0.1.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Per far risaltare ulteriormente il testo, aggiusta il `background-color` dell'elemento `h4` al valore `rgba()` indicato sopra.
|
||||
|
||||
Inoltre, sempre per il tag `h4`, rimuovi la proprietà `height` e aggiungi un `padding` di 10 px.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe aggiungere una proprietà `background-color` all'elemento `h4`, impostata su `rgba(45, 45, 45, 0.1)`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
/(background-color|background):rgba\(45,45,45,0?\.1\)(;?}|;)/gi.test(
|
||||
code.replace(/\s/g, '')
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe aggiungere una proprietà `padding` all'elemento `h4` e impostarla a 10 pixel.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h4').css('padding-top') == '10px' &&
|
||||
$('h4').css('padding-right') == '10px' &&
|
||||
$('h4').css('padding-bottom') == '10px' &&
|
||||
$('h4').css('padding-left') == '10px'
|
||||
);
|
||||
```
|
||||
|
||||
La proprietà `height` dell'elemento `h4` dovrebbe essere rimossa.
|
||||
|
||||
```js
|
||||
assert(!($('h4').css('height') == '25px'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,130 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad3
|
||||
title: Cambiare i colori dei vari elementi in colori complementari
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cWmPpud'
|
||||
forumTopicId: 301033
|
||||
dashedName: adjust-the-color-of-various-elements-to-complementary-colors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La sfida Colori Complementari ha mostrato che colori opposti sul cerchio cromatico possono apparire più vibranti quando posizionati fianco a fianco. Tuttavia, il forte contrasto visivo può essere sgradevole se è troppo utilizzato su un sito web, e a volte può rendere il testo più difficile da leggere se è posizionato su uno sfondo di colore complementare. In pratica, uno dei colori è solitamente dominante e il suo complementare viene utilizzato per portare l'attenzione visiva su determinati contenuti della pagina.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Questa pagina userà una tonalità color foglia di tè (`#09A7A1`) come colore dominante e il suo complementare arancione (`#FF790E`) per evidenziare visivamente i pulsanti di iscrizione. Cambia il `background-color` sia dell'`header` che del `footer` da nero a foglia di tè. Dopodiché cambia anche il `color` del testo `h2` a foglia di tè. Infine, cambia il `background-color` del `button` con il colore arancione.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `header` dovrebbe avere un `background-color` di #09A7A1.
|
||||
|
||||
```js
|
||||
assert($('header').css('background-color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
L'elemento `footer` dovrebbe avere un `background-color` di #09A7A1.
|
||||
|
||||
```js
|
||||
assert($('footer').css('background-color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
L'elemento `h2` dovrebbe avere un `color` di #09A7A1.
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
L'elemento `button` dovrebbe avere un `background-color` di #FF790E.
|
||||
|
||||
```js
|
||||
assert($('button').css('background-color') == 'rgb(255, 121, 14)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
header {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 0.25em;
|
||||
}
|
||||
h2 {
|
||||
color: black;
|
||||
}
|
||||
button {
|
||||
background-color: white;
|
||||
}
|
||||
footer {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 0.5em;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<h1>Cooking with FCC!</h1>
|
||||
</header>
|
||||
<main>
|
||||
<article>
|
||||
<h2>Machine Learning in the Kitchen</h2>
|
||||
<p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
|
||||
<button>Sign Up</button>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Bisection Vegetable Chopping</h2>
|
||||
<p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
|
||||
<button>Sign Up</button>
|
||||
</article>
|
||||
</main>
|
||||
<br>
|
||||
<footer>© 2018 FCC Kitchen</footer>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
header {
|
||||
background-color: #09A7A1;
|
||||
color: white;
|
||||
padding: 0.25em;
|
||||
}
|
||||
h2 {
|
||||
color: #09A7A1;
|
||||
}
|
||||
button {
|
||||
background-color: #FF790E;
|
||||
}
|
||||
footer {
|
||||
background-color: #09A7A1;
|
||||
color: white;
|
||||
padding: 0.5em;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<h1>Cooking with FCC!</h1>
|
||||
</header>
|
||||
<main>
|
||||
<article>
|
||||
<h2>Machine Learning in the Kitchen</h2>
|
||||
<p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
|
||||
<button>Sign Up</button>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Bisection Vegetable Chopping</h2>
|
||||
<p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
|
||||
<button>Sign Up</button>
|
||||
</article>
|
||||
</main>
|
||||
<br>
|
||||
<footer>© 2018 FCC Kitchen</footer>
|
||||
```
|
||||
@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab5
|
||||
title: Regolare l'altezza di un elemento usando la proprietà height
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDaDTN'
|
||||
forumTopicId: 301034
|
||||
dashedName: adjust-the-height-of-an-element-using-the-height-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In CSS puoi specificare l'altezza di un elemento usando la proprietà `height`, simile alla proprietà `width`. Ecco un esempio che imposta l'altezza di un'immagine a 20px:
|
||||
|
||||
```css
|
||||
img {
|
||||
height: 20px;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi una proprietà `height` al tag `h4` e impostala a 25px.
|
||||
|
||||
**Nota:** Potrebbe essere necessario avere uno zoom del 100% per superare il test di questa sfida.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe cambiare la proprietà `height` del tag `h4` in un valore di 25 pixel.
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round(document.querySelector('h4').getBoundingClientRect().height) ===
|
||||
25 &&
|
||||
/h4{\S*height:25px(;\S*}|})/.test($('style').text().replace(/\s/g, ''))
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 587d781d367417b2b2512ac8
|
||||
title: Regolare lo stato di hover di un tag di ancoraggio
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cakRGcm'
|
||||
forumTopicId: 301035
|
||||
dashedName: adjust-the-hover-state-of-an-anchor-tag
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Questa sfida toccherà l'uso delle pseudo-classi. Una pseudo-classe è una parola chiave che può essere aggiunta ai selettori, al fine di selezionare uno stato specifico dell'elemento.
|
||||
|
||||
Ad esempio, lo stile di un tag di ancoraggio può essere cambiato per il suo stato di hover (cioè lo stato in cui il puntatore del mouse ci passa sopra) usando il selettore di pseudo-classe `:hover`. Ecco il CSS per cambiare il `color` del tag di ancoraggio in rosso durante il suo stato di hover:
|
||||
|
||||
```css
|
||||
a:hover {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
L'editor ha una regola CSS per stilizzare tutti i tag `a` in nero. Aggiungi una regola in modo che quando l'utente passa sopra il tag `a`, il suo `color` diventi blu.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il `color` del tag di ancoraggio dovrebbe rimanere nero, aggiungi solo regole CSS per lo stato di `:hover`.
|
||||
|
||||
```js
|
||||
assert($('a').css('color') == 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
Il tag di ancoraggio dovrebbe avere un `color` blu al passaggio del mouse.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/a:hover\s*?{\s*?color:\s*?(blue|rgba\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?,\s*?1\s*?\)|#00F|rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\))\s*?;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<a href="https://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
a:hover {
|
||||
color: rgba(0,0,255,1);
|
||||
}
|
||||
</style>
|
||||
<a href="https://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
|
||||
```
|
||||
@ -0,0 +1,129 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad4
|
||||
title: Regolare la tonalità di un colore
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp38TZ'
|
||||
forumTopicId: 301036
|
||||
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.
|
||||
|
||||
**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.
|
||||
|
||||
**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.
|
||||
|
||||
**Luminosità** è la quantità di bianco o nero in un colore. Viene data una percentuale che va dallo 0% (nero) al 100% (bianco), dove il 50% è il colore normale.
|
||||
|
||||
Ecco alcuni esempi di utilizzo dell'`hsl()` con colori di luminosità normali completamente saturati:
|
||||
|
||||
<table class='table table-striped'><thead><tr><th>Colore</th><th>HSL</th></tr></thead><tbody><tr><td>rosso</td><td>hsl(0, 100%, 50%)</td></tr><tr><td>giallo</td><td>hsl(60, 100%, 50%)</td></tr><tr><td>verde</td><td>hsl(120, 100%, 50%)</td></tr><tr><td>ciano</td><td>hsl(180, 100%, 50%)</td></tr><tr><td>blu</td><td>hsl(240, 100%, 50%)</td></tr><tr><td>magenta</td><td>hsl(300, 100%, 50%)</td></tr></tbody></table>
|
||||
|
||||
# --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.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe utilizzare la proprietà `hsl()` per dichiarare il colore `green`.
|
||||
|
||||
```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`.
|
||||
|
||||
```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`.
|
||||
|
||||
```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).
|
||||
|
||||
```js
|
||||
assert($('.green').css('background-color') == 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
L'elemento `div` con classe `cyan` dovrebbe avere un `background-color` ciano (cyan).
|
||||
|
||||
```js
|
||||
assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
L'elemento `div` con classe `blue` dovrebbe avere un `background-color` blu (blu).
|
||||
|
||||
```js
|
||||
assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="green"></div>
|
||||
<div class="cyan"></div>
|
||||
<div class="blue"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: hsl(120, 100%, 50%);
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: hsl(180, 100%, 50%);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<div class="green"></div>
|
||||
<div class="cyan"></div>
|
||||
<div class="blue"></div>
|
||||
```
|
||||
@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abd
|
||||
title: Regolare la dimensione di un'intestazione rispetto a quella di un paragrafo
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bRPTz'
|
||||
forumTopicId: 301037
|
||||
dashedName: adjust-the-size-of-a-header-versus-a-paragraph-tag
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La dimensione del carattere dei tag di intestazione (da `h1` a `h6`) dovrebbe essere generalmente più grande della dimensione del carattere dei tag di paragrafo. Questo rende più facile per l'utente capire visivamente il layout e il livello di importanza di ogni elemento della pagina. Si utilizza la proprietà `font-size` per regolare la dimensione del testo in un elemento.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Per rendere l'intestazione significativamente più grande del paragrafo, porta `font-size` del tag `h4` a 27 pixel.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe aggiungere una proprietà `font-size` all'elemento `h4`, impostata a 27 pixel.
|
||||
|
||||
```js
|
||||
assert($('h4').css('font-size') == '27px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad5
|
||||
title: Regolare la tonalità di un colore
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDJvT7'
|
||||
forumTopicId: 301038
|
||||
dashedName: adjust-the-tone-of-a-color
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'opzione `hsl()` in CSS rende facile anche regolare la tonalità di un colore. Mescolando il bianco con una tonalità pura si crea una versione più delicata di quel colore, e aggiungendo del nero lo si scurisce. In alternativa, si può produrre una tonalità aggiungendo grigio o tinteggiando e ombreggiando. Ricorda che la 's' e la 'l' di `hsl()` stanno per saturazione e luminosità, rispettivamente. La percentuale di saturazione cambia la quantità di grigio e la percentuale di luminosità determina quanto bianco o nero ci sarà nel colore. Questo è utile quando hai una tonalità di base che ti piace, ma hai bisogno di diverse varianti di essa.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Tutti gli elementi hanno un `background-color` predefinito `transparent`. Il nostro elemento `nav` sembra avere uno sfondo `cyan`, perché l'elemento dietro di esso ha un `background-color` impostato su `cyan`. Aggiungi un `background-color` all'elemento `nav` in modo che usi la stessa tonalità `cyan`, ma abbia `80%` di saturazione e `25%` di luminosità per cambiarne tono e ombra.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `nav` dovrebbe avere un `background-color` del colore ciano regolato utilizzando la proprietà `hsl()`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
header {
|
||||
background-color: hsl(180, 90%, 35%);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
nav {
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-indent: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
</style>
|
||||
|
||||
<header>
|
||||
<h1>Cooking with FCC!</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Classes</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
header {
|
||||
background-color: hsl(180, 90%, 35%);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: hsl(180, 80%, 25%);
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-indent: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<h1>Cooking with FCC!</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Classes</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
```
|
||||
@ -0,0 +1,115 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab4
|
||||
title: Regolare la larghezza di un elemento usando la proprietà width
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cvVLPtN'
|
||||
forumTopicId: 301039
|
||||
dashedName: adjust-the-width-of-an-element-using-the-width-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In CSS è possibile specificare la larghezza di un elemento utilizzando la proprietà `width`. I valori possono essere forniti in unità di lunghezza relativa (come `em`), unità di lunghezza assoluta (come `px`), o come percentuale dell'elemento genitore (parent). Ecco un esempio che imposta la larghezza di un'immagine a 220px:
|
||||
|
||||
```css
|
||||
img {
|
||||
width: 220px;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi una proprietà `width` all'intera card e impostala ad un valore assoluto di 245px. Usa la classe `fullCard` per selezionare l'elemento.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe portare la proprietà `width` della card a 245 pixel utilizzando il selettore di classe `fullCard`.
|
||||
|
||||
```js
|
||||
const fullCard = code.match(/\.fullCard\s*{[\s\S]+?[^}]}/g);
|
||||
assert(
|
||||
fullCard &&
|
||||
/width\s*:\s*245px\s*(;|})/gi.test(fullCard[0]) &&
|
||||
$('.fullCard').css('maxWidth') === 'none'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.fullCard {
|
||||
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,141 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae5
|
||||
title: Animare gli elementi con velocità variabili
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cZ89WA4'
|
||||
forumTopicId: 301040
|
||||
dashedName: animate-elements-at-variable-rates
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ci sono più modi per modificare la velocità di animazione di elementi animati in modo simile. Finora, questo è stato ottenuto applicando una proprietà `animation-iteration-count` e impostando le regole `@keyframes`.
|
||||
|
||||
Per fare un esempio, l'animazione a destra è composta da due stelle che diminuiscono di dimensione e opacità al 20% nella regola `@keyframes`, e questo crea l'animazione scintillio. È possibile modificare la regola `@keyframes` per uno degli elementi in modo che le stelle scintillino con ritmi diversi.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Modifica la velocità dell'animazione per l'elemento di classe `star-1` portando la sua regola `@keyframes` al 50%.
|
||||
|
||||
# --hints--
|
||||
|
||||
La regola `@keyframes` per la classe `star-1` dovrebbe essere 50%.
|
||||
|
||||
```js
|
||||
assert(code.match(/twinkle-1\s*?{\s*?50%/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.stars {
|
||||
background-color: white;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
margin-top: 15%;
|
||||
margin-left: 60%;
|
||||
animation-name: twinkle-1;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
margin-top: 25%;
|
||||
margin-left: 25%;
|
||||
animation-name: twinkle-2;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
@keyframes twinkle-1 {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes twinkle-2 {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="back"></div>
|
||||
<div class="star-1 stars"></div>
|
||||
<div class="star-2 stars"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.stars {
|
||||
background-color: white;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
margin-top: 15%;
|
||||
margin-left: 60%;
|
||||
animation-name: twinkle-1;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
margin-top: 25%;
|
||||
margin-left: 25%;
|
||||
animation-name: twinkle-2;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
@keyframes twinkle-1 {
|
||||
50% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes twinkle-2 {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||
}
|
||||
</style>
|
||||
<div id="back"></div>
|
||||
<div class="star-1 stars"></div>
|
||||
<div class="star-2 stars"></div>
|
||||
```
|
||||
@ -0,0 +1,107 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae3
|
||||
title: Animare gli elementi ininterrottamente usando un numero di animazioni infinito
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJDVfq'
|
||||
forumTopicId: 301041
|
||||
dashedName: animate-elements-continually-using-an-infinite-animation-count
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Le sfide precedenti hanno mostrato l'utilizzo di alcune proprietà di animazione e la regola `@keyframes`. Un'altra proprietà di animazione è la `animation-iteration-count`, che consente di controllare quante volte si desidera eseguire il ciclo di animazione. Ecco un esempio:
|
||||
|
||||
```css
|
||||
animation-iteration-count: 3;
|
||||
```
|
||||
|
||||
In questo caso l'animazione si fermerà dopo essere stata eseguita 3 volte, ma è possibile far eseguire continuamente l'animazione impostando quel valore a `infinite`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Per continuare a far rimbalzare la palla a destra in un ciclo continuo, porta la proprietà `animation-iteration-count` a `infinite`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La proprietà `animation-iteration-count` dovrebbe avere un valore di `infinite`.
|
||||
|
||||
```js
|
||||
assert($('#ball').css('animation-iteration-count') == 'infinite');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
#ball {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
animation-name: bounce;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: 3;
|
||||
}
|
||||
|
||||
@keyframes bounce{
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
50% {
|
||||
top: 249px;
|
||||
width: 130px;
|
||||
height: 70px;
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="ball"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#ball {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
animation-name: bounce;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce{
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
50% {
|
||||
top: 249px;
|
||||
width: 130px;
|
||||
height: 70px;
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="ball"></div>
|
||||
```
|
||||
@ -0,0 +1,155 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae6
|
||||
title: Animare più elementi con velocità diverse
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpWZc9'
|
||||
forumTopicId: 301042
|
||||
dashedName: animate-multiple-elements-at-variable-rates
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Nella sfida precedente, hai modificato le velocità di animazione per due elementi animati in modo simile modificando le loro regole `@keyframes`. È possibile raggiungere lo stesso obiettivo manipolando l'`animation-duration` (durata dell'animazione) di più elementi.
|
||||
|
||||
Nell'animazione in esecuzione nell'editor di codice, ci sono tre stelle nel cielo che scintillano alla stessa velocità in un ciclo continuo. Per farle scintillare a velocità diverse, è possibile impostare la proprietà `animation-duration` a valori diversi per ogni elemento.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Imposta la `animation-duration` degli elementi di classe `star-1`, `star-2` e `star-3` rispettivamente a 1s, 0.9 s e 1.1s.
|
||||
|
||||
# --hints--
|
||||
|
||||
La proprietà `animation-duration` per la stella con classe `star-1` dovrebbe rimanere a 1s.
|
||||
|
||||
```js
|
||||
assert($('.star-1').css('animation-duration') == '1s');
|
||||
```
|
||||
|
||||
La proprietà `animation-duration` per la stella con classe `star-2` dovrebbe essere 0.9s.
|
||||
|
||||
```js
|
||||
assert($('.star-2').css('animation-duration') == '0.9s');
|
||||
```
|
||||
|
||||
La proprietà `animation-duration` per la stella con classe `star-3` dovrebbe essere 1.1s.
|
||||
|
||||
```js
|
||||
assert($('.star-3').css('animation-duration') == '1.1s');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.stars {
|
||||
background-color: white;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
margin-top: 15%;
|
||||
margin-left: 60%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
margin-top: 25%;
|
||||
margin-left: 25%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
.star-3 {
|
||||
margin-top: 10%;
|
||||
margin-left: 50%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="back"></div>
|
||||
<div class="star-1 stars"></div>
|
||||
<div class="star-2 stars"></div>
|
||||
<div class="star-3 stars"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.stars {
|
||||
background-color: white;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
margin-top: 15%;
|
||||
margin-left: 60%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
margin-top: 25%;
|
||||
margin-left: 25%;
|
||||
animation-duration: 0.9s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
.star-3 {
|
||||
margin-top: 10%;
|
||||
margin-left: 50%;
|
||||
animation-duration: 1.1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||
}
|
||||
</style>
|
||||
<div id="back"></div>
|
||||
<div class="star-1 stars"></div>
|
||||
<div class="star-2 stars"></div>
|
||||
<div class="star-3 stars"></div>
|
||||
```
|
||||
@ -0,0 +1,56 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ad0
|
||||
title: Centrare un elemento orizzontalmente usando la proprietà margin
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLJqU4'
|
||||
forumTopicId: 301043
|
||||
dashedName: center-an-element-horizontally-using-the-margin-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Un'altra tecnica di posizionamento è quella di centrare un blocco orizzontalmente. Un modo per farlo è quello di impostare il suo `margin` ad un valore auto.
|
||||
|
||||
Questo metodo funziona anche per le immagini. Per impostazione predefinita, le immagini sono elementi in linea, ma possono essere cambiate in elementi di tipo blocco impostando la proprietà `display` su `block`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Centra il `div` sulla pagina aggiungendo una proprietà `margin` con un valore `auto`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il `div` dovrebbe avere un `margin` impostato su `auto`.
|
||||
|
||||
```js
|
||||
assert(code.match(/margin:\s*?auto;/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512ac9
|
||||
title: Cambiare la posizione relativa di un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/czVmMtZ'
|
||||
forumTopicId: 301044
|
||||
dashedName: change-an-elements-relative-position
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Il CSS tratta ogni elemento HTML come un riquadro a sé, il che di solito viene indicato come il <dfn>Box Model CSS</dfn>. Gli elementi a livello di blocco iniziano automaticamente su una nuova riga (pensa a intestazioni, paragrafi e div) mentre gli elementi in linea stanno all'interno del contenuto circostante (come immagini o span). Il layout predefinito degli elementi è chiamato il <dfn>flusso normale</dfn> di un documento, ma CSS offre la proprietà position per sovrascriverlo.
|
||||
|
||||
Quando la posizione di un elemento è impostata a `relative`, ti è permesso specificare come il CSS dovrebbe spostarlo *relativamente* alla sua posizione corrente nel flusso normale della pagina. Si abbina alle proprietà CSS di offset `left` o `right`, e `top` o `bottom`. Queste dicono di quanti pixel, punti percentuali, o em spostare l'elemento *da* dove è normalmente posizionato. Il seguente esempio sposta il paragrafo di 10 pixel dal basso:
|
||||
|
||||
```css
|
||||
p {
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
Cambiare la posizione di un elemento a relative non lo rimuove dal flusso normale - altri elementi intorno ad esso si comportano ancora come se quell'elemento fosse nella sua posizione predefinita.
|
||||
|
||||
**Nota:** Il posizionamento ti dà molta flessibilità e potere sul layout visuale di una pagina. È bene ricordare che indipendentemente dalla posizione degli elementi, il markup HTML sottostante dovrebbe essere organizzato ed avere senso quando letto dall'alto verso il basso. Questo è il modo in cui gli utenti con disabilità visive (che si basano su dispositivi assistivi come gli screen reader) accedono ai tuoi contenuti.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Cambia la `position` di `h2` a `relative`, e usa un offset CSS per spostarlo a 15 pixel dal `top` di dove si trova nel flusso normale. Nota che non vi è alcun impatto sulle posizioni degli elementi h1 e p circostanti.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `h2` dovrebbe avere una proprietà `position` impostata a `relative`.
|
||||
|
||||
```js
|
||||
assert($('h2').css('position') == 'relative');
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe utilizzare un offset CSS per posizionare relativamente `h2` a 15px dal `top` rispetto a dove si troverebbe normalmente.
|
||||
|
||||
```js
|
||||
assert($('h2').css('top') == '15px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>On Being Well-Positioned</h1>
|
||||
<h2>Move me!</h2>
|
||||
<p>I still think the h2 is where it normally sits.</p>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
position: relative;
|
||||
top: 15px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>On Being Well-Positioned</h1>
|
||||
<h2>Move me!</h2>
|
||||
<p>I still think the h2 is where it normally sits.</p>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,127 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae7
|
||||
title: Cambiare il tempo di animazione con le keyword
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cJKvwCM'
|
||||
forumTopicId: 301045
|
||||
dashedName: change-animation-timing-with-keywords
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Nelle animazioni CSS, la proprietà `animation-timing-function` controlla quanto velocemente un elemento animato cambia durante l'animazione. Se l'animazione è un'auto che si sposta dal punto A al punto B in un dato tempo (la tua `animation-duration`), la `animation-timing-function` dice come l'auto accelera e decelera durante la guida.
|
||||
|
||||
Esiste un certo numero di parole chiave (keyword) predefinite disponibili per le opzioni più comuni. Ad esempio, il valore predefinito è `ease`, che inizia lentamente, accelera nel mezzo, e poi rallenta di nuovo alla fine. Altre opzioni includono `ease-out`, che è veloce all'inizio e poi rallenta, `ease-in`, che è lento all'inizio e accelera alla fine, o `linear`, che applica una velocità di animazione costante per tutta la durata.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Per gli elementi con id `ball1` e `ball2`, aggiungi una proprietà `animation-timing-function` ad ognuno e imposta `#ball1` a `linear` e `#ball2` a `ease-out`. Nota la differenza tra il modo in cui gli elementi si muovono durante l'animazione ma terminano insieme, poiché condividono la stessa `animation-duration` di 2 secondi.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il valore della proprietà `animation-timing-function` per l'elemento con id `ball1` dovrebbe essere `linear`.
|
||||
|
||||
```js
|
||||
const ball1Animation = __helpers.removeWhiteSpace(
|
||||
$('#ball1').css('animation-timing-function')
|
||||
);
|
||||
assert(ball1Animation == 'linear' || ball1Animation == 'cubic-bezier(0,0,1,1)');
|
||||
```
|
||||
|
||||
Il valore della proprietà `animation-timing-function` per l'elemento con id `ball2` dovrebbe essere `ease-out`.
|
||||
|
||||
```js
|
||||
const ball2Animation = __helpers.removeWhiteSpace(
|
||||
$('#ball2').css('animation-timing-function')
|
||||
);
|
||||
assert(
|
||||
ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
.balls {
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#ball1 {
|
||||
left:27%;
|
||||
|
||||
}
|
||||
#ball2 {
|
||||
left:56%;
|
||||
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="balls" id="ball1"></div>
|
||||
<div class="balls" id="ball2"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls {
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#ball1 {
|
||||
left:27%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#ball2 {
|
||||
left:56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id="ball1"></div>
|
||||
<div class="balls" id="ball2"></div>
|
||||
```
|
||||
@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512acf
|
||||
title: Cambiare la posizione degli elementi sovrapposti con la proprietà z-index
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM94aHk'
|
||||
forumTopicId: 301046
|
||||
dashedName: change-the-position-of-overlapping-elements-with-the-z-index-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Quando gli elementi sono posizionati in sovrapposizione (ad es. usando `position: absolute | relative | fixed | sticky`), l'elemento che viene dopo nel markup HTML apparirà, per impostazione predefinita, in cima agli altri elementi. Tuttavia, la proprietà `z-index` può specificare l'ordine di come gli elementi sono impilati l'uno sull'altro. Deve essere un numero intero (non un decimale quindi), e valori superiori per la proprietà `z-index` di un elemento lo spostano più in alto nella pila rispetto a quelli con valori inferiori.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi una proprietà `z-index` all'elemento con la classe di nome `first` (il rettangolo rosso) e impostalo su un valore di 2 in modo che copra l'altro elemento (rettangolo blu).
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento con classe `first` dovrebbe avere un valore `z-index` pari a 2.
|
||||
|
||||
```js
|
||||
assert($('.first').css('z-index') == '2');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 60%;
|
||||
height: 200px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.first {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
.second {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="first"></div>
|
||||
<div class="second"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 60%;
|
||||
height: 200px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.first {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
.second {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
<div class="first"></div>
|
||||
<div class="second"></div>
|
||||
```
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad6
|
||||
title: Creare un gradiente lineare con CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cg4dpt9'
|
||||
forumTopicId: 301047
|
||||
dashedName: create-a-gradual-css-linear-gradient
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'applicazione di un colore sugli elementi HTML non è limitata a una tonalità piatta. CSS fornisce la possibilità di utilizzare delle transizioni di colore, conosciute come gradienti, sugli elementi. Questo è possibile tramite la funzione `linear-gradient()` della proprietà `background`. Questa è la sintassi generale:
|
||||
|
||||
```css
|
||||
background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
|
||||
```
|
||||
|
||||
Il primo argomento specifica la direzione da cui inizia la transizione del colore - può essere indicato in gradi, dove `90deg` crea un gradiente orizzontale (da sinistra a destra) e `45deg` crea un gradiente diagonale (dal basso a sinistra all'alto a destra). Gli argomenti seguenti specificano l'ordine dei colori usati nel gradiente.
|
||||
|
||||
Esempio:
|
||||
|
||||
```css
|
||||
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Utilizza un `linear-gradient()` per il `background` dell'elemento `div`, e impostalo per cambiare il colore da `#CCFFFF` a `#FFCCCC` lungo una direzione di 35 gradi.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `div` dovrebbe avere un `background` di tipo `linear-gradient` con la direzione e i colori specificati.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div')
|
||||
.css('background-image')
|
||||
.match(
|
||||
/linear-gradient\(35deg, rgb\(204, 255, 255\), rgb\(255, 204, 204\)\)/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
border-radius: 20px;
|
||||
width: 70%;
|
||||
height: 400px;
|
||||
margin: 50px auto;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
border-radius: 20px;
|
||||
width: 70%;
|
||||
height: 400px;
|
||||
margin: 50px auto;
|
||||
background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512add
|
||||
title: Creare una grafica usando CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDWPs6'
|
||||
forumTopicId: 301048
|
||||
dashedName: create-a-graphic-using-css
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Gestendo diversi selettori e proprietà, è possibile creare forme interessanti. Una delle più facili da provare è la forma a mezzaluna. Per questa sfida devi lavorare con la proprietà `box-shadow`, che imposta l'ombra di un elemento, e con la proprietà `border-radius` che controlla l'arrotondamento degli angoli dell'elemento.
|
||||
|
||||
Creerai un oggetto rotondo trasparente con un'ombra netta leggermente sfalsata sul lato - l'ombra sarà la forma della luna che vedi.
|
||||
|
||||
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.
|
||||
|
||||
# --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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il valore della proprietà `background-color` dovrebbe essere impostato su `transparent`.
|
||||
|
||||
```js
|
||||
assert(code.match(/background-color:\s*?transparent;/gi));
|
||||
```
|
||||
|
||||
Il valore della proprietà `border-radius` dovrebbe essere impostato a `50%`.
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.center {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: blue;
|
||||
border-radius: 0px;
|
||||
box-shadow: 25px 10px 10px 10px green;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="center"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.center {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: transparent;
|
||||
border-radius: 50%;
|
||||
box-shadow: 25px 10px 0 0 blue;
|
||||
}
|
||||
</style>
|
||||
<div class="center"></div>
|
||||
```
|
||||
@ -0,0 +1,122 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abb
|
||||
title: Creare una linea orizzontale usando l'elemento hr
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bR8t7'
|
||||
forumTopicId: 301049
|
||||
dashedName: create-a-horizontal-line-using-the-hr-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
È possibile utilizzare il tag `hr` per aggiungere una linea orizzontale che attraversi la larghezza del suo elemento contenitore. Questo può essere usato per definire un cambio di argomento o per separare visivamente gruppi di contenuti.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi un tag `hr` sotto il tag `h4` che contiene il titolo della card.
|
||||
|
||||
**Nota:** In HTML, `hr` è un tag a chiusura automatica, e quindi non ha bisogno di un tag di chiusura separato.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe aggiungere un tag `hr` al markup.
|
||||
|
||||
```js
|
||||
assert($('hr').length == 1);
|
||||
```
|
||||
|
||||
Il tag `hr` dovrebbe stare tra il titolo e il paragrafo.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4><s>Google</s>Alphabet</h4>
|
||||
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4><s>Google</s>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,146 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512ade
|
||||
title: Creare forme più complesse utilizzando CSS e HTML
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPpz4fr'
|
||||
forumTopicId: 301050
|
||||
dashedName: create-a-more-complex-shape-using-css-and-html
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Una delle forme più comuni al mondo è la forma del cuore, e in questa sfida ne creerai una utilizzando solo CSS. Per prima cosa però è necessario capire gli pseudo-elementi `::before` e `::after`. Questi pseudo-elementi sono usati per aggiungere qualcosa prima o dopo un elemento selezionato. Nell'esempio seguente, uno pseudo-elemento `::before` viene utilizzato per aggiungere un rettangolo a un elemento di classe `heart`:
|
||||
|
||||
```css
|
||||
.heart::before {
|
||||
content: "";
|
||||
background-color: yellow;
|
||||
border-radius: 25%;
|
||||
position: absolute;
|
||||
height: 50px;
|
||||
width: 70px;
|
||||
top: -50px;
|
||||
left: 5px;
|
||||
}
|
||||
```
|
||||
|
||||
Affinché gli pseudo-elementi `::before` e `::after` funzionino correttamente, devono avere una proprietà `content` (contenuto) definita. Questa proprietà viene solitamente utilizzata per aggiungere cose come una foto o un testo all'elemento selezionato. Quando gli pseudo-elementi `::before` e `::after` vengono utilizzati per creare forme, la proprietà `content` è ancora obbligatoria, ma viene impostata su una stringa vuota. Nell'esempio precedente, l'elemento con la classe `heart` ha uno pseudo-elemento `::before` che produce un rettangolo giallo con altezza e larghezza di `50px` e `70px` rispettivamente. Questo rettangolo ha angoli arrotondati a causa del `border-radius` al 25% ed è posizionato in modo assoluto a `5px` da sinistra e `50px` sopra la parte superiore dell'elemento.
|
||||
|
||||
# --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%.
|
||||
|
||||
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.
|
||||
|
||||
# --hints--
|
||||
|
||||
La proprietà `background-color` del selettore `heart::after` dovrebbe essere `pink`.
|
||||
|
||||
```js
|
||||
const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0];
|
||||
assert(
|
||||
/({|;)\s*background-color\s*:\s*pink\s*(;|})/g.test(heartAfter)
|
||||
);
|
||||
```
|
||||
|
||||
Il `border-radius` del selettore `heart::after` dovrebbe essere del 50%.
|
||||
|
||||
```js
|
||||
assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
|
||||
```
|
||||
|
||||
La proprietà `transform` per la classe `heart` dovrebbe utilizzare una funzione `rotate()` impostata a -45 gradi.
|
||||
|
||||
```js
|
||||
assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
|
||||
```
|
||||
|
||||
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));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: ;
|
||||
}
|
||||
.heart::after {
|
||||
background-color: blue;
|
||||
content: "";
|
||||
border-radius: 25%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart::before {
|
||||
content: ;
|
||||
background-color: pink;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
</style>
|
||||
<div class="heart"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.heart::after {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart::before {
|
||||
content: "";
|
||||
background-color: pink;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
</style>
|
||||
<div class="heart"></div>
|
||||
```
|
||||
@ -0,0 +1,136 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae1
|
||||
title: Creare movimento usando l'animazione CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c7amZfW'
|
||||
forumTopicId: 301051
|
||||
dashedName: create-movement-using-css-animation
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Quando gli elementi hanno una `position` specificata, come `fixed` o `relative`, le proprietà di offset CSS `right`, `left`, `top`e `bottom` possono essere utilizzate nelle regole di animazione per creare il movimento.
|
||||
|
||||
Come mostrato nell'esempio qui sotto, puoi spingere l'elemento verso il basso e poi verso l'alto impostando la proprietà `top` del keyframe `50%` a 50px, ma settandola a 0px per il primo (`0%`) e l'ultimo (`100%`) keyframe.
|
||||
|
||||
```css
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: blue;
|
||||
top: 0px;
|
||||
}
|
||||
50% {
|
||||
background-color: green;
|
||||
top: 50px;
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi un movimento orizzontale all'animazione del `div`. Utilizzando la proprietà offset `left`, aggiungila alla regola `@keyframes` in modo che l'arcobaleno inizi a 0 pixel allo `0%`, si sposti a 25 pixel al `50%` e termini a -25 pixel al `100%`. Non sostituire la proprietà `top` nell'editor - l'animazione dovrebbe avere un movimento sia verticale che orizzontale.
|
||||
|
||||
# --hints--
|
||||
|
||||
La regola `@keyframes` per `0%` dovrebbe utilizzare l'offset `left` a 0px.
|
||||
|
||||
```js
|
||||
assert(code.match(/[^50]0%\s*?{[\s\S]*?left:\s*?0px(;[\s\S]*?|\s*?)}/gi));
|
||||
```
|
||||
|
||||
La regola `@keyframes` per `50%` dovrebbe utilizzare l'offset `left` di 25 px.
|
||||
|
||||
```js
|
||||
assert(code.match(/50%\s*?{[\s\S]*?left:\s*?25px(;[\s\S]*?|\s*?)}/gi));
|
||||
```
|
||||
|
||||
La regola `@keyframes` per `100%` dovrebbe utilizzare l'offset `left` di -25px.
|
||||
|
||||
```js
|
||||
assert(code.match(/100%\s*?{[\s\S]*?left:\s*?-25px(;[\s\S]*?|\s*?)}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 70%;
|
||||
background: black;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#rect {
|
||||
animation-name: rainbow;
|
||||
animation-duration: 4s;
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: blue;
|
||||
top: 0px;
|
||||
|
||||
}
|
||||
50% {
|
||||
background-color: green;
|
||||
top: 50px;
|
||||
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
top: 0px;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="rect"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 70%;
|
||||
background: black;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#rect {
|
||||
animation-name: rainbow;
|
||||
animation-duration: 4s;
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: blue;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
50% {
|
||||
background-color: green;
|
||||
top: 50px;
|
||||
left: 25px;
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
top: 0px;
|
||||
left: -25px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="rect"></div>
|
||||
```
|
||||
@ -0,0 +1,50 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad8
|
||||
title: Creare una trama aggiungendo un motivo delicato come immagine di sfondo
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cQdwJC8'
|
||||
forumTopicId: 301052
|
||||
dashedName: create-texture-by-adding-a-subtle-pattern-as-a-background-image
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Un modo per dare consistenza e attenzione a uno sfondo e farlo risaltare di più è quello di aggiungere un motivo leggero. La chiave è l'equilibrio, in quanto non si vuole che lo sfondo si distingua troppo, e distragga dal primo piano. La proprietà `background` supporta la funzione `url()` per collegarsi a un'immagine della texture o del motivo scelto. L'indirizzo del link è inserito tra virgolette all'interno delle parentesi.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Usando l'url `https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png`, imposta lo sfondo `background` dell'intera pagina con il selettore `body`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `body` dovrebbe avere una proprietà `background` impostata su un `url()` con il link specificato.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background: url("https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png");
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab3
|
||||
title: Creare equilibrio visivo usando la proprietà text-align
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3b4EAp'
|
||||
forumTopicId: 301053
|
||||
dashedName: create-visual-balance-using-the-text-align-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Questa sezione del curriculum si concentra sul Visual Design applicato. Il primo gruppo di sfide si basa sul layout delle card fornite, per mostrare una serie di principi fondamentali.
|
||||
|
||||
Il testo è spesso una buona parte del contenuto web. Il CSS ha diverse opzioni su come allinearlo con la proprietà `text-align`.
|
||||
|
||||
`text-align: justify;` fa sì che tutte le righe di testo tranne l'ultima riga incontrino i bordi sinistro e destro della riga.
|
||||
|
||||
`text-align: center;` centra il testo
|
||||
|
||||
`text-align: right;` allinea il testo a destra
|
||||
|
||||
E `text-align: left;` (il predefinito) allinea il testo a sinistra.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Allinea il testo del tag `h4`, quello che dice "Google", al centro. Giustifica quindi il tag paragrafo che contiene informazioni su come Google è stato fondato.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe utilizzare la proprietà text-align sul tag `h4` per impostarlo a `center`.
|
||||
|
||||
```js
|
||||
assert($('h4').css('text-align') == 'center');
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe utilizzare la proprietà text-align sul tag `p` per impostarlo su `justify`.
|
||||
|
||||
```js
|
||||
assert($('p').css('text-align') == 'justify');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
|
||||
}
|
||||
p {
|
||||
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
|
||||
}
|
||||
.fullCard {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
|
||||
}
|
||||
.fullCard {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae2
|
||||
title: Creare una direzione visuale dissolvendo un elemento da sinistra a destra
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJqqAE'
|
||||
forumTopicId: 301054
|
||||
dashedName: create-visual-direction-by-fading-an-element-from-left-to-right
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per questa sfida, cambierai l'`opacity` di un elemento animato in modo che svanisca gradualmente mentre raggiunge il lato destro dello schermo.
|
||||
|
||||
Nell'animazione visualizzata, l'elemento circolare con lo sfondo gradiente si muove verso destra dal 50% dell'animazione per la regola `@keyframes`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Prendi l'elemento con l'id `ball` e aggiungi la proprietà `opacity` impostata a 0.1 al `50%`, per poi farlo svanire mentre si muove verso destra.
|
||||
|
||||
# --hints--
|
||||
|
||||
La regola `keyframes` per la dissolvenza deve impostare la proprietà `opacity` a 0.1 al 50%.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
#ball {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 50px auto;
|
||||
position: fixed;
|
||||
left: 20%;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
animation-name: fade;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
50% {
|
||||
left: 60%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="ball"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#ball {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 50px auto;
|
||||
position: fixed;
|
||||
left: 20%;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
animation-name: fade;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
50% {
|
||||
left: 60%;
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="ball"></div>
|
||||
```
|
||||
@ -0,0 +1,134 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512abf
|
||||
title: Diminuire l'opacità di un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c7aKqu4'
|
||||
forumTopicId: 301055
|
||||
dashedName: decrease-the-opacity-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La proprietà `opacity` in CSS viene utilizzata per regolare l'opacità o la trasparenza di un elemento.
|
||||
|
||||
<blockquote>Un valore di 1 è opaco, che non è affatto trasparente.<br>Un valore di 0.5 si vede per metà.<br>Un valore di 0 è completamente trasparente.</blockquote>
|
||||
|
||||
Il valore dato sarà applicato all'intero elemento se si tratta di un'immagine con una certa trasparenza, o ai colori di primo piano e di sfondo se si tratta di un blocco di testo.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Imposta l'`opacity` dei tag di ancoraggio a 0.7 utilizzando la classe `links` per selezionarli.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe impostare la proprietà `opacity` a 0.7 sui tag di ancoraggio selezionando la classe `links`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\.links\s*{([\s\S]*?;)*\s*opacity\s*:\s*0*\.70*\s*(;[\s\S]*?|\s*)}/.test(
|
||||
$('style').text()
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
opacity: 0.7;
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ad1
|
||||
title: Scoprire di più sui colori complementari
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MD3Tr'
|
||||
forumTopicId: 301056
|
||||
dashedName: learn-about-complementary-colors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La teoria del colore e il suo impatto sul design sono un argomento vasto e nelle seguenti sfide ne vedremo solo le basi. In un sito web, il colore può attirare l'attenzione sul contenuto, evocare emozioni o creare armonia visiva. Usando diverse combinazioni di colori si può davvero cambiare l'aspetto di un sito web, e devi pensare bene alla scelta di una tavolozza di colori che sia adatta al tuo contenuto.
|
||||
|
||||
La ruota del colore è uno strumento utile per visualizzare come i colori si relazionano tra loro - è un cerchio in cui le tonalità simili sono vicine e le tonalità diverse sono più lontane. Quando due colori sono opposti sulla ruota, sono chiamati colori complementari. Essi hanno la caratteristica che se sono combinati, si "annullano" l'un l'altro e creano un colore grigio. Tuttavia, quando posizionati fianco a fianco, questi colori appaiono più vibranti e producono un forte contrasto visivo.
|
||||
|
||||
Alcuni esempi di colori complementari con i loro codici esadecimali sono:
|
||||
|
||||
<blockquote>rosso (#FF0000) e ciano (#00FFFF)<br>verde (#00FF00) e magenta (#FF00FF)<br>blu (#0000FF) e giallo (#FFFF00)</blockquote>
|
||||
|
||||
Questo è diverso dal modello di colore superato RYB (Rosso Giallo Blu) che hanno insegnato a molti di noi a scuola, che ha diversi colori primari e complementari. La teoria dei colori moderna utilizza il modello RGB additivo (come su uno schermo del computer) e il modello CMY(K) sottrattivo (come nella stampa). Leggi [qui](https://en.wikipedia.org/wiki/Color_model) per maggiori informazioni su questo argomento complesso.
|
||||
|
||||
Ci sono molti strumenti di selezione del colore disponibili online che hanno un'opzione per trovare il complementare di un colore.
|
||||
|
||||
**Nota:** L'utilizzo del colore può essere un modo potente per aggiungere interesse visivo a una pagina. Tuttavia, il colore da solo non dovrebbe essere usato come l'unico modo per trasmettere informazioni importanti perché gli utenti con disabilità visive potrebbero non capire il contenuto. La questione sarà trattata in modo più dettagliato nelle sfide relative all'accessibilità applicata.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Cambia la proprietà `background-color` delle classi `blue` e `yellow` con i rispettivi colori. Nota come i colori sembrano diversi uno accanto all'altro rispetto a quando sono comparati sullo sfondo bianco.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `div` con classe `blue` dovrebbe avere un `background-color` blu.
|
||||
|
||||
```js
|
||||
assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
L'elemento `div` con classe `yellow` dovrebbe avere un `background-color` giallo.
|
||||
|
||||
```js
|
||||
assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.blue {
|
||||
background-color: #000000;
|
||||
}
|
||||
.yellow {
|
||||
background-color: #000000;
|
||||
}
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<div class="blue"></div>
|
||||
<div class="yellow"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
.yellow {
|
||||
background-color: yellow;
|
||||
}
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<div class="blue"></div>
|
||||
<div class="yellow"></div>
|
||||
```
|
||||
@ -0,0 +1,114 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad2
|
||||
title: Scoprire di più sui colori terziari
|
||||
challengeType: 0
|
||||
forumTopicId: 301057
|
||||
dashedName: learn-about-tertiary-colors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
I monitor e gli schermi dei dispositivi creano colori diversi combinando quantità di luce rossa, verde e blu. Questo è conosciuto come il modello di colore additivo RGB nella moderna teoria dei colori. Red (R), green (G), e blue (B) sono chiamati colori primari. Mescolando due colori primari si creano i colori secondari ciano (G + B), magenta (R + B) e giallo (R + G). Hai visto questi colori nella sfida Colori complementari. Questi colori secondari di fatto sono complementari al colore primario non utilizzato nella loro creazione, e sono opposti a quel colore primario sulla ruota dei colori. Per esempio, il magenta è fatto con rosso e blu, ed è il complemento al verde.
|
||||
|
||||
I colori terziari sono il risultato della combinazione di un colore primario con uno dei suoi vicini colori secondari. Ad esempio, all'interno del modello di colore RGB, rosso (primario) e giallo (secondario) danno l'arancione (terziario). Questo aggiunge altri sei colori ad una semplice ruota dei colori per un totale di dodici.
|
||||
|
||||
Ci sono vari metodi per selezionare diversi colori che portano ad una combinazione armoniosa nel design. Un esempio in cui possono essere usati i colori terziari è chiamato lo schema di colori split-complementary. Questo schema inizia con un colore di base, poi lo abbina con i due colori che sono adiacenti al suo complemento. I tre colori forniscono un forte contrasto visivo in un design, ma sono più tenui rispetto all'utilizzo di due colori complementari.
|
||||
|
||||
Qui vediamo tre colori creati utilizzando lo schema split-complement:
|
||||
|
||||
<table class='table table-striped'><thead><tr><th>Colore</th><th>Codice esadecimale</th></tr></thead><thead></thead><tbody><tr><td>orange</td><td>#FF7F00</td></tr><tr><td>cyan</td><td>#00FFFF</td></tr><tr><td>raspberry</td><td>#FF007F</td></tr></tbody></table>
|
||||
|
||||
# --instructions--
|
||||
|
||||
Sostituisci la proprietà `background-color` delle classi `orange`, `cyan`e `raspberry` con i rispettivi colori. Assicurati di utilizzare i codici esadecimali e non i nomi dei colori.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `div` con classe `orange` dovrebbe avere un `background-color` arancione.
|
||||
|
||||
```js
|
||||
assert($('.orange').css('background-color') == 'rgb(255, 127, 0)');
|
||||
```
|
||||
|
||||
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 `raspberry` dovrebbe avere un `background-color` di color lampone.
|
||||
|
||||
```js
|
||||
assert($('.raspberry').css('background-color') == 'rgb(255, 0, 127)');
|
||||
```
|
||||
|
||||
Tutti i valori `background-color` per le classi di colore, dovrebbero essere codici esadecimali e non nomi di colori.
|
||||
|
||||
```js
|
||||
assert(!/background-color:\s(orange|cyan|raspberry)/.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.raspberry {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="orange"></div>
|
||||
<div class="cyan"></div>
|
||||
<div class="raspberry"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background-color: #FF7F00;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: #00FFFF;
|
||||
}
|
||||
|
||||
.raspberry {
|
||||
background-color: #FF007F;
|
||||
}
|
||||
|
||||
div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
<div class="orange"></div>
|
||||
<div class="cyan"></div>
|
||||
<div class="raspberry"></div>
|
||||
```
|
||||
@ -0,0 +1,136 @@
|
||||
---
|
||||
id: 587d78a9367417b2b2512ae8
|
||||
title: Imparare il funzionamento delle curve di Bezier
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c9bDrs8'
|
||||
forumTopicId: 301058
|
||||
dashedName: learn-how-bezier-curves-work
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'ultima sfida ha introdotto la proprietà `animation-timing-function` e alcune keywords che cambiano la velocità di un'animazione nel corso della sua durata. CSS offre un'opzione diversa dalle keywords che fornisce un controllo ancora più preciso su come viene riprodotta l'animazione, attraverso l'uso delle curve di Bezier.
|
||||
|
||||
Nelle animazioni CSS, le curve di Bezier vengono utilizzate con la funzione `cubic-bezier`. La forma della curva rappresenta lo svolgimento dell'animazione. La curva vive su un sistema cartesiano 1x1. L'asse X di questo sistema di coordinate è la durata dell'animazione (pensala come scala temporale), e l'asse Y è il cambiamento nell'animazione.
|
||||
|
||||
La funzione `cubic-bezier` è costituita da quattro punti principali che si appoggiano su una griglia 1x1: `p0`, `p1`, `p2` e `p3`. `p0` e `p3` sono impostati per te - sono i punti di inizio e di fine che sono sempre situati rispettivamente sull'origine (0, 0) e su (1, 1). Imposta i valori x e y per gli altri due punti, e quando li posizioni nella griglia questi determinano la forma della curva per l'animazione da seguire. Questo viene fatto in CSS dichiarando i valori x e y dei punti "di ancoraggio" `p1` e `p2` nella forma: `(x1, y1, x2, y2)`. Mettendo tutto insieme, ecco un esempio di una curva di Bezier nel codice CSS:
|
||||
|
||||
```css
|
||||
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
|
||||
```
|
||||
|
||||
Nell'esempio precedente, i valori x e y sono equivalenti per ogni punto (x1 = 0.25 = y1 e x2 = 0.75 = y2) che - se ricordi lo studio della geometria - risulta in una linea che va dall'origine al punto (1, 1). Questa animazione è un cambiamento lineare di un elemento durante la lunghezza di un'animazione, ed è la stessa che usa la parola chiave `linear`. In altre parole, cambia ad una velocità che è costante.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Per l'elemento con l'id di `ball1`, cambia il valore della proprietà `animation-timing-function` da `linear` al suo valore funzione equivalente `cubic-bezier`. Usa i valori dei punti forniti nell'esempio precedente.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il valore della proprietà `animation-timing-function` per l'elemento con id `ball1` dovrebbe essere la funzione equivalente lineare `cubic-bezier`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#ball1').css('animation-timing-function') ==
|
||||
'cubic-bezier(0.25, 0.25, 0.75, 0.75)'
|
||||
);
|
||||
```
|
||||
|
||||
Il valore della proprietà `animation-timing-function` per l'elemento con id `ball2` non dovrebbe cambiare.
|
||||
|
||||
```js
|
||||
const ball2Animation = __helpers.removeWhiteSpace(
|
||||
$('#ball2').css('animation-timing-function')
|
||||
);
|
||||
assert(
|
||||
ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
.balls{
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#ball1 {
|
||||
left: 27%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#ball2 {
|
||||
left: 56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="balls" id="ball1"></div>
|
||||
<div class="balls" id="ball2"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
.balls{
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#ball1 {
|
||||
left: 27%;
|
||||
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
|
||||
}
|
||||
#ball2 {
|
||||
left: 56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id="ball1"></div>
|
||||
<div class="balls" id="ball2"></div>
|
||||
```
|
||||
@ -0,0 +1,136 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512adf
|
||||
title: Imparare come funzionano i @keyframes CSS e le proprietà delle animazioni
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cakprhv'
|
||||
forumTopicId: 301059
|
||||
dashedName: learn-how-the-css-keyframes-and-animation-properties-work
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per animare un elemento, devi conoscere le proprietà dell'animazione e la regola `@keyframes`. Le proprietà dell'animazione controllano come si comporta l'animazione e la regola `@keyframes` controlla cosa succede durante quell'animazione. Ci sono otto proprietà di animazione in totale. Questa sfida sarà semplice e coprirà prima le due più importanti:
|
||||
|
||||
`animation-name` imposta il nome dell'animazione, che viene successivamente utilizzato da `@keyframes` per dire al CSS quali regole vanno seguite con quali animazioni.
|
||||
|
||||
`animation-duration` imposta la durata dell' animazione.
|
||||
|
||||
`@keyframes` specifica cosa succede esattamente all'interno dell'animazione per tutta la durata. Questo viene fatto dando proprietà CSS per specifici "frame" durante l'animazione, con percentuali comprese tra 0% e 100%. Se si confronta questo con un film, le proprietà CSS per 0% è come l'elemento viene mostrato nella scena di apertura. Le proprietà CSS per il 100% sono come l'elemento appare alla fine, proprio prima dei titoli di coda. Quindi il CSS applica la magia per trasferire l'elemento durante la durata data fino all'uscita di scena. Ecco un esempio per illustrare l'utilizzo di `@keyframes` e le proprietà dell'animazione:
|
||||
|
||||
```css
|
||||
#anim {
|
||||
animation-name: colorful;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
@keyframes colorful {
|
||||
0% {
|
||||
background-color: blue;
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Per l'elemento con l'id `anim`, lo snippet di codice qui sopra imposta l'`animation-name` a `colorful` e imposta l'`animation-duration` a 3 secondi. Quindi la regola `@keyframes` si lega alla proprietà di animazione con il nome `colorful`. Imposta il colore a blu all'inizio dell'animazione (0%) e fai in modo che passi a giallo alla fine dell'animazione (100%). Non sei limitato alle transizioni iniziali, puoi impostare le proprietà per l'elemento per qualsiasi percentuale compresa tra 0% e 100%.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crea un'animazione per l'elemento con l'id `rect`, impostando l'`animation-name` su `rainbow` e la `animation-duration` a 4 secondi. Successivamente, dichiara una regola `@keyframes`, e imposta il `background-color` all'inizio dell'animazione (`0%`) a blu, al centro dell'animazione (`50%`) a verde, e alla fine dell'animazione (`100%`) a giallo.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento con id di `rect` dovrebbe avere una proprietà `animation-name` con un valore di `rainbow`.
|
||||
|
||||
```js
|
||||
assert($('#rect').css('animation-name') == 'rainbow');
|
||||
```
|
||||
|
||||
L'elemento con id di `rect` dovrebbe avere una proprietà `animation-duration` con un valore di 4s.
|
||||
|
||||
```js
|
||||
assert($('#rect').css('animation-duration') == '4s');
|
||||
```
|
||||
|
||||
La regola `@keyframes` dovrebbe usare l'`animation-name` di `rainbow`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@keyframes\s+?rainbow\s*?{/g));
|
||||
```
|
||||
|
||||
La regola `@keyframes` per `rainbow` dovrebbe usare un `background-color` di `blue` allo 0%.
|
||||
|
||||
```js
|
||||
assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));
|
||||
```
|
||||
|
||||
La regola `@keyframes` per `rainbow` dovrebbe usare un `background-color` di `green` al 50%.
|
||||
|
||||
```js
|
||||
assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));
|
||||
```
|
||||
|
||||
La regola `@keyframes` per l'arcobaleno dovrebbe usare un `background-color` di `yellow` al 100%.
|
||||
|
||||
```js
|
||||
assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 70%;
|
||||
background: black;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#rect {
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<div id="rect"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 70%;
|
||||
background: black;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#rect {
|
||||
animation-name: rainbow;
|
||||
animation-duration: 4s;
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: blue;
|
||||
}
|
||||
50% {
|
||||
background-color: green;
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="rect"></div>
|
||||
```
|
||||
@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512acb
|
||||
title: Vincolare un elemento al suo genitore con il posizionamento assoluto
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLJ7c3'
|
||||
forumTopicId: 301060
|
||||
dashedName: lock-an-element-to-its-parent-with-absolute-positioning
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La prossima opzione per la proprietà CSS `position` è `absolute`, che vincola l'elemento in una posizione rispetto al suo contenitore genitore. A differenza della posizione `relative`, questo rimuove l'elemento dal flusso normale del documento, quindi gli elementi circostanti lo ignorano. Le proprietà di offset CSS (superiore o inferiore e sinistra o destra) sono usate per regolare la posizione.
|
||||
|
||||
Una sfumatura con posizionamento assoluto, sarà vincolata rispetto al suo antenato più vicino che sia *posizionato*. Se si dimentica di aggiungere una regola di posizione all'elemento genitore (questo viene tipicamente fatto usando `position: relative;`), il browser continuerà a cercare nella catena fino a usare il valore di default del tag `body`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Blocca l'elemento `#searchbar` in alto a destra nella sua `section` genitore dichiarando `position` come `absolute`. Dagli un offset `top` e `right` di 50 pixel ciascuno.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `#searchbar` dovrebbe avere una `position` impostata su `absolute`.
|
||||
|
||||
```js
|
||||
assert($('#searchbar').css('position') == 'absolute');
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe utilizzare un offset CSS `top` di 50 pixel sull'elemento `#searchbar`.
|
||||
|
||||
```js
|
||||
assert($('#searchbar').css('top') == '50px');
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe utilizzare uno spostamento `right` di 50 pixel sull'elemento `#searchbar`.
|
||||
|
||||
```js
|
||||
assert($('#searchbar').css('right') == '50px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#searchbar {
|
||||
|
||||
|
||||
|
||||
}
|
||||
section {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>Welcome!</h1>
|
||||
<section>
|
||||
<form id="searchbar">
|
||||
<label for="search">Search:</label>
|
||||
<input type="search" id="search" name="search">
|
||||
<input type="submit" name="submit" value="Go!">
|
||||
</form>
|
||||
</section>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#searchbar {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 50px;
|
||||
}
|
||||
section {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>Welcome!</h1>
|
||||
<section>
|
||||
<form id="searchbar">
|
||||
<label for="search">Search:</label>
|
||||
<input type="search" id="search" name="search">
|
||||
<input type="submit" name="submit" value="Go!">
|
||||
</form>
|
||||
</section>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,120 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512acc
|
||||
title: Bloccare un elemento sulla finestra del browser con il posizionamento Fixed
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MDNUR'
|
||||
forumTopicId: 301061
|
||||
dashedName: lock-an-element-to-the-browser-window-with-fixed-positioning
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Il successivo schema di layout che CSS offre è la posizione `fixed`, che è un tipo di posizionamento assoluto che posiziona un elemento relativamente alla finestra del browser. Simile al posizionamento assoluto, esso è utilizzato con le proprietà di offset e anch'esso rimuove l'elemento dal normale flusso del documento. Gli altri elementi non "realizzano" più dove sono posizionati, il che potrebbe richiedere delle altre modifiche al layout.
|
||||
|
||||
Un'altra differenza chiave tra le posizioni `fixed` e `absolute` è che un elemento con una posizione fixed non si muove quando l'utente scrolla la pagina.
|
||||
|
||||
# --instructions--
|
||||
|
||||
La barra di navigazione nel codice è etichettata con un id `navbar`. Cambia la sua `position` a `fixed`, e dalle un offset `top` di 0 pixel e un offset `left` di 0 pixel. Dopo aver aggiunto il codice, scorri la finestra di preview per vedere come la barra di navigazione rimane in posizione.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `#navbar` deve avere una `position` impostata su `fixed`.
|
||||
|
||||
```js
|
||||
assert($('#navbar').css('position') == 'fixed');
|
||||
```
|
||||
|
||||
Il tuo codice deve avere un offset `top` di 0 pixel sull'elemento `#navbar`.
|
||||
|
||||
```js
|
||||
assert($('#navbar').css('top') == '0px');
|
||||
```
|
||||
|
||||
Il tuo codice deve usare un offset `left` di 0 pixel sull'elemento `#navbar`.
|
||||
|
||||
```js
|
||||
assert($('#navbar').css('left') == '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
min-height: 150vh;
|
||||
}
|
||||
#navbar {
|
||||
|
||||
|
||||
|
||||
width: 100%;
|
||||
background-color: #767676;
|
||||
}
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Welcome!</h1>
|
||||
<nav id="navbar">
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<p>I shift up when the #navbar is fixed to the browser window.</p>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
min-height: 150vh;
|
||||
}
|
||||
#navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #767676;
|
||||
}
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Welcome!</h1>
|
||||
<nav id="navbar">
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<p>I shift up when the #navbar is fixed to the browser window.</p>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,181 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae4
|
||||
title: Creare un battito cardiaco CSS usando un'animazione infinita
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cDZpDUr'
|
||||
forumTopicId: 301062
|
||||
dashedName: make-a-css-heartbeat-using-an-infinite-animation-count
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ecco un altro esempio di animazione continua con la proprietà `animation-iteration-count` che utilizza il cuore che hai progettato in una sfida precedente.
|
||||
|
||||
L'animazione del battito cardiaco della durata di un secondo consiste in due parti animate. Gli elementi `heart` (incluse le parti `:before` e `:after`) sono animati per cambiare la dimensione utilizzando la proprietà`transform`, e il `div` di sfondo è animato per cambiare il suo colore utilizzando la proprietà `background`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Fai continuare a battere il cuore aggiungendo la proprietà `animation-iteration-count` sia per la classe `back` che per la classe `heart` e impostando il valore a `infinite`. I selettori `heart:before` e `heart:after` non hanno bisogno di alcuna proprietà di animazione.
|
||||
|
||||
# --hints--
|
||||
|
||||
La proprietà `animation-iteration-count` per la classe `heart` dovrebbe avere un valore di `infinite`.
|
||||
|
||||
```js
|
||||
assert($('.heart').css('animation-iteration-count') == 'infinite');
|
||||
```
|
||||
|
||||
La proprietà `animation-iteration-count` per la classe `back` dovrebbe avere un valore `infinite`.
|
||||
|
||||
```js
|
||||
assert($('.back').css('animation-iteration-count') == 'infinite');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
animation-name: backdiv;
|
||||
animation-duration: 1s;
|
||||
|
||||
}
|
||||
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: rotate(-45deg);
|
||||
animation-name: beat;
|
||||
animation-duration: 1s;
|
||||
|
||||
}
|
||||
.heart:after {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart:before {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
@keyframes backdiv {
|
||||
50% {
|
||||
background: #ffe6f2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes beat {
|
||||
0% {
|
||||
transform: scale(1) rotate(-45deg);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.6) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="back"></div>
|
||||
<div class="heart"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
animation-name: backdiv;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: rotate(-45deg);
|
||||
animation-name: beat;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.heart:after {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart:before {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
@keyframes backdiv {
|
||||
50% {
|
||||
background: #ffe6f2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes beat {
|
||||
0% {
|
||||
transform: scale(1) rotate(-45deg);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.6) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="back"></div>
|
||||
<div class="heart"></div>
|
||||
```
|
||||
@ -0,0 +1,121 @@
|
||||
---
|
||||
id: 587d78a9367417b2b2512aea
|
||||
title: Rendere il movimento più naturale utilizzando una curva di Bezier
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c7akWUv'
|
||||
forumTopicId: 301063
|
||||
dashedName: make-motion-more-natural-using-a-bezier-curve
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Questa sfida anima un elemento per replicare il movimento di una palla da giocoliere. Le sfide precedenti hanno riguardato le curve di Bezier cubiche `linear` e `ease-out`, ma nessuna raffigura il movimento di giocoleria con precisione. Per questo devi personalizzare una curva di Bezier.
|
||||
|
||||
La funzione `animation-timing-function` effettua automaticamente un'iterazione ad ogni keyframe quando l'`animation-iteration-count` è impostato su infinito. Dato che c'è una regola keyframe impostata nel mezzo della durata dell'animazione (al `50%`), questo si traduce in due identiche progressioni di animazione con movimento verso l'alto e verso il basso della palla.
|
||||
|
||||
La seguente curva cubica di Bezier simula un movimento di giocoliera:
|
||||
|
||||
```css
|
||||
cubic-bezier(0.3, 0.4, 0.5, 1.6);
|
||||
```
|
||||
|
||||
Nota che il valore di y2 è maggiore di 1. Sebbene la curva di Bezier cubica sia mappata su un sistema di coordinate 1 per 1, e possa accettare valori x solo tra 0 a 1, il valore y può essere impostato su numeri più grandi di uno. Questo si traduce in un movimento rimbalzante che è ideale per simulare la pallina del giocoliere.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Cambia il valore della funzione `animation-timing-function` dell'elemento con l'id di `green` a una funzione `cubic-bezier` con valori x1, y1, x2, y2 fissati rispettivamente a 0.311, 0.441, 0.444, 1.649.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il valore della proprietà `animation-timing-function` per l'elemento con id `green` dovrebbe essere una funzione `cubic-bezier` con valori x1, y1, x2, y2 impostati come specificato.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#green').css('animation-timing-function') ==
|
||||
'cubic-bezier(0.311, 0.441, 0.444, 1.649)'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls {
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 60%;
|
||||
animation-name: jump;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#red {
|
||||
background: red;
|
||||
left: 25%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#blue {
|
||||
background: blue;
|
||||
left: 50%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
#green {
|
||||
background: green;
|
||||
left: 75%;
|
||||
animation-timing-function: cubic-bezier(0.69, 0.1, 1, 0.1);
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
50% {
|
||||
top: 10%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id="red"></div>
|
||||
<div class="balls" id="blue"></div>
|
||||
<div class="balls" id="green"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls {
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 60%;
|
||||
animation-name: jump;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#red {
|
||||
background: red;
|
||||
left: 25%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#blue {
|
||||
background: blue;
|
||||
left: 50%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
#green {
|
||||
background: green;
|
||||
left: 75%;
|
||||
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
50% {
|
||||
top: 10%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id="red"></div>
|
||||
<div class="balls" id="blue"></div>
|
||||
<div class="balls" id="green"></div>
|
||||
```
|
||||
@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 58a7a6ebf9a6318348e2d5aa
|
||||
title: Modificare la modalità di riempimento di un'animazione
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJDmcE'
|
||||
forumTopicId: 301064
|
||||
dashedName: modify-fill-mode-of-an-animation
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
È fantastico, però non funziona ancora bene. Nota come l'animazione si resetta dopo che sono passati `500ms`, causando il ritorno del pulsante al colore originale. Vuoi che il pulsante resti evidenziato.
|
||||
|
||||
Questo può essere fatto impostando la proprietà `animation-fill-mode` su `forwards`. La modalità `animation-fill-mode` specifica lo stile applicato ad un elemento quando l'animazione è terminata. Puoi impostarla in questo modo:
|
||||
|
||||
```css
|
||||
animation-fill-mode: forwards;
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Imposta la proprietà `animation-fill-mode` del pulsante `button:hover` a `forwards` in modo che il pulsante rimanga evidenziato quando un utente ci passa sopra.
|
||||
|
||||
# --hints--
|
||||
|
||||
`button:hover` dovrebbe avere una proprietà `animation-fill-mode` con un valore di `forwards`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi
|
||||
) &&
|
||||
code.match(
|
||||
/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi
|
||||
) &&
|
||||
code.match(
|
||||
/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
button {
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: #0F5897;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
animation-name: background-color;
|
||||
animation-duration: 500ms;
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
@keyframes background-color {
|
||||
100% {
|
||||
background-color: #4791d0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button>Register</button>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
button {
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: #0F5897;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
animation-name: background-color;
|
||||
animation-duration: 500ms;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
@keyframes background-color {
|
||||
100% {
|
||||
background-color: #4791d0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button>Register</button>
|
||||
```
|
||||
@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512aca
|
||||
title: Spostare un elemento posizionato relativamente con gli offset CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c9bQEA4'
|
||||
forumTopicId: 301065
|
||||
dashedName: move-a-relatively-positioned-element-with-css-offsets
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Gli offset (scostamenti) CSS di `top` o `bottom`, e `left` o `right` dicono al browser di quanto spostare un elemento rispetto a dove risiederebbe nel normale flusso del documento. Stai allontanando un elemento da un dato punto, e questo sposta l'elemento lontano dal lato di riferimento (di fatto lo sposta nella direzione opposta). Come hai visto nell'ultima sfida, utilizzando l'offset `top` abbiamo spostato l'`h2` verso il basso. Allo stesso modo, usando un offset `left` sposterai un elemento verso destra.
|
||||
|
||||
<img src='https://cdn-media-1.freecodecamp.org/imgr/eWWi3gZ.gif' alt='' />
|
||||
|
||||
# --instructions--
|
||||
|
||||
Usa gli spostamenti CSS per spostare `h2` di 15 pixel verso destra e 10 pixel verso l'alto.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe utilizzare un offset CSS per posizionare `h2` di 10px verso l'alto. In altre parole, spostalo di 10px lontano dal lato `bottom` rispetto alla sua posizione normale.
|
||||
|
||||
```js
|
||||
assert($('h2').css('bottom') == '10px');
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe utilizzare un offset CSS per posizionare relativamente l'`h2` di 15px verso destra. In altre parole, spostalo 15px lontano dal lato `left` di dove si trova normalmente.
|
||||
|
||||
```js
|
||||
assert($('h2').css('left') == '15px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
h2 {
|
||||
position: relative;
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>On Being Well-Positioned</h1>
|
||||
<h2>Move me!</h2>
|
||||
<p>I still think the h2 is where it normally sits.</p>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
h2 {
|
||||
position: relative;
|
||||
left: 15px;
|
||||
bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>On Being Well-Positioned</h1>
|
||||
<h2>Move me!</h2>
|
||||
<p>I still think the h2 is where it normally sits.</p>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ace
|
||||
title: Spingere gli elementi a sinistra o a destra con la proprietà float
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MDqu2'
|
||||
forumTopicId: 301066
|
||||
dashedName: push-elements-left-or-right-with-the-float-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Il prossimo strumento di posizionamento non utilizza effettivamente `position`, ma imposta la proprietà `float` di un elemento. Gli elementi fluttuanti vengono rimossi dal normale flusso di un documento e spinti verso `left` o `right` dell'elemento che li contiene. È comunemente usato con la proprietà `width` per specificare quanto spazio orizzontale viene richiesto dall'elemento fluttuante.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Il "markup" dato funzionerebbe bene con un layout a due colonne, con gli elementi `section` e `aside` uno accanto all'altro. Dai all'oggetto `#left` un `float` di `left` e all'oggetto `#right` un `float` di `right`.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento con id `left` dovrebbe avere un `float` di `left`.
|
||||
|
||||
```js
|
||||
assert($('#left').css('float') == 'left');
|
||||
```
|
||||
|
||||
L'elemento con id `right` dovrebbe avere un `float` di `right`.
|
||||
|
||||
```js
|
||||
assert($('#right').css('float') == 'right');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
#left {
|
||||
|
||||
width: 50%;
|
||||
}
|
||||
#right {
|
||||
|
||||
width: 40%;
|
||||
}
|
||||
aside, section {
|
||||
padding: 2px;
|
||||
background-color: #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Welcome!</h1>
|
||||
</header>
|
||||
<section id="left">
|
||||
<h2>Content</h2>
|
||||
<p>Good stuff</p>
|
||||
</section>
|
||||
<aside id="right">
|
||||
<h2>Sidebar</h2>
|
||||
<p>Links</p>
|
||||
</aside>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
#left {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
#right {
|
||||
float: right;
|
||||
width: 40%;
|
||||
}
|
||||
aside, section {
|
||||
padding: 2px;
|
||||
background-color: #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Welcome!</h1>
|
||||
</header>
|
||||
<section id="left">
|
||||
<h2>Content</h2>
|
||||
<p>Good stuff</p>
|
||||
</section>
|
||||
<aside id="right">
|
||||
<h2>Sidebar</h2>
|
||||
<p>Links</p>
|
||||
</aside>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,114 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac2
|
||||
title: Impostare la dimensione del carattere per più elementi di intestazione
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPpQNT3'
|
||||
forumTopicId: 301067
|
||||
dashedName: set-the-font-size-for-multiple-heading-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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>
|
||||
|
||||
<ul>
|
||||
<li>Il tag <code>h1</code> a 68px.</li>
|
||||
<li>Il tag <code>h2</code> a 52px.</li>
|
||||
<li>Il tag <code>h3</code> a 40px.</li>
|
||||
<li>Il tag <code>h4</code> a 32px.</li>
|
||||
<li>Il tag <code>h5</code> a 21px.</li>
|
||||
<li>Il tag <code>h6</code> a 14px.</li>
|
||||
</ul>
|
||||
|
||||
# --hints--
|
||||
|
||||
Il codice dovrebbe impostare la proprietà `font-size` per il tag `h1` a 68 pixel.
|
||||
|
||||
```js
|
||||
assert($('h1').css('font-size') == '68px');
|
||||
```
|
||||
|
||||
Il codice dovrebbe impostare la proprietà `font-size` per il tag `h2` a 52 pixel.
|
||||
|
||||
```js
|
||||
assert($('h2').css('font-size') == '52px');
|
||||
```
|
||||
|
||||
Il codice dovrebbe impostare la proprietà `font-size` per il tag `h3` a 40 pixel.
|
||||
|
||||
```js
|
||||
assert($('h3').css('font-size') == '40px');
|
||||
```
|
||||
|
||||
Il codice dovrebbe impostare la proprietà `font-size` per il tag `h4` a 32 pixel.
|
||||
|
||||
```js
|
||||
assert($('h4').css('font-size') == '32px');
|
||||
```
|
||||
|
||||
Il codice dovrebbe impostare la proprietà `font-size` per il tag `h5` a 21 pixel.
|
||||
|
||||
```js
|
||||
assert($('h5').css('font-size') == '21px');
|
||||
```
|
||||
|
||||
Il codice dovrebbe impostare la proprietà `font-size` per il tag `h6` a 14 pixel.
|
||||
|
||||
```js
|
||||
const regex = /h6\s*\{\s*font-size\s*:\s*14px\s*(;\s*\}|\})/i;
|
||||
assert.strictEqual(true, regex.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<h1>This is h1 text</h1>
|
||||
<h2>This is h2 text</h2>
|
||||
<h3>This is h3 text</h3>
|
||||
<h4>This is h4 text</h4>
|
||||
<h5>This is h5 text</h5>
|
||||
<h6>This is h6 text</h6>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 68px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 52px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 40px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 32px;
|
||||
}
|
||||
h5 {
|
||||
font-size: 21px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
<h1>This is h1 text</h1>
|
||||
<h2>This is h2 text</h2>
|
||||
<h3>This is h3 text</h3>
|
||||
<h4>This is h4 text</h4>
|
||||
<h5>This is h5 text</h5>
|
||||
<h6>This is h6 text</h6>
|
||||
```
|
||||
@ -0,0 +1,52 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac4
|
||||
title: Impostare la dimensione del carattere del testo del paragrafo
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJ36Cr'
|
||||
forumTopicId: 301068
|
||||
dashedName: set-the-font-size-of-paragraph-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La proprietà `font-size` nel CSS non è limitata alle intestazioni, si può applicare a qualsiasi elemento che contenga testo.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Cambia il valore della proprietà `font-size` per il paragrafo a 16px per renderlo più visibile.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo tag `p` dovrebbe avere un `font-size` di 16 pixels.
|
||||
|
||||
```js
|
||||
assert($('p').css('font-size') == '16px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</p>
|
||||
```
|
||||
@ -0,0 +1,132 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac3
|
||||
title: Impostare lo spessore del carattere per più elementi di intestazione
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/crVWRHq'
|
||||
forumTopicId: 301069
|
||||
dashedName: set-the-font-weight-for-multiple-heading-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Hai impostatio il `font-size` per ogni tag di intestazione nell'ultima sfida, qui potrai regolare il `font-weight`.
|
||||
|
||||
La proprietà `font-weight` imposta quanto grossi o sottili devono apparire i caratteri in una sezione di testo.
|
||||
|
||||
# --instructions--
|
||||
|
||||
<ul><li>Imposta il <code>font-weight</code> del tag <code>h1</code> a 800.</li><li>Imposta il <code>font-weight</code> del tag <code>h2</code> a 600.</li><li>Imposta il <code>font-weight</code> del tag <code>h3</code> a 500.</li><li>Imposta il <code>font-weight</code> del tag <code>h4</code> a 400.</li><li>Imposta il <code>font-weight</code> del tag <code>h5</code> a 300.</li><li>Imposta il <code>font-weight</code> del tag <code>h6</code> a 200.</li></ul>
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe impostare proprietà `font-weight` per il tag `h1` a 800.
|
||||
|
||||
```js
|
||||
assert($('h1').css('font-weight') == '800');
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe impostare la proprietà `font-weight` per il tag `h2` a 600.
|
||||
|
||||
```js
|
||||
assert($('h2').css('font-weight') == '600');
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe impostare la proprietà `font-weight` per il tag `h3` a 500.
|
||||
|
||||
```js
|
||||
assert($('h3').css('font-weight') == '500');
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe impostare proprietà `font-weight` per il tag `h4` a 400.
|
||||
|
||||
```js
|
||||
assert($('h4').css('font-weight') == '400');
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe impostare la proprietà `font-weight` per il tag `h5` a 300.
|
||||
|
||||
```js
|
||||
assert($('h5').css('font-weight') == '300');
|
||||
```
|
||||
|
||||
Il tuo codice dovrebbe impostare proprietà `font-weight` per il tag `h6` a 200.
|
||||
|
||||
```js
|
||||
assert($('h6').css('font-weight') == '200');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 68px;
|
||||
|
||||
}
|
||||
h2 {
|
||||
font-size: 52px;
|
||||
|
||||
}
|
||||
h3 {
|
||||
font-size: 40px;
|
||||
|
||||
}
|
||||
h4 {
|
||||
font-size: 32px;
|
||||
|
||||
}
|
||||
h5 {
|
||||
font-size: 21px;
|
||||
|
||||
}
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
</style>
|
||||
<h1>This is h1 text</h1>
|
||||
<h2>This is h2 text</h2>
|
||||
<h3>This is h3 text</h3>
|
||||
<h4>This is h4 text</h4>
|
||||
<h5>This is h5 text</h5>
|
||||
<h6>This is h6 text</h6>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 68px;
|
||||
font-weight: 800;
|
||||
}
|
||||
h2 {
|
||||
font-size: 52px;
|
||||
font-weight: 600;
|
||||
}
|
||||
h3 {
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
}
|
||||
h4 {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
}
|
||||
h5 {
|
||||
font-size: 21px;
|
||||
font-weight: 300;
|
||||
}
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
font-weight: 200;
|
||||
}
|
||||
</style>
|
||||
<h1>This is h1 text</h1>
|
||||
<h2>This is h2 text</h2>
|
||||
<h3>This is h3 text</h3>
|
||||
<h4>This is h4 text</h4>
|
||||
<h5>This is h5 text</h5>
|
||||
<h6>This is h6 text</h6>
|
||||
```
|
||||
@ -0,0 +1,54 @@
|
||||
---
|
||||
id: 587d781d367417b2b2512ac5
|
||||
title: Impostare la line-height dei paragrafi
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/crVWdcv'
|
||||
forumTopicId: 301070
|
||||
dashedName: set-the-line-height-of-paragraphs
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS offre la proprietà `line-height` per modificare l'altezza di ogni riga in un blocco di testo. Come suggerisce il nome, essa cambia la quantità di spazio verticale che ogni riga di testo occupa.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi una proprietà `line-height` al tag `p` e impostala a 25px.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe impostare la `line-height` del tag `p` a 25 pixel.
|
||||
|
||||
```js
|
||||
assert($('p').css('line-height') == '25px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 16px;
|
||||
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</p>
|
||||
```
|
||||
@ -0,0 +1,128 @@
|
||||
---
|
||||
id: 587d78a9367417b2b2512ae9
|
||||
title: Usare una curva di Bezier per muovere una grafica
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bnRCK'
|
||||
forumTopicId: 301071
|
||||
dashedName: use-a-bezier-curve-to-move-a-graphic
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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:
|
||||
|
||||
```css
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||
```
|
||||
|
||||
Ricorda che tutte le funzioni `cubic-bezier` iniziano con `p0` a (0, 0) e terminano con `p3` a (1, 1). In questo esempio, la curva si muove più velocemente attraverso l'asse Y (inizia da 0, va a al valore y=0 per `p1`, poi va al valore y=1 per `p2`) mentre si muove attraverso l'asse X (iniziando da 0, poi 0 per `p1`, fino a 0.58 per `p2`). Di conseguenza, il cambiamento nell'elemento animato progredisce più velocemente rispetto al tempo dell'animazione per quel segmento. Verso la fine della curva, la relazione tra la variazione dei valori x e y si inverte - il valore y si sposta da 1 a 1 (nessuna modifica), e i valori x si spostano da 0.58 a 1, rendendo la progressione dell'animazione più lentamente rispetto alla durata.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Per vedere l'effetto di questa curva di Bezier in azione, cambia la `animation-timing-function` dell'elemento con id `red` in una funzione `cubic-bezier` con valori x1, y1, x2, y2 fissati rispettivamente a 0, 0, 0.58, 1. Questo farà progredire entrambi gli elementi attraverso l'animazione in modo simile.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il valore della proprietà `animation-timing-function` dell'elemento con id `red` dovrebbe essere una funzione `cubic-bezier` con x1, y1, x2, y2 fissati rispettivamente a 0, 0, 0.58, 1 .
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)'
|
||||
);
|
||||
```
|
||||
|
||||
L'elemento con id `red` non dovrebbe più avere la proprietà `animation-timing-function` di `linear`.
|
||||
|
||||
```js
|
||||
assert($('#red').css('animation-timing-function') !== 'linear');
|
||||
```
|
||||
|
||||
Il valore della proprietà `animation-timing-function` per l'elemento con id `blue` non dovrebbe cambiare.
|
||||
|
||||
```js
|
||||
const blueBallAnimation = __helpers.removeWhiteSpace(
|
||||
$('#blue').css('animation-timing-function')
|
||||
);
|
||||
assert(
|
||||
blueBallAnimation == 'ease-out' ||
|
||||
blueBallAnimation == 'cubic-bezier(0,0,0.58,1)'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls{
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#red {
|
||||
background: red;
|
||||
left: 27%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#blue {
|
||||
background: blue;
|
||||
left: 56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id= "red"></div>
|
||||
<div class="balls" id= "blue"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls{
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#red {
|
||||
background: red;
|
||||
left: 27%;
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||
}
|
||||
#blue {
|
||||
background: blue;
|
||||
left: 56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id= "red"></div>
|
||||
<div class="balls" id= "blue"></div>
|
||||
```
|
||||
@ -0,0 +1,113 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad7
|
||||
title: Usare un gradiente lineare CSS per creare un elemento a strisce
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bmQh2'
|
||||
forumTopicId: 301072
|
||||
dashedName: 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.
|
||||
|
||||
```css
|
||||
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.
|
||||
|
||||
```js
|
||||
assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi));
|
||||
```
|
||||
|
||||
L'angolo del `repeating-linear-gradient()` dovrebbe essere di 90 gradi
|
||||
|
||||
```js
|
||||
assert(!code.match(/90deg/gi));
|
||||
```
|
||||
|
||||
La fermata del colore a 0 pixel dovrebbe essere `yellow`.
|
||||
|
||||
```js
|
||||
assert(code.match(/yellow\s+?0(px)?/gi));
|
||||
```
|
||||
|
||||
Un color stop a 40 pixel dovrebbe essere `yellow`.
|
||||
|
||||
```js
|
||||
assert(code.match(/yellow\s+?40px/gi));
|
||||
```
|
||||
|
||||
Il secondo color stop a 40 pixel dovrebbe essere `black`.
|
||||
|
||||
```js
|
||||
assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi));
|
||||
```
|
||||
|
||||
L'ultimo color stop a 80 pixel dovrebbe essere `black`.
|
||||
|
||||
```js
|
||||
assert(code.match(/black\s+?80px/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<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--
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae0
|
||||
title: Usare l'animazione CSS per cambiare lo stato hover di un pulsante
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cg4vZAa'
|
||||
forumTopicId: 301073
|
||||
dashedName: use-css-animation-to-change-the-hover-state-of-a-button
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Puoi usare `@keyframes` per cambiare il colore di un pulsante nel suo stato di hover.
|
||||
|
||||
Ecco un esempio di cambiamento della larghezza di un'immagine quando ci si passa sopra:
|
||||
|
||||
```html
|
||||
<style>
|
||||
img:hover {
|
||||
animation-name: width;
|
||||
animation-duration: 500ms;
|
||||
}
|
||||
|
||||
@keyframes width {
|
||||
100% {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Nota che `ms` sta per millisecondi, dove 1000ms è uguale a 1s.
|
||||
|
||||
Usa `@keyframes` per cambiare il `background-color` del `button` in modo che diventi `#4791d0` quando un utente passa sopra di esso. La regola `@keyframes` dovrebbe avere solo una voce per `100%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La regola @keyframes dovrebbe usare il background-color `animation-name`.
|
||||
|
||||
```js
|
||||
assert(code.match(/@keyframes\s+?background-color\s*?{/g));
|
||||
```
|
||||
|
||||
Ci dovrebbe essere una regola in `@keyframes` che cambia il `background-color` a `#4791d0` al 100%.
|
||||
|
||||
```js
|
||||
assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
button {
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: #0F5897;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
animation-name: background-color;
|
||||
animation-duration: 500ms;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<button>Register</button>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
button {
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: #0F5897;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
animation-name: background-color;
|
||||
animation-duration: 500ms;
|
||||
}
|
||||
|
||||
@keyframes background-color {
|
||||
100% {
|
||||
background-color: #4791d0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button>Register</button>
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512adb
|
||||
title: Usare la proprietà di trasformazione skewX per inclinare un elemento rispetto all'asse X
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLP8Sr'
|
||||
forumTopicId: 301074
|
||||
dashedName: use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La funzione successiva della proprietà `transform` è `skewX()`, che inclina l'elemento selezionato rispetto al suo asse X (orizzontale) di un certo grado.
|
||||
|
||||
Il seguente codice inclina l'elemento del paragrafo di -32 gradi sull'asse X.
|
||||
|
||||
```css
|
||||
p {
|
||||
transform: skewX(-32deg);
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Inclina l'elemento con l'id `bottom` di 24 gradi sull'asse X usando la proprietà `transform`.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento con l'id `bottom` dovrebbe essere inclinato di 24 gradi dal suo asse X.
|
||||
|
||||
```js
|
||||
assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#top {
|
||||
background-color: red;
|
||||
}
|
||||
#bottom {
|
||||
background-color: blue;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#top {
|
||||
background-color: red;
|
||||
}
|
||||
#bottom {
|
||||
background-color: blue;
|
||||
transform: skewX(24deg);
|
||||
}
|
||||
</style>
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
```
|
||||
@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512adc
|
||||
title: Usare la proprietà di trasformazione skewY per inclinare un elemento sull'asse Y
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MZ2uB'
|
||||
forumTopicId: 301075
|
||||
dashedName: use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dato che la funzione `skewX()` inclina l'elemento selezionato rispetto all'asse X di un certo grado, non sorprende che la proprietà `skewY()` inclini un elemento rispetto all'asse Y (verticale).
|
||||
|
||||
# --instructions--
|
||||
|
||||
Inclina l'elemento con l'id di `top` di -10 gradi rispetto all'asse Y utilizzando la proprietà `transform`.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento con id `top` dovrebbe essere inclinato di -10 gradi dal suo asse Y.
|
||||
|
||||
```js
|
||||
assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#top {
|
||||
background-color: red;
|
||||
|
||||
}
|
||||
#bottom {
|
||||
background-color: blue;
|
||||
transform: skewX(24deg);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#top {
|
||||
background-color: red;
|
||||
transform: skewY(-10deg);
|
||||
}
|
||||
#bottom {
|
||||
background-color: blue;
|
||||
transform: skewX(24deg);
|
||||
}
|
||||
</style>
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
```
|
||||
@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad9
|
||||
title: Usare la proprietà di trasformazione scale per cambiare la dimensione di un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MZVSg'
|
||||
forumTopicId: 301076
|
||||
dashedName: use-the-css-transform-scale-property-to-change-the-size-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per cambiare la scala di un elemento, CSS ha la proprietà `transform`, insieme alla sua funzione `scale()`. Il seguente esempio di codice raddoppia la dimensione di tutti gli elementi paragrafo sulla pagina:
|
||||
|
||||
```css
|
||||
p {
|
||||
transform: scale(2);
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aumenta la dimensione dell'elemento con l'id di `ball2` di 1,5 volte rispetto alla sua dimensione originale.
|
||||
|
||||
# --hints--
|
||||
|
||||
La proprietà `transform` per `#ball2` dovrebbe essere impostata per ingrandirla di 1,5 volte.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.ball {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 50 auto;
|
||||
position: fixed;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
border-radius: 50%;
|
||||
}
|
||||
#ball1 {
|
||||
left: 20%;
|
||||
}
|
||||
#ball2 {
|
||||
left: 65%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<div class="ball" id= "ball1"></div>
|
||||
<div class="ball" id= "ball2"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.ball {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 50 auto;
|
||||
position: fixed;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
border-radius: 50%;
|
||||
}
|
||||
#ball1 {
|
||||
left: 20%;
|
||||
}
|
||||
#ball2 {
|
||||
left: 65%;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
</style>
|
||||
<div class="ball" id= "ball1"></div>
|
||||
<div class="ball" id= "ball2"></div>
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ada
|
||||
title: Usare la proprietà di trasformazione scale per ridimensionare un elemento passandoci sopra
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLPJuM'
|
||||
forumTopicId: 301077
|
||||
dashedName: use-the-css-transform-scale-property-to-scale-an-element-on-hover
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La proprietà `transform` ha una varietà di funzioni che ti permettono di scalare, spostare, ruotare, inclinare, ecc., i tuoi elementi. Quando usata con pseudo-classi come `:hover` che specificano lo stato di un elemento, la proprietà `transform` può facilmente aggiungere interattività ai tuoi elementi.
|
||||
|
||||
Ecco un esempio per scalare gli elementi del paragrafo a 2.1 volte la loro dimensione originale quando un utente passa sopra di essi:
|
||||
|
||||
```css
|
||||
p:hover {
|
||||
transform: scale(2.1);
|
||||
}
|
||||
```
|
||||
|
||||
**Nota:** L'applicazione di una trasformazione a un elemento `div` influirà anche su tutti i sotto-elementi contenuti nel div.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi una regola CSS per lo stato `hover` del `div` e usa la proprietà `transform` per scalare l'elemento `div` in modo da rendere l'oggetto 1,1 volte la sua dimensione originale quando un utente ci passa sopra.
|
||||
|
||||
# --hints--
|
||||
|
||||
La dimensione dell'elemento `div` dovrebbe scalare di 1.1 volte quando l'utente passa sopra di esso.
|
||||
|
||||
```js
|
||||
assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
background: linear-gradient(
|
||||
53deg,
|
||||
#ccfffc,
|
||||
#ffcccf
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
background: linear-gradient(
|
||||
53deg,
|
||||
#ccfffc,
|
||||
#ffcccf
|
||||
);
|
||||
}
|
||||
div:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 587d781a367417b2b2512ab9
|
||||
title: Usare il tag em per italicizzare il Testo
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJRBtp'
|
||||
forumTopicId: 301078
|
||||
dashedName: use-the-em-tag-to-italicize-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per enfatizzare il testo, si possono usare i tag `em`. Questo mostra il testo in corsivo, in quanto il browser applica il CSS `font-style: italic;` all'elemento.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Inserisci il contenuto di un tag paragrafo in un tag `em`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe aggiungere un tag `em` al markup.
|
||||
|
||||
```js
|
||||
assert($('em').length == 1);
|
||||
```
|
||||
|
||||
Il tag `em` dovrebbe racchiudere il contenuto del tag `p` ma non il tag `p` stesso.
|
||||
|
||||
```js
|
||||
assert($('p').children().length == 1 && $('em').children().length == 2);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,135 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512aba
|
||||
title: Usare il tag s per barrare il testo
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
forumTopicId: 301079
|
||||
dashedName: use-the-s-tag-to-strikethrough-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per barrare il testo, ovvero tracciare una linea orizzontale che tagli i caratteri, è possibile utilizzare il tag `s`. Esso indica che una sezione di testo non è più valida. Con il tag `s`, il browser applica il CSS di `text-decoration: line-through;` all'elemento.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Avvolgi il tag `s` intorno a `Google` all'interno del tag `h4`, quindi aggiungi la parola `Alphabet` accanto ad esso, senza applicarle la formattazione barrata.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe aggiungere un tag `s` al markup.
|
||||
|
||||
```js
|
||||
assert($('s').length == 1);
|
||||
```
|
||||
|
||||
Un tag `s` dovrebbe avvolgere il testo `Google` nel tag `h4`. Esso non dovrebbe contenere la parola `Alphabet`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h4 > s')
|
||||
.text()
|
||||
.match(/Google/gi) &&
|
||||
!$('h4 > s')
|
||||
.text()
|
||||
.match(/Alphabet/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti includere la parola `Alphabet` nel tag `h4`, senza formattazione barrata.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h4')
|
||||
.html()
|
||||
.match(/Alphabet/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4><s>Google</s> Alphabet</h4>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,128 @@
|
||||
---
|
||||
id: 587d781a367417b2b2512ab7
|
||||
title: Usare il tag strong per rendere il testo grassetto
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/ceJNBSb'
|
||||
forumTopicId: 301080
|
||||
dashedName: use-the-strong-tag-to-make-text-bold
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per rendere il testo in grassetto, puoi usare il tag `strong`. Esso viene spesso usato per attirare l'attenzione sul testo e indicare che è importante. Con il tag `strong`, il browser applica il CSS di `font-weight: bold;` all'elemento.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Avvolgi un tag `strong` intorno al testo `Stanford University` all'interno del tag `p` (non includere il punto).
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe aggiungere un tag `strong` al markup.
|
||||
|
||||
```js
|
||||
assert($('strong').length == 1);
|
||||
```
|
||||
|
||||
Il tag `strong` dovrebbe essere all'interno del tag `p`.
|
||||
|
||||
```js
|
||||
assert($('p').children('strong').length == 1);
|
||||
```
|
||||
|
||||
Il tag `strong` dovrebbe avvolgere le parole `Stanford University`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('strong')
|
||||
.text()
|
||||
.match(/^Stanford University\.?$/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,138 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac0
|
||||
title: Usare la proprietà text-transform per rendere il testo maiuscolo
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cvVZQSP'
|
||||
forumTopicId: 301081
|
||||
dashedName: use-the-text-transform-property-to-make-text-uppercase
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La proprietà `text-transform` è usata in CSS per cambiare l'aspetto del testo. È un modo conveniente per assicurarsi che il testo su una pagina web appaia coerentemente, senza dover cambiare il contenuto di testo degli elementi HTML stessi.
|
||||
|
||||
La seguente tabella mostra come i diversi valori `text-transform`cambiano il testo di esempio "Transform me".
|
||||
|
||||
<table class='table table-striped'><thead><tr><th>Valore</th><th>Risultato</th></tr></thead><tbody><tr><td><code>lowercase</code></td><td>"transform me"</td></tr><tr><td><code>uppercase</code></td><td>"TRANSFORM ME"</td></tr><tr><td><code>capitalize</code></td><td>"Transform Me"</td></tr><tr><td><code>initial</code></td><td>Usa il valore predefinito</td></tr><tr><td><code>inherit</code></td><td>Usa il valore <code>text-transform</code> dell'elemento genitore</td></tr><tr><td><code>none</code></td><td><strong>Default:</strong> Usa il testo originale</td></tr></tbody></table>
|
||||
|
||||
# --instructions--
|
||||
|
||||
Trasforma il testo della proprietà `h4` in maiuscolo usando la proprietà `text-transform`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il testo `h4` dovrebbe essere `uppercase` (maiuscolo).
|
||||
|
||||
```js
|
||||
assert($('h4').css('text-transform') === 'uppercase');
|
||||
```
|
||||
|
||||
Il testo originale dell'h4 non dovrebbe essere modificato.
|
||||
|
||||
```js
|
||||
assert($('h4').text() !== $('h4').text().toUpperCase());
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
opacity: 0.7;
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
opacity: 0.7;
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,120 @@
|
||||
---
|
||||
id: 587d781a367417b2b2512ab8
|
||||
title: Usare il tag u per sottolineare il testo
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cN6aQCL'
|
||||
forumTopicId: 301082
|
||||
dashedName: use-the-u-tag-to-underline-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per sottolineare il testo, puoi usare il tag `u`. Esso è spesso usato per indicare che una sezione di testo è importante, o qualcosa da ricordare. Con il tag `u`, il browser applica il CSS di `text-decoration: underline;` all'elemento.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Avvolgi il tag `u` solo intorno al testo `Ph.D. students`.
|
||||
|
||||
**Nota:** Evita di usare il tag `u` quando potrebbe essere confuso con un link. Anche i tag di ancoraggio hanno una formattazione sottolineata predefinita.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo codice dovrebbe aggiungere un tag `u` al markup.
|
||||
|
||||
```js
|
||||
assert($('u').length === 1);
|
||||
```
|
||||
|
||||
Il tag `u` dovrebbe avvolgere il testo `Ph.D. students`.
|
||||
|
||||
```js
|
||||
assert($('u').text() === 'Ph.D. students');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,115 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08823
|
||||
title: Aggiungere un margine negativo a un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpyGs3'
|
||||
forumTopicId: 16166
|
||||
dashedName: add-a-negative-margin-to-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Il `margin` di un elemento controlla la quantità di spazio tra il suo `border` e gli elementi circostanti.
|
||||
|
||||
Se si imposta il `margin` di un elemento ad un valore negativo, l'elemento si allargherà.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Prova a impostare il `margin` ad un valore negativo come quello del riquadro rosso.
|
||||
|
||||
Imposta il `margin` del riquadro blu a `-15px`, in modo che riempia l'intera larghezza orizzontale del riquadro giallo intorno ad esso.
|
||||
|
||||
# --hints--
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare `-15px` di `margin` agli elementi.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '-15px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: -15px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: -15px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
margin-top: -15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,190 @@
|
||||
---
|
||||
id: bad87fee1348bd9bedf08813
|
||||
title: Aggiungere bordi Intorno agli elementi
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvnHZ'
|
||||
forumTopicId: 16630
|
||||
dashedName: add-borders-around-your-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
I bordi CSS hanno proprietà come `style`, `color` e `width`.
|
||||
|
||||
Per esempio, se volessimo creare un bordo rosso di 5 pixel attorno ad un elemento HTML, potremmo usare questa classe:
|
||||
|
||||
```html
|
||||
<style>
|
||||
.thin-red-border {
|
||||
border-color: red;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crea una classe chiamata `thick-green-border`. Questa classe dovrebbe aggiungere un bordo di 10px, solido e verde intorno ad un elemento HTML. Applica la classe alla foto del gatto.
|
||||
|
||||
Ricorda che puoi applicare più classi a un elemento usando il suo attributo `class`, separando ogni nome di classe con uno spazio. Per esempio:
|
||||
|
||||
```html
|
||||
<img class="class1 class2">
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `img` dovrebbe avere la classe `smaller-image`.
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('smaller-image'));
|
||||
```
|
||||
|
||||
Il tuo elemento `img` dovrebbe avere la classe `thick-green-border`.
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('thick-green-border'));
|
||||
```
|
||||
|
||||
La tua immagine dovrebbe avere uno spessore del bordo di `10px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('img').hasClass('thick-green-border') &&
|
||||
parseInt($('img').css('border-top-width'), 10) >= 8 &&
|
||||
parseInt($('img').css('border-top-width'), 10) <= 12
|
||||
);
|
||||
```
|
||||
|
||||
La tua immagine dovrebbe avere uno stile `solid` per il bordo.
|
||||
|
||||
```js
|
||||
assert($('img').css('border-right-style') === 'solid');
|
||||
```
|
||||
|
||||
Il bordo attorno al tuo elemento `img` dovrebbe essere verde.
|
||||
|
||||
```js
|
||||
assert($('img').css('border-left-color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-width: 10px;
|
||||
border-color: green;
|
||||
border-style: solid;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,136 @@
|
||||
---
|
||||
id: bad87fee1248bd9aedf08824
|
||||
title: Aggiungere margini differenti ad ogni lato di un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cg4RWh4'
|
||||
forumTopicId: 16633
|
||||
dashedName: add-different-margins-to-each-side-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A volte si vuole personalizzare un elemento in modo che abbia un `margin` diverso su ciascuno dei suoi lati.
|
||||
|
||||
CSS consente di controllare il `margin` di tutti e quattro i lati di un elemento con le proprietà `margin-top`, `margin-right`, `margin-bottom`e `margin-left`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Dài al riquadro blu un `margin` di `40px` sul lato superiore e sinistro, ma di soli `20px` sul lato inferiore e destro.
|
||||
|
||||
# --hints--
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare alla parte superiore degli elementi `40px` di `margin`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '40px');
|
||||
```
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare alla parte destra degli elementi `20px` di `margin`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-right') === '20px');
|
||||
```
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare alla parte inferiore degli elementi `20px` di `margin`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-bottom') === '20px');
|
||||
```
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare alla parte sinistra degli elementi `40px` di `margin`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-left') === '40px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
margin-top: 40px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
margin-top: 40px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
margin-top: 40px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,136 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08824
|
||||
title: Aggiungere un padding diverso su ogni lato di un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB7mwUw'
|
||||
forumTopicId: 16634
|
||||
dashedName: add-different-padding-to-each-side-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A volte si vuole personalizzare un elemento in modo che abbia un diverso `padding` (imbottitura) su ciascuno dei suoi lati.
|
||||
|
||||
CSS consente di controllare il `padding` di tutti e quattro i lati di un elemento con le proprietà `padding-top`, `padding-right`, `padding-bottom`e `padding-left`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Assegna al riquadro blu un `padding` di `40px` sul lato superiore e sinistro, ma di soli `20px` sul lato inferiore e destro.
|
||||
|
||||
# --hints--
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare alla parte superiore degli elementi `40px` di `padding`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '40px');
|
||||
```
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare alla parte destra degli elementi `20px` di `padding`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-right') === '20px');
|
||||
```
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare alla parte inferiore degli elementi `20px` di `padding`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-bottom') === '20px');
|
||||
```
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare alla parte sinistra degli elementi `40px` di `padding`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-left') === '40px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding-top: 40px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding-top: 40px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding-top: 40px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,164 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08814
|
||||
title: Aggiungere degli angoli arrotondati con border-radius
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cbZm2hg'
|
||||
forumTopicId: 16649
|
||||
dashedName: add-rounded-corners-with-border-radius
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La tua foto del gatto attualmente ha gli angoli squadrati. Possiamo arrotondare gli angoli con una proprietà di CSS chiamata `border-radius`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Puoi specificare un `border-radius` in pixel. Dai alla foto del gatto un `border-radius` di `10px`.
|
||||
|
||||
**Nota:** Questa sfida ha diverse soluzioni possibili. Ad esempio, puoi aggiungere `border-radius` alla classe `.thick-green-border` o alla classe `.smaller-image`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento img dovrebbe avere la classe `thick-green-border`.
|
||||
|
||||
```js
|
||||
assert($('img').hasClass('thick-green-border'));
|
||||
```
|
||||
|
||||
La tua immagine dovrebbe avere un border radius di `10px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('img').css('border-top-left-radius') === '10px' &&
|
||||
$('img').css('border-top-right-radius') === '10px' &&
|
||||
$('img').css('border-bottom-left-radius') === '10px' &&
|
||||
$('img').css('border-bottom-right-radius') === '10px'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,116 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08822
|
||||
title: Regolare il margine di un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJarHW'
|
||||
forumTopicId: 16654
|
||||
dashedName: adjust-the-margin-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Il `margin` di un elemento controlla la quantità di spazio tra il suo `border` e gli elementi circostanti.
|
||||
|
||||
Qui possiamo vedere che il riquadro blu e quello rosso sono annidati all'interno del riquadro giallo. Nota che il riquadro rosso ha un `margin` più grande di quello blu, e questo fa sì che appaia più piccolo.
|
||||
|
||||
Quando si aumenta il `margin` del riquadro blu, esso aumenta la distanza tra il suo bordo e gli elementi circostanti.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Cambia il `margin` del riquadro blu per farlo corrispondere a quello del riquadro rosso.
|
||||
|
||||
# --hints--
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare agli elementi `20px` di `margin`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '20px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,118 @@
|
||||
---
|
||||
id: bad88fee1348bd9aedf08825
|
||||
title: Regolare il padding di un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cED8ZC2'
|
||||
forumTopicId: 301083
|
||||
dashedName: adjust-the-padding-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ora mettiamo da parte per un po' la nostra Cat Photo App e impariamo di più sugli stili in HTML.
|
||||
|
||||
Potresti averlo già notato, ma tutti gli elementi HTML sono essenzialmente piccoli rettangoli.
|
||||
|
||||
Tre importanti proprietà controllano lo spazio che circonda ogni elemento HTML: `padding`, `border` e `margin`.
|
||||
|
||||
Un elemento `padding` controlla la quantità di spazio tra il contenuto dell'elemento e il suo `border`.
|
||||
|
||||
Qui possiamo vedere che il riquadro blu e quello rosso sono annidati all'interno del riquadro giallo. Si noti che il riquadro rosso ha più `padding` di quello blu.
|
||||
|
||||
Quando aumenti il `padding` del riquadro blu, aumenterà la distanza (`padding`) tra il testo e il bordo attorno ad esso.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Cambia il `padding` del riquadro blu per farlo corrispondere a quello del riquadro rosso.
|
||||
|
||||
# --hints--
|
||||
|
||||
La tua classe `blue-box` dovrebbe dare agli elementi `20px` di `padding`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '20px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,272 @@
|
||||
---
|
||||
id: 5a9d7286424fe3d0e10cad13
|
||||
title: Aggiungere un valore di fallback a una variabile CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bDNfp'
|
||||
forumTopicId: 301084
|
||||
dashedName: attach-a-fallback-value-to-a-css-variable
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Quando si utilizza una variabile come valore di proprietà CSS, è possibile allegare un valore di ripiego (fallback) al quale il browser ritornerà se la variabile data non è valida.
|
||||
|
||||
**Nota:** Questo fallback non viene utilizzato per aumentare la compatibilità del browser e non funzionerà con i browser IE. Piuttosto, viene utilizzato in modo che il browser abbia un colore da visualizzare se non riesce a trovare la tua variabile.
|
||||
|
||||
Ecco come si fa:
|
||||
|
||||
```css
|
||||
background: var(--penguin-skin, black);
|
||||
```
|
||||
|
||||
Questo imposterà lo sfondo a `black` se la tua variabile non è stata impostata. Nota che questo può essere utile per il debug.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Sembra che ci sia un problema con le variabili fornite alle classi `.penguin-top` e `.penguin-bottom`. Invece di correggere l'errore, aggiungi un valore di fallback di `black` alla proprietà `background` delle classi `.penguin-top` e `.penguin-bottom`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il valore di fallback di `black` dovrebbe essere utilizzato nella proprietà `background` della classe `penguin-top`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Il valore di fallback di `black` dovrebbe essere utilizzato nella proprietà `background` della classe `penguin-bottom`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {
|
||||
--penguin-skin: black;
|
||||
--penguin-belly: gray;
|
||||
--penguin-beak: yellow;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
|
||||
/* Change code below this line */
|
||||
background: var(--pengiun-skin);
|
||||
/* Change code above this line */
|
||||
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
|
||||
/* Change code below this line */
|
||||
background: var(--pengiun-skin);
|
||||
/* Change code above this line */
|
||||
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, black);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, black);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin-top {
|
||||
background: var(--pengiun-skin, black);
|
||||
}
|
||||
.penguin-bottom {
|
||||
background: var(--pengiun-skin, black);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@ -0,0 +1,254 @@
|
||||
---
|
||||
id: 5a9d72a1424fe3d0e10cad15
|
||||
title: Modificare una variabile per un'area specifica
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cdRwbuW'
|
||||
forumTopicId: 301085
|
||||
dashedName: change-a-variable-for-a-specific-area
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Quando crei le tue variabili in `:root` questo imposterà il loro valore per l'intera pagina.
|
||||
|
||||
È quindi possibile sovrascrivere queste variabili impostandole di nuovo all'interno di un elemento specifico.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Cambia il valore di `--penguin-belly` in `white` nella classe `penguin`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `penguin` dovrebbe riassegnare alla variabile `--penguin-belly` il valore `white`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
La classe `penguin` non dovrebbe contenere la proprietà `background-color`
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/^((?!background-color\s*?:\s*?)[\s\S])*$/g)
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--penguin-skin: gray;
|
||||
--penguin-belly: pink;
|
||||
--penguin-beak: orange;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--penguin-belly, #c6faf1);
|
||||
}
|
||||
|
||||
.penguin {
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, pink);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, pink);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, pink);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {--penguin-belly: white;}
|
||||
</style>
|
||||
```
|
||||
@ -0,0 +1,122 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08803
|
||||
title: Cambiare il colore del testo
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkVmSm'
|
||||
forumTopicId: 16775
|
||||
dashedName: change-the-color-of-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ora cambiamo il colore di alcuni dei nostri testi.
|
||||
|
||||
Possiamo farlo cambiando lo `style` dell'elemento `h2`.
|
||||
|
||||
La proprietà responsabile del colore del testo di un elemento è la proprietà di stile `color`.
|
||||
|
||||
Ecco come impostare il colore del testo del tuo elemento `h2` su blu:
|
||||
|
||||
```html
|
||||
<h2 style="color: blue;">CatPhotoApp</h2>
|
||||
```
|
||||
|
||||
Nota che è una buona pratica terminare le dichiarazioni in linea `style` con un `;`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Cambia lo stile dell'elemento `h2` in modo che il colore del testo sia rosso.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `h2` dovrebbe avere una dichiarazione `style`.
|
||||
|
||||
```js
|
||||
assert($('h2').attr('style'));
|
||||
```
|
||||
|
||||
Il tuo elemento `h2` dovrebbe avere il color impostato su `red`.
|
||||
|
||||
```js
|
||||
assert($('h2')[0].style.color === 'red');
|
||||
```
|
||||
|
||||
La tua dichiarazione `style` dovrebbe terminare con un `;`.
|
||||
|
||||
```js
|
||||
assert($('h2').attr('style') && $('h2').attr('style').endsWith(';'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2 style="color: red;">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,119 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08806
|
||||
title: Cambiare la dimensione del carattere di un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bvDc8'
|
||||
forumTopicId: 16777
|
||||
dashedName: change-the-font-size-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La dimensione del carattere è controllata dalla proprietà CSS `font-size`, come in questo esempio:
|
||||
|
||||
```css
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
All'interno dello stesso tag `<style>` che contiene la tua classe `red-text`, crea una voce per `p` e imposta il `font-size` a 16 pixel (`16px`).
|
||||
|
||||
# --hints--
|
||||
|
||||
All'interno dei tag `style`, dai agli elementi `p` un `font-size` di `16px`. L'ingrandimento del browser e del testo dovrebbe essere al 100%.
|
||||
|
||||
```js
|
||||
assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,241 @@
|
||||
---
|
||||
id: 5a9d726c424fe3d0e10cad11
|
||||
title: Creare una variabile CSS personalizzata
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cQd27Hr'
|
||||
forumTopicId: 301086
|
||||
dashedName: create-a-custom-css-variable
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per creare una variabile CSS, hai solo bisogno di dargli un nome con due trattini di fronte e assegnargli un valore come questo:
|
||||
|
||||
```css
|
||||
--penguin-skin: gray;
|
||||
```
|
||||
|
||||
Questo creerà una variabile chiamata `--penguin-skin` e assegnerà ad essa il valore di `gray`. Ora puoi usare quella variabile da altre parti nel tuo CSS per impostare il valore di altri elementi su grigio.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Nella classe `penguin`, crea una variabile `--penguin-skin` e dai ad essa un valore `gray`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La classe `penguin` dovrebbe dichiarare la variabile `--penguin-skin` e assegnarle il valore `gray`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\.penguin\s*\{[^{}]*?--penguin-skin\s*:\s*gr[ae]y\s*;[^{}]*?\}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.penguin {
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: black;
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: black;
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: black;
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: white;
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: white;
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: white;
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: orange;
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: orange;
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: orange;
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: orange;
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
body {
|
||||
background:#c6faf1;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.penguin {--penguin-skin: gray;}</style>
|
||||
```
|
||||
@ -0,0 +1,176 @@
|
||||
---
|
||||
id: bad87fed1348bd9aede07836
|
||||
title: Dare un colore di sfondo a un elemento div
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cdRKMCk'
|
||||
forumTopicId: 18190
|
||||
dashedName: give-a-background-color-to-a-div-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
È possibile impostare il colore di sfondo di un elemento con la proprietà `background-color`.
|
||||
|
||||
Ad esempio, se volessi che il colore di sfondo di un elemento fosse `green`, dovresti metterlo all'interno del tuo elemento `style`:
|
||||
|
||||
```css
|
||||
.green-background {
|
||||
background-color: green;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crea una classe chiamata `silver-background` con il `background-color` di `silver`. Assegna questa classe al tuo elemento `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `div` dovrebbe avere la classe `silver-background`.
|
||||
|
||||
```js
|
||||
assert($('div').hasClass('silver-background'));
|
||||
```
|
||||
|
||||
Il tuo elemento `div` dovrebbe avere uno sfondo silver.
|
||||
|
||||
```js
|
||||
assert($('div').css('background-color') === 'rgb(192, 192, 192)');
|
||||
```
|
||||
|
||||
Una classe chiamata `silver-background` dovrebbe essere definita all'interno dell'elemento`style` e il valore di `silver` dovrebbe essere assegnato alla proprietà `background-color`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,175 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08807
|
||||
title: Importare un font Google
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM9MRsJ'
|
||||
forumTopicId: 18200
|
||||
dashedName: import-a-google-font
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Oltre a specificare i caratteri comuni che si trovano nella maggior parte dei sistemi operativi, possiamo anche specificare font web personalizzati non standard per l'uso nel nostro sito web. Ci sono molte fonti dove reperire i web fonts su Internet. Per questo esempio ci concentreremo sulla libreria Google Fonts.
|
||||
|
||||
[Google Fonts](https://fonts.google.com/) è una libreria gratuita di web fonts che puoi usare nel tuo CSS facendo riferimento all'URL del font.
|
||||
|
||||
Quindi, andiamo avanti e importiamo e applichiamo un carattere di Google (nota che se Google è bloccato nel vostro paese, dovrai saltare questa fase).
|
||||
|
||||
Per importare un font Google, puoi copiare l'URL del font dalla libreria di font Google e poi incollarlo nel tuo HTML. Per questa sfida, importeremo il font `Lobster`. Per fare questo, copia la seguente linea di codice e incollala nella parte superiore dell'editor di codice (prima dell'elemento di apertura `style`):
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
```
|
||||
|
||||
Ora puoi usare il carattere `Lobster` nel tuo CSS usando `Lobster` come FAMILY_NAME come nell'esempio seguente:
|
||||
|
||||
```css
|
||||
font-family: FAMILY_NAME, GENERIC_NAME;
|
||||
```
|
||||
|
||||
Il GENERIC_NAME è opzionale, ed è un carattere di ripiego nel caso in cui l'altro carattere specificato non sia disponibile. Questo aspetto viene affrontato nella prossima sfida.
|
||||
|
||||
I family name sono sensibili alle maiuscole e devono essere inseriti tra virgolette se c'è uno spazio nel nome. Ad esempio, hai bisogno delle virgolette per usare il carattere `"Open Sans"`, ma per non per usare il carattere `Lobster`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Importa il carattere `Lobster` nella tua pagina web. Usa quindi un selettore di elementi per impostare `Lobster` come `font-family` per il tuo elemento `h2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Devi importare il font `Lobster`.
|
||||
|
||||
```js
|
||||
assert($('link[href*="googleapis" i]').length);
|
||||
```
|
||||
|
||||
Il tuo elemento `h2` dovrebbe usare il font `Lobster`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h2')
|
||||
.css('font-family')
|
||||
.match(/lobster/i)
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti utilizzare solo un selettore di elementi `h2` per cambiare il carattere.
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\s*[^\.]h2\s*\{\s*font-family\s*:\s*('|"|)Lobster\1\s*(,\s*('|"|)[a-z -]+\3\s*)?(;\s*\}|\})/gi.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo elemento `p` dovrebbe usare il font `monospace`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('p')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,70 @@
|
||||
---
|
||||
id: 5b7d72c338cd7e35b63f3e14
|
||||
title: Migliorare la compatibilità con i fallback del browser
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
forumTopicId: 301087
|
||||
dashedName: improve-compatibility-with-browser-fallbacks
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Quando si lavora con CSS è probabile che prima o poi si incontrino problemi di compatibilità del browser. Ecco perché è importante fornire fallback del browser per evitare potenziali problemi.
|
||||
|
||||
Quando il tuo browser analizza il CSS di una pagina web, ignora qualsiasi proprietà che non riconosce o supporta. Ad esempio, se si utilizza una variabile CSS per assegnare un colore di sfondo ad un sito, Internet Explorer ignorerà il colore di sfondo perché non supporta le variabili CSS. In questo caso, il browser userà qualsiasi valore abbia per quella proprietà. Se non riesce a trovare alcun altro valore impostato per quella proprietà, tornerà al valore predefinito, che in genere non è l'ideale.
|
||||
|
||||
Ciò significa che se si desidera fornire un fallback del browser, è sufficiente fornire un altro valore più ampiamente supportato immediatamente prima della dichiarazione. In questo modo un browser più vecchio avrà qualcosa su cui ripiegare, mentre un browser più recente interpreterà semplicemente qualsiasi dichiarazione arriverà più tardi nella cascata.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Sembra che venga utilizzata una variabile per impostare il colore di sfondo della classe `.red-box`. Miglioriamo la compatibilità del nostro browser aggiungendo un'altra dichiarazione `background` subito prima della dichiarazione esistente e impostiamo il suo valore su `red`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La tua regola `.red-box` dovrebbe includere un fallback con il `background` impostato su `red` immediatamente prima della dichiarazione `background` esistente.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code
|
||||
.replace(/\s/g, '')
|
||||
.match(
|
||||
/\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--red-color: red;
|
||||
}
|
||||
.red-box {
|
||||
|
||||
background: var(--red-color);
|
||||
height: 200px;
|
||||
width:200px;
|
||||
}
|
||||
</style>
|
||||
<div class="red-box"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--red-color: red;
|
||||
}
|
||||
.red-box {
|
||||
background: red;
|
||||
background: var(--red-color);
|
||||
height: 200px;
|
||||
width:200px;
|
||||
}
|
||||
</style>
|
||||
<div class="red-box"></div>
|
||||
```
|
||||
@ -0,0 +1,244 @@
|
||||
---
|
||||
id: 5a9d7295424fe3d0e10cad14
|
||||
title: Ereditare variabili CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLZZhZ'
|
||||
forumTopicId: 301088
|
||||
dashedName: inherit-css-variables
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Quando crei una variabile, essa è disponibile per essere usata all'interno del selettore nel quale l'hai creata. Essa è disponibile anche in qualsiasi discendente di quel selettore. Questo avviene perché le variabili CSS sono ereditate, proprio come le proprietà ordinarie.
|
||||
|
||||
Per fare uso dell'ereditarietà, le variabili CSS sono spesso definite nell'elemento <dfn>:root</dfn>.
|
||||
|
||||
`:root` è un selettore di <dfn>pseudo-classe</dfn> che corrisponde all'elemento radice del documento, di solito l'elemento `html`. Creando le tue variabili in `:root`, esse saranno disponibili globalmente e accessibili da qualsiasi altro selettore nel foglio di stile.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Definisci una variabile denominata `--penguin-belly` nel selettore `:root` e dalle il valore di `pink`. Puoi quindi vedere che la variabile è ereditata e che tutti gli elementi figlio che la utilizzano hanno sfondi rosa.
|
||||
|
||||
# --hints--
|
||||
|
||||
La variabile `--penguin-belly` deve essere dichiarata in `:root` e deve avere il valore `pink`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--penguin-belly, #c6faf1);
|
||||
}
|
||||
|
||||
.penguin {
|
||||
--penguin-skin: gray;
|
||||
--penguin-beak: orange;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
display: block;
|
||||
margin-top: 5%;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.right-cheek {
|
||||
top: 15%;
|
||||
left: 35%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.left-cheek {
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.belly {
|
||||
top: 60%;
|
||||
left: 2.5%;
|
||||
background: var(--penguin-belly, white);
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
border-radius: 120% 120% 100% 100%;
|
||||
}
|
||||
|
||||
.penguin-top {
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 50%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 60% 60%;
|
||||
}
|
||||
|
||||
.penguin-bottom {
|
||||
top: 40%;
|
||||
left: 23.5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 53%;
|
||||
height: 45%;
|
||||
border-radius: 70% 70% 100% 100%;
|
||||
}
|
||||
|
||||
.right-hand {
|
||||
top: 0%;
|
||||
left: -5%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 120% 30%;
|
||||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left-hand {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
background: var(--penguin-skin, gray);
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
border-radius: 30% 30% 30% 120%;
|
||||
transform: rotate(-45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.right-feet {
|
||||
top: 85%;
|
||||
left: 60%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(-80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.left-feet {
|
||||
top: 85%;
|
||||
left: 25%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 15%;
|
||||
height: 30%;
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
transform: rotate(80deg);
|
||||
z-index: -2222;
|
||||
}
|
||||
|
||||
.right-eye {
|
||||
top: 45%;
|
||||
left: 60%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.left-eye {
|
||||
top: 45%;
|
||||
left: 25%;
|
||||
background: black;
|
||||
width: 15%;
|
||||
height: 17%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
top: 25%;
|
||||
left: 15%;
|
||||
background: white;
|
||||
width: 35%;
|
||||
height: 35%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-right {
|
||||
top: 65%;
|
||||
left: 15%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.blush-left {
|
||||
top: 65%;
|
||||
left: 70%;
|
||||
background: pink;
|
||||
width: 15%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-top {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 20%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.beak-bottom {
|
||||
top: 65%;
|
||||
left: 42%;
|
||||
background: var(--penguin-beak, orange);
|
||||
width: 16%;
|
||||
height: 10%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.penguin * {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<div class="penguin">
|
||||
<div class="penguin-bottom">
|
||||
<div class="right-hand"></div>
|
||||
<div class="left-hand"></div>
|
||||
<div class="right-feet"></div>
|
||||
<div class="left-feet"></div>
|
||||
</div>
|
||||
<div class="penguin-top">
|
||||
<div class="right-cheek"></div>
|
||||
<div class="left-cheek"></div>
|
||||
<div class="belly"></div>
|
||||
<div class="right-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="left-eye">
|
||||
<div class="sparkle"></div>
|
||||
</div>
|
||||
<div class="blush-right"></div>
|
||||
<div class="blush-left"></div>
|
||||
<div class="beak-top"></div>
|
||||
<div class="beak-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>:root {--penguin-belly: pink;}</style>
|
||||
```
|
||||
@ -0,0 +1,111 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08746
|
||||
title: Ereditare gli stili dall'elemento Body
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c9bmdtR'
|
||||
forumTopicId: 18204
|
||||
dashedName: inherit-styles-from-the-body-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Abbiamo visto che ogni pagina HTML ha un elemento `body`, e che anche il suo elemento `body` può essere stilizzato con CSS.
|
||||
|
||||
Ricorda, puoi stilizzare il tuo elemento `body` proprio come qualsiasi altro elemento HTML, e tutti gli altri elementi erediteranno gli stili dell'elemento `body`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Per prima cosa, crea un elemento `h1` con il testo `Hello World`
|
||||
|
||||
Quindi, dai a tutti gli elementi sulla tua pagina il colore `green` aggiungendo `color: green;` alla tua dichiarazione di stile dell'elemento `body`.
|
||||
|
||||
Infine, dai al tuo elemento `body` la font-family di `monospace` aggiungendo `font-family: monospace;` alla tua dichiarazione di stile per l'elemento `body`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare un elemento `h1`.
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0);
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe contenere il testo `Hello World`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h1').length > 0 &&
|
||||
$('h1')
|
||||
.text()
|
||||
.match(/hello world/i)
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe avere un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/h1>/g) &&
|
||||
code.match(/<h1/g) &&
|
||||
code.match(/<\/h1>/g).length === code.match(/<h1/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo elemento `body` dovrebbe avere la proprietà `color` di `green`.
|
||||
|
||||
```js
|
||||
assert($('body').css('color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
Il tuo elemento `body` dovrebbe avere la proprietà `font-family` di `monospace`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('body')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe ereditare il font `monospace` dal tuo elemento `body`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h1').length > 0 &&
|
||||
$('h1')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe ereditare il colore verde dal tuo elemento`body`.
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
|
||||
</style>
|
||||
<h1>Hello World!</h1>
|
||||
```
|
||||
@ -0,0 +1,159 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08815
|
||||
title: Creare immagini circolari con il border-radius
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvrcB'
|
||||
forumTopicId: 18229
|
||||
dashedName: make-circular-images-with-a-border-radius
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Oltre che con i pixel, è anche possibile specificare il `border-radius` utilizzando una percentuale.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Dai alla foto del gatto un `border-radius` del `50%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
La tua immagine dovrebbe avere un border-radius del `50%`, rendendola perfettamente circolare.
|
||||
|
||||
```js
|
||||
assert(parseInt($('img').css('border-top-left-radius')) > 48);
|
||||
```
|
||||
|
||||
Il valore di `border-radius` dovrebbe usare un valore percentuale di `50%`.
|
||||
|
||||
```js
|
||||
assert(code.match(/50%/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,114 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf07756
|
||||
title: Sovrascrivere tutti gli altri stili usando Important
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cm24rcp'
|
||||
forumTopicId: 18249
|
||||
dashedName: override-all-other-styles-by-using-important
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Sì! Abbiamo appena dimostrato che gli stili in linea sovrascrivono tutte le dichiarazioni CSS del tuo elemento `style`.
|
||||
|
||||
Ma aspetta... C'è un ultimo modo per sovrascrivere CSS. Questo è il metodo più potente di tutti. Prima di farlo però parliamo del perché mai vorresti sovrascrivere i CSS.
|
||||
|
||||
In molte situazioni, utilizzerai delle librerie CSS. Queste possono accidentalmente sovrascrivere il CSS scritto da te. Quindi, quando hai assolutamente bisogno di essere sicuro che un elemento abbia un CSS specifico, puoi usare `!important`.
|
||||
|
||||
Ritorniamo alla nostra dichiarazione di classe `pink-text`. Ricorda che la nostra classe `pink-text` è stata sovrascritta da successive dichiarazioni di classe, dichiarazioni id e stili in linea.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Aggiungi la parola chiave `!important` alla dichiarazione del colore dell'elemento pink-text per avere la certezza che il tuo elemento `h1` diventi rosa.
|
||||
|
||||
Un esempio di come farlo è il seguente:
|
||||
|
||||
```css
|
||||
color: red !important;
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `h1` dovrebbe avere la classe `pink-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe avere la classe `blue-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe avere l'`id` di `orange-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe avere lo stile inline di `color: white`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));
|
||||
```
|
||||
|
||||
La tua dichiarazione di classe `pink-text` dovrebbe avere la parola chiave `!important` per sovrascrivere tutte le altre dichiarazioni.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g)
|
||||
);
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe essere rosa.
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 192, 203)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink !important;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
|
||||
```
|
||||
@ -0,0 +1,123 @@
|
||||
---
|
||||
id: bad87fee1348bd8aedf06756
|
||||
title: Sovrascrivere le dichiarazioni di classe stilizzando gli attributi ID
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkpDhB'
|
||||
forumTopicId: 18251
|
||||
dashedName: override-class-declarations-by-styling-id-attributes
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Abbiamo appena dimostrato che i browser leggono CSS dall'alto al basso, in ordine di dichiarazione. Ciò significa che, in caso di conflitto, il browser utilizzerà la dichiarazione CSS che è arrivata per ultima. Nota che se avessimo messo `blue-text` prima di `pink-text` nelle classi dell'elemento `h1`, il browser rispetterebbe ancora l'ordine di dichiarazione e non l'ordine con cui vengono usate!
|
||||
|
||||
Però non abbiamo ancora finito. Ci sono altri modi in cui puoi sovrascrivere il CSS. Ti ricordi gli attributi id?
|
||||
|
||||
Sovrascrivi le tue classi `pink-text` e `blue-text`, e rendi il tuo elemento `h1` arancione, dando all'elemento `h1` un id e poi stilizzando questo id.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Dai al tuo elemento `h1` l'attributo `id` di `orange-text`. Ricorda, gli id di stile appaiono così:
|
||||
|
||||
```html
|
||||
<h1 id="orange-text">
|
||||
```
|
||||
|
||||
Lascia le classi `blue-text` e `pink-text` sul tuo elemento `h1`.
|
||||
|
||||
Crea una dichiarazione CSS per il tuo id `orange-text` nel tuo elemento`style`. Ecco un esempio di come questo appare:
|
||||
|
||||
```css
|
||||
#brown-text {
|
||||
color: brown;
|
||||
}
|
||||
```
|
||||
|
||||
**Nota:** Non importa se dichiari questo CSS sopra o sotto la classe `pink-text`, dato che l'attributo `id` avrà sempre la priorità.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `h1` dovrebbe avere la classe `pink-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
L'elemento `h1` dovrebbe avere la classe `blue-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe avere l'id di `orange-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
```
|
||||
|
||||
Dovrebbe esserci un solo elemento `h1`.
|
||||
|
||||
```js
|
||||
assert($('h1').length === 1);
|
||||
```
|
||||
|
||||
Il tuo id `orange-text` dovrebbe avere una dichiarazione CSS.
|
||||
|
||||
```js
|
||||
assert(code.match(/#orange-text\s*{/gi));
|
||||
```
|
||||
|
||||
Il tuo tag `h1` non dovrebbe avere alcun attributo `style`.
|
||||
|
||||
```js
|
||||
assert(!code.match(/<h1.*style.*>/gi));
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe essere arancione.
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 165, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 class="pink-text blue-text">Hello World!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
|
||||
```
|
||||
@ -0,0 +1,102 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf06756
|
||||
title: Sovrascrivere le dichiarazioni di classe con gli stili in linea
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJDRha'
|
||||
forumTopicId: 18252
|
||||
dashedName: override-class-declarations-with-inline-styles
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Abbiamo mostrato che le dichiarazioni id sovrascrivono le dichiarazioni di classe, indipendentemente da dove vengono dichiarate nell'elemento `style`.
|
||||
|
||||
Ci sono altri modi in cui puoi sovrascrivere il CSS. Ti ricordi gli stili inline?
|
||||
|
||||
# --instructions--
|
||||
|
||||
Usa uno stile in linea per cercare di rendere bianco l'elemento `h1`. Ricorda, gli stili inline appaiono così:
|
||||
|
||||
```html
|
||||
<h1 style="color: green;">
|
||||
```
|
||||
|
||||
Lascia le classi `blue-text` e `pink-text` sul tuo elemento `h1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `h1` dovrebbe avere la classe `pink-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
L'elemento `h1` dovrebbe avere la classe `blue-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
L'elemento `h1` dovrebbe avere l'id di `orange-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').attr('id') === 'orange-text');
|
||||
```
|
||||
|
||||
L'elemento `h1` dovrebbe avere uno stile inline.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('h1[style]'));
|
||||
```
|
||||
|
||||
L'elemento `h1` dovrebbe essere bianco.
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 255, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
#orange-text {
|
||||
color: orange;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
|
||||
```
|
||||
@ -0,0 +1,94 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf04756
|
||||
title: Sovrascrivere gli stili nei CSS successivi
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJDQug'
|
||||
forumTopicId: 18253
|
||||
dashedName: override-styles-in-subsequent-css
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La nostra classe `pink-text` sovrascrive la dichiarazione CSS del `body`!
|
||||
|
||||
Abbiamo appena dimostrato che le nostre classi sovrascriveranno il CSS dell'elemento `body`. Quindi la prossima domanda logica è: che cosa possiamo fare per sovrascrivere la nostra classe `pink-text`?
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crea una classe CSS aggiuntiva chiamata `blue-text` che dia ad un elemento il colore blu. Assicurati che sia sotto la tua dichiarazione di classe `pink-text`.
|
||||
|
||||
Applica la classe `blue-text` al tuo elemento `h1` in aggiunta alla tua classe `pink-text`, e vediamo quale vince.
|
||||
|
||||
Per applicare più attributi di classe a un elemento HTML devi inserire degli spazi bianchi tra di essi in questo modo:
|
||||
|
||||
```html
|
||||
class="class1 class2"
|
||||
```
|
||||
|
||||
**Nota:** Non importa in quale ordine sono elencate le classi nell'elemento HTML.
|
||||
|
||||
Quello che veramente conta è l'ordine delle dichiarazioni di `class` nella sezione `<style>`. La seconda dichiarazione avrà sempre la precedenza sulla prima. Poiché `.blue-text` viene dichiarato per secondo, esso sovrascrive gli attributi di `.pink-text`
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `h1` dovrebbe avere la classe `pink-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
L'elemento `h1` dovrebbe avere la classe `blue-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
Entrambe le classi `blue-text` e `pink-text` dovrebbero essere associate al tuo elemento `h1`.
|
||||
|
||||
```js
|
||||
assert($('.pink-text').hasClass('blue-text'));
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe essere blu.
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
</style>
|
||||
<h1 class="pink-text">Hello World!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<h1 class="pink-text blue-text">Hello World!</h1>
|
||||
```
|
||||
@ -0,0 +1,73 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08756
|
||||
title: Dare una priorità maggiore a uno stile rispetto a un altro
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cZ8wnHv'
|
||||
forumTopicId: 18258
|
||||
dashedName: prioritize-one-style-over-another
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A volte i tuoi elementi HTML riceveranno più stili in conflitto tra loro.
|
||||
|
||||
Ad esempio, l'elemento `h1` non può essere sia verde che rosa allo stesso tempo.
|
||||
|
||||
Vediamo cosa succede quando creiamo una classe che rende il testo rosa, quindi applicalo a un elemento. La nostra classe *sovrascriverà* la proprietà CSS `color: green;` dell'elemento `body`?
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crea una classe CSS chiamata `pink-text` che dia a un elemento il colore rosa.
|
||||
|
||||
Dai al tuo elemento `h1` la classe `pink-text`.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `h1` dovrebbe avere la classe `pink-text`.
|
||||
|
||||
```js
|
||||
assert($('h1').hasClass('pink-text'));
|
||||
```
|
||||
|
||||
Il tuo `<style>` dovrebbe avere una classe CSS `pink-text` che modifica il `color`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;?\s*\}/g));
|
||||
```
|
||||
|
||||
Il tuo elemento `h1` dovrebbe essere rosa.
|
||||
|
||||
```js
|
||||
assert($('h1').css('color') === 'rgb(255, 192, 203)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<h1>Hello World!</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
color: green;
|
||||
}
|
||||
.pink-text {
|
||||
color: pink;
|
||||
}
|
||||
</style>
|
||||
<h1 class="pink-text">Hello World!</h1>
|
||||
```
|
||||
@ -0,0 +1,132 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08807
|
||||
title: Impostare la famiglia di caratteri di un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bvpCg'
|
||||
forumTopicId: 18278
|
||||
dashedName: set-the-font-family-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Puoi impostare il tipo di carattere che un elemento deve utilizzare con la proprietà `font-family`.
|
||||
|
||||
Ad esempio, se desideri impostare il carattere del tuo elemento `h2` su `sans-serif`, dovresti utilizzare il seguente CSS:
|
||||
|
||||
```css
|
||||
h2 {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Fai in modo che tutti i tuoi elementi `p` utilizzino il carattere `monospace`.
|
||||
|
||||
# --hints--
|
||||
|
||||
I tuoi elementi `p` dovrebbero usare il font `monospace`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('p')
|
||||
.not('.red-text')
|
||||
.css('font-family')
|
||||
.match(/monospace/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,170 @@
|
||||
---
|
||||
id: bad87eee1348bd9aede07836
|
||||
title: Impostare l'id di un elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cN6MEc2'
|
||||
forumTopicId: 18279
|
||||
dashedName: set-the-id-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Oltre alle classi, ogni elemento HTML può avere anche un attributo `id`.
|
||||
|
||||
Ci sono diversi vantaggi ad usare gli attributi `id`: puoi usare un `id` per stilizzare un singolo elemento, e in seguito imparerai che puoi usarli per selezionare e modificare elementi specifici con JavaScript.
|
||||
|
||||
Gli attributi `id` dovrebbero essere unici. I browser non applicano questa regola rigorosamente, ma è una buona pratica largamente accettata. Quindi non dare a più di un elemento lo stesso attributo `id`.
|
||||
|
||||
Ecco un esempio di come fornire al tuo elemento `h2` l'id di `cat-photo-app`:
|
||||
|
||||
```html
|
||||
<h2 id="cat-photo-app">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Dai al tuo elemento `form` l'id `cat-photo-form`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `form` dovrebbe avere l'id di `cat-photo-form`.
|
||||
|
||||
```js
|
||||
assert($('form').attr('id') === 'cat-photo-form');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,156 @@
|
||||
---
|
||||
id: bad87fee1348bd9acdf08812
|
||||
title: Dimensionare le immagini
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM9MmCP'
|
||||
forumTopicId: 18282
|
||||
dashedName: size-your-images
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Il CSS ha una proprietà chiamata `width` che controlla la larghezza di un elemento. Proprio come con i caratteri, useremo `px` (pixel) per specificare la larghezza dell'immagine.
|
||||
|
||||
Per esempio, se volessimo creare una classe CSS denominata `larger-image` per dare agli elementi HTML una larghezza di 500 pixel, useremmo:
|
||||
|
||||
```html
|
||||
<style>
|
||||
.larger-image {
|
||||
width: 500px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crea una classe denominata `smaller-image` e usala per ridimensionare l'immagine in modo che sia larga solo 100 pixel.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il tuo elemento `img` dovrebbe avere la classe `smaller-image`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$("img[src='https://bit.ly/fcc-relaxing-cat']").attr('class')
|
||||
.trim().split(/\s+/g).includes('smaller-image')
|
||||
);
|
||||
```
|
||||
|
||||
La tua immagine dovrebbe essere larga 100 pixel.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('img').width() < 200 &&
|
||||
code.match(/\.smaller-image\s*{\s*width\s*:\s*100px\s*(;\s*}|})/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user