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,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>
|
||||
```
|
||||
Reference in New Issue
Block a user