chore(i18n,curriculum): update translations (#42659)
This commit is contained in:
camperbot
GitHub
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abc
|
||||
title: Adjust the background-color Property of Text
|
||||
title: Ajustar a propriedade background-color (cor de fundo) de textos
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDqwA6'
|
||||
forumTopicId: 301032
|
||||
@@ -9,23 +9,23 @@ dashedName: adjust-the-background-color-property-of-text
|
||||
|
||||
# --description--
|
||||
|
||||
Instead of adjusting your overall background or the color of the text to make the foreground easily readable, you can add a `background-color` to the element holding the text you want to emphasize. This challenge uses `rgba()` instead of `hex` codes or normal `rgb()`.
|
||||
Em vez de ajustar o fundo geral ou a cor do texto para tornar o primeiro plano facilmente legível, você pode adicionar a propriedade `background-color` ao elemento que contém o texto que deseja enfatizar. Este desafio usa a função `rgba()` em vez de códigos `hex` ou `rgb()` normal.
|
||||
|
||||
<blockquote>rgba stands for:<br> r = red<br> g = green<br> b = blue<br> a = alpha/level of opacity</blockquote>
|
||||
<blockquote>rgba significa:<br>r = red (vermelho)<br>g = green (verde)<br>b = blue (azul)<br> a = alpha (nível de opacidade)</blockquote>
|
||||
|
||||
The RGB values can range from 0 to 255. The alpha value can range from 1, which is fully opaque or a solid color, to 0, which is fully transparent or clear. `rgba()` is great to use in this case, as it allows you to adjust the opacity. This means you don't have to completely block out the background.
|
||||
Os valores RGB podem variar de 0 a 255. O valor alpha (nível de transparência) pode variar de 1, que é totalmente opaco ou de cor sólida, a 0, que é totalmente transparente. Utilizar `rgba()` neste caso é ótimo, pois permite que você ajuste a opacidade. Isso significa que você não precisa eliminar completamente o fundo.
|
||||
|
||||
You'll use `background-color: rgba(45, 45, 45, 0.1)` for this challenge. It produces a dark gray color that is nearly transparent given the low opacity value of 0.1.
|
||||
Você usará a propriedade `background-color: rgba(45, 45, 45, 0.1)` para este desafio. Estes valores produzem uma cor cinza escuro que é quase transparente devido ao baixo valor da opacidade - 0.1.
|
||||
|
||||
# --instructions--
|
||||
|
||||
To make the text stand out more, adjust the `background-color` of the `h4` element to the given `rgba()` value.
|
||||
Para fazer o texto se destacar mais, ajuste a propriedade `background-color` do elemento `h4` para o valor `rgba()` fornecido anteriormente.
|
||||
|
||||
Also for the `h4`, remove the `height` property and add `padding` of 10px.
|
||||
Também para o `h4`, remova a propriedade `height` e adicione `padding` de 10px.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should add a `background-color` property to the `h4` element set to `rgba(45, 45, 45, 0.1)`.
|
||||
O código deve adicionar uma propriedade `background-color` ao elemento `h4` com o valor de `rgba(45, 45, 45, 0.1)`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -35,7 +35,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should add a `padding` property to the `h4` element and set it to 10 pixels.
|
||||
O código deve adicionar uma propriedade `padding` ao elemento `h4` e configurá-lo para 10 pixels.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -46,7 +46,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `height` property on the `h4` element should be removed.
|
||||
A propriedade `height` do elemento `h4` deve ser removida.
|
||||
|
||||
```js
|
||||
assert(!($('h4').css('height') == '25px'));
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad3
|
||||
title: Adjust the Color of Various Elements to Complementary Colors
|
||||
title: Ajustar a cor de vários elementos para cores complementares
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cWmPpud'
|
||||
forumTopicId: 301033
|
||||
@@ -9,33 +9,33 @@ dashedName: adjust-the-color-of-various-elements-to-complementary-colors
|
||||
|
||||
# --description--
|
||||
|
||||
The Complementary Colors challenge showed that opposite colors on the color wheel can make each other appear more vibrant when placed side-by-side. However, the strong visual contrast can be jarring if it's overused on a website, and can sometimes make text harder to read if it's placed on a complementary-colored background. In practice, one of the colors is usually dominant and the complement is used to bring visual attention to certain content on the page.
|
||||
O desafio das Cores Complementares mostrou que cores opostas no círculo cromático podem fazer as demais cores parecerem mais vibrantes quando colocadas lado a lado. No entanto, o forte contraste visual pode ser chocante se for usado demais em um site e, às vezes, pode tornar o texto mais difícil de ler se for colocado em um fundo de cores complementares. Na prática, uma das cores geralmente é dominante e o complemento é usado para chamar a atenção visual para determinado conteúdo da página.
|
||||
|
||||
# --instructions--
|
||||
|
||||
This page will use a shade of teal (`#09A7A1`) as the dominant color, and its orange (`#FF790E`) complement to visually highlight the sign-up buttons. Change the `background-color` of both the `header` and `footer` from black to the teal color. Then change the `h2` text `color` to teal as well. Finally, change the `background-color` of the `button` to the orange color.
|
||||
Esta página usará um tom de azul-petróleo (`#09A7A1`) como cor dominante Seu complemento laranja (`#FF790E`) será usado para destacar visualmente os botões de inscrição. Altere a propriedade `background-color` do `header` e do `footer` de preto para azul-petróleo. Em seguida, altere a propriedade `color` do `h2` para azul-petróleo também. Finalmente, mude a propriedade `background-color` do `button` para a cor laranja.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `header` element should have a `background-color` of #09A7A1.
|
||||
O elemento `header` deve ter uma propriedade `background-color` com o valor de #09A7A1.
|
||||
|
||||
```js
|
||||
assert($('header').css('background-color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
The `footer` element should have a `background-color` of #09A7A1.
|
||||
O elemento `footer` deve ter uma propriedade `background-color` com o valor de #09A7A1.
|
||||
|
||||
```js
|
||||
assert($('footer').css('background-color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
The `h2` element should have a `color` of #09A7A1.
|
||||
O elemento `h2` deve ter uma propriedade `color` com o valor de #09A7A1.
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
The `button` element should have a `background-color` of #FF790E.
|
||||
O elemento `button` deve ter uma propriedade `background-color` com o valor de #FF790E.
|
||||
|
||||
```js
|
||||
assert($('button').css('background-color') == 'rgb(255, 121, 14)');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab5
|
||||
title: Adjust the Height of an Element Using the height Property
|
||||
title: Ajustar a altura de um elemento usando a propriedade height
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDaDTN'
|
||||
forumTopicId: 301034
|
||||
@@ -9,7 +9,7 @@ dashedName: adjust-the-height-of-an-element-using-the-height-property
|
||||
|
||||
# --description--
|
||||
|
||||
You can specify the height of an element using the `height` property in CSS, similar to the `width` property. Here's an example that changes the height of an image to 20px:
|
||||
Você pode especificar a altura de um elemento usando a propriedade `height` no CSS, semelhante à propriedade `width`. Aqui está um exemplo que muda a altura de uma imagem para 20px:
|
||||
|
||||
```css
|
||||
img {
|
||||
@@ -19,13 +19,13 @@ img {
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add a `height` property to the `h4` tag and set it to 25px.
|
||||
Adicione a propriedade `height` à tag `h4` e defina-a com um valor de 25px.
|
||||
|
||||
**Note:** You may need to be at 100% zoom to pass the test on this challenge.
|
||||
**Observação:** talvez você precise estar com 100% de zoom para passar no teste neste desafio.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should change the `h4` `height` property to a value of 25 pixels.
|
||||
O código deve alterar a propriedade `height` da tag `h4` para um valor de 25 pixels.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d781d367417b2b2512ac8
|
||||
title: Adjust the Hover State of an Anchor Tag
|
||||
title: Mudar o estilo de um link ao passar o mouse
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cakRGcm'
|
||||
forumTopicId: 301035
|
||||
@@ -9,9 +9,9 @@ dashedName: adjust-the-hover-state-of-an-anchor-tag
|
||||
|
||||
# --description--
|
||||
|
||||
This challenge will touch on the usage of pseudo-classes. A pseudo-class is a keyword that can be added to selectors, in order to select a specific state of the element.
|
||||
Este desafio abordará o uso de pseudo-classes. Uma pseudo-classe é uma palavra-chave que pode ser adicionada a seletores, a fim de selecionar um estado específico do elemento.
|
||||
|
||||
For example, the styling of an anchor tag can be changed for its hover state using the `:hover` pseudo-class selector. Here's the CSS to change the `color` of the anchor tag to red during its hover state:
|
||||
Por exemplo, o estilo de um link pode ser alterado quando o cursor do mouse está sobre ele usando o seletor de pseudo-classe `:hover`. O código CSS para alterar a propriedade `color` de um link para vermelho quando o mouse está sobre ele é este:
|
||||
|
||||
```css
|
||||
a:hover {
|
||||
@@ -21,17 +21,17 @@ a:hover {
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor has a CSS rule to style all `a` tags black. Add a rule so that when the user hovers over the `a` tag, the `color` is blue.
|
||||
O editor de código tem uma declaração de estilo CSS que estiliza todas as tags `a` com a cor preta. Adicione uma declaração de estilo para que, quando o usuário passar o mouse sobre a tag `a`, a propriedade `color` mude para azul.
|
||||
|
||||
# --hints--
|
||||
|
||||
The anchor tag `color` should remain black, only add CSS rules for the `:hover` state.
|
||||
A propriedade `color` do link deve permanecer preta. A cor do texto deve mudar apenas no estado `:hover`.
|
||||
|
||||
```js
|
||||
assert($('a').css('color') == 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
The anchor tag should have a `color` of blue on hover.
|
||||
O link deve ter a propriedade `color` de valor azul ao passar o mouse sobre ele.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad4
|
||||
title: Adjust the Hue of a Color
|
||||
title: Ajustar a tonalidade de uma cor
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp38TZ'
|
||||
forumTopicId: 301036
|
||||
@@ -9,55 +9,55 @@ dashedName: adjust-the-hue-of-a-color
|
||||
|
||||
# --description--
|
||||
|
||||
Colors have several characteristics including hue, saturation, and lightness. CSS3 introduced the `hsl()` property as an alternative way to pick a color by directly stating these characteristics.
|
||||
As cores têm várias características, incluindo tonalidade, saturação e luminosidade. CSS3 introduziu a função `hsl()` como uma forma alternativa de escolher uma cor informando diretamente essas características.
|
||||
|
||||
**Hue** is what people generally think of as 'color'. If you picture a spectrum of colors starting with red on the left, moving through green in the middle, and blue on right, the hue is where a color fits along this line. In `hsl()`, hue uses a color wheel concept instead of the spectrum, where the angle of the color on the circle is given as a value between 0 and 360.
|
||||
**Tonalidade** é o que as pessoas geralmente chamam de 'cor'. Se você imaginar um espectro de cores começando com o vermelho à esquerda, passando pelo verde no meio e pelo azul à direita, a tonalidade é qualquer cor que esteja dentro deste espectro. No `hsl()`, a tonalidade é definida usando o conceito de círculo cromático em vez de um espectro, onde o ângulo da cor no círculo é um valor entre 0 e 360.
|
||||
|
||||
**Saturation** is the amount of gray in a color. A fully saturated color has no gray in it, and a minimally saturated color is almost completely gray. This is given as a percentage with 100% being fully saturated.
|
||||
**Saturação** é a quantidade de cinza em uma cor. Uma cor totalmente saturada não contém cinza e uma cor minimamente saturada é quase totalmente cinza. Essa característica é definida usando porcentagem, onde 100% é totalmente saturado.
|
||||
|
||||
**Lightness** is the amount of white or black in a color. A percentage is given ranging from 0% (black) to 100% (white), where 50% is the normal color.
|
||||
**Luminosidade** é a quantidade de branco ou preto em uma cor. Um valor válido, em porcentagem, varia de 0% (preto) a 100% (branco), onde 50% é a cor normal.
|
||||
|
||||
Here are a few examples of using `hsl()` with fully-saturated, normal lightness colors:
|
||||
Aqui estão alguns exemplos de uso do `hsl()` com cores totalmente saturadas e luminosidade normal:
|
||||
|
||||
<table class='table table-striped'><thead><tr><th>Color</th><th>HSL</th></tr></thead><tbody><tr><td>red</td><td>hsl(0, 100%, 50%)</td></tr><tr><td>yellow</td><td>hsl(60, 100%, 50%)</td></tr><tr><td>green</td><td>hsl(120, 100%, 50%)</td></tr><tr><td>cyan</td><td>hsl(180, 100%, 50%)</td></tr><tr><td>blue</td><td>hsl(240, 100%, 50%)</td></tr><tr><td>magenta</td><td>hsl(300, 100%, 50%)</td></tr></tbody></table>
|
||||
<table class='table table-striped'><thead><tr><th>Cor</th><th>HSL</th></tr></thead><tbody><tr><td>vermelho</td><td>hsl(0, 100%, 50%)</td></tr><tr><td>amarelo</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>azul</td><td>hsl(240, 100%, 50%)</td></tr><tr><td>magenta</td><td>hsl(300, 100%, 50%)</td></tr></tbody></table>
|
||||
|
||||
# --instructions--
|
||||
|
||||
Change the `background-color` of each `div` element based on the class names (`green`, `cyan`, or `blue`) using `hsl()`. All three should have full saturation and normal lightness.
|
||||
Altere a propriedade `background-color` de cada elemento `div` com base nos nomes das classes (`green`, `cyan` ou `blue`) usando `hsl()`. Todos as três devem estar totalmente saturadas e ter luminosidade normal.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `hsl()` property to declare the color `green`.
|
||||
Você deve usar a função `hsl()` para declarar a cor `green` (verde).
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
Your code should use the `hsl()` property to declare the color `cyan`.
|
||||
Você deve usar a função `hsl()` para declarar a cor `cyan` (ciano).
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
Your code should use the `hsl()` property to declare the color `blue`.
|
||||
Você deve usar a função `hsl()` para declarar a cor `blue` (blue).
|
||||
|
||||
```js
|
||||
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
The `div` element with class `green` should have a `background-color` of green.
|
||||
O elemento `div` com a classe `green` deve ter apropriedade `background-color` com o valor green (verde).
|
||||
|
||||
```js
|
||||
assert($('.green').css('background-color') == 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
The `div` element with class `cyan` should have a `background-color` of cyan.
|
||||
O elemento `div` com a classe `cyan` deve ter apropriedade `background-color` com o valor cyan (ciano).
|
||||
|
||||
```js
|
||||
assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
The `div` element with class `blue` should have a `background-color` of blue.
|
||||
O elemento `div` com a classe `blue` deve ter apropriedade `background-color` com o valor blue (azul).
|
||||
|
||||
```js
|
||||
assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abd
|
||||
title: Adjust the Size of a Header Versus a Paragraph Tag
|
||||
title: Contrastar o tamanho de um título com o de um parágrafo
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bRPTz'
|
||||
forumTopicId: 301037
|
||||
@@ -9,15 +9,15 @@ dashedName: adjust-the-size-of-a-header-versus-a-paragraph-tag
|
||||
|
||||
# --description--
|
||||
|
||||
The font size of header tags (`h1` through `h6`) should generally be larger than the font size of paragraph tags. This makes it easier for the user to visually understand the layout and level of importance of everything on the page. You use the `font-size` property to adjust the size of the text in an element.
|
||||
O tamanho da tipografia das tags de títulos (`h1` a `h6`) geralmente deve ser maior do que o tamanho da tipografia das tags de parágrafo. Isso torna mais fácil para o usuário entender visualmente o layout e o nível de importância de tudo na página. Você pode usar a propriedade `font-size` para ajustar o tamanho do texto de um elemento.
|
||||
|
||||
# --instructions--
|
||||
|
||||
To make the heading significantly larger than the paragraph, change the `font-size` of the `h4` tag to 27 pixels.
|
||||
Para tornar o título significativamente maior do que o parágrafo, altere a propriedade `font-size` da tag `h4` para 27 pixels.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should add a `font-size` property to the `h4` element set to 27 pixels.
|
||||
Adicione ao elemento `h4` a propriedade `font-size` com o valor de 27 pixels.
|
||||
|
||||
```js
|
||||
assert($('h4').css('font-size') == '27px');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad5
|
||||
title: Adjust the Tone of a Color
|
||||
title: Ajustar o tom de uma cor
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDJvT7'
|
||||
forumTopicId: 301038
|
||||
@@ -9,15 +9,15 @@ dashedName: adjust-the-tone-of-a-color
|
||||
|
||||
# --description--
|
||||
|
||||
The `hsl()` option in CSS also makes it easy to adjust the tone of a color. Mixing white with a pure hue creates a tint of that color, and adding black will make a shade. Alternatively, a tone is produced by adding gray or by both tinting and shading. Recall that the 's' and 'l' of `hsl()` stand for saturation and lightness, respectively. The saturation percent changes the amount of gray and the lightness percent determines how much white or black is in the color. This is useful when you have a base hue you like, but need different variations of it.
|
||||
A função `hsl()` no CSS também facilita o ajuste do tom de uma cor. A mistura de branco com uma tonalidade pura cria uma cor igual à cor que foi misturada com o branco e a adição de preto cria uma tonalidade mais escura. Como alternativa, um tom é produzido adicionando cinza ou matizando e sombreando. Lembre-se de que o 's' e 'l' de `hsl()` representam saturação e luminosidade, respectivamente. A porcentagem de saturação altera a quantidade de cinza e a porcentagem de luminosidade determina quanto de branco ou preto há na cor. Isso é útil quando você tem uma tonalidade básica de que gosta, mas precisa de diferentes variações.
|
||||
|
||||
# --instructions--
|
||||
|
||||
All elements have a default `background-color` of `transparent`. Our `nav` element currently appears to have a `cyan` background, because the element behind it has a `background-color` set to `cyan`. Add a `background-color` to the `nav` element so it uses the same `cyan` hue, but has `80%` saturation and `25%` lightness values to change its tone and shade.
|
||||
Todos os elementos, por padrão, têm a propriedade `background-color` com o valor de `transparent`. O elemento `nav` atualmente parece ter um fundo `cyan`, porque o elemento por trás dele tem uma propriedade `background-color` definida com o valor `cyan`. Adicione a propriedade `background-color` ao elemento `nav` para que este elemento tenha a cor `cyan`, mas com saturação de `80%` e luminosidade de `25%` para alterar seu tom e sombreamento.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `nav` element should have a `background-color` of the adjusted cyan tone using the `hsl()` property.
|
||||
O elemento `nav` deve ter a propriedade `background-color` de tom ciano usando a função `hsl()`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab4
|
||||
title: Adjust the Width of an Element Using the width Property
|
||||
title: Ajustar a largura de um elemento usando a propriedade width
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cvVLPtN'
|
||||
forumTopicId: 301039
|
||||
@@ -9,7 +9,7 @@ dashedName: adjust-the-width-of-an-element-using-the-width-property
|
||||
|
||||
# --description--
|
||||
|
||||
You can specify the width of an element using the `width` property in CSS. Values can be given in relative length units (such as `em`), absolute length units (such as `px`), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px:
|
||||
Você pode especificar a largura de um elemento usando a propriedade `width` no CSS. Os valores podem ser fornecidos em unidades de comprimento relativo (como `em`), unidades de comprimento absoluto (como `px`) ou como uma porcentagem do elemento pai que o contém. Aqui está um exemplo que altera a largura de uma imagem para 220px:
|
||||
|
||||
```css
|
||||
img {
|
||||
@@ -19,11 +19,11 @@ img {
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add a `width` property to the entire card and set it to an absolute value of 245px. Use the `fullCard` class to select the element.
|
||||
Adicione a propriedade `width` com um valor absoluto de 245px ao cartão. Use a classe `fullCard` para selecionar o elemento.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should change the `width` property of the card to 245 pixels by using the `fullCard` class selector.
|
||||
Na classe `fullCard`, defina a propriedade `width` com um valor de 245 pixels.
|
||||
|
||||
```js
|
||||
const fullCard = code.match(/\.fullCard\s*{[\s\S]+?[^}]}/g);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae5
|
||||
title: Animate Elements at Variable Rates
|
||||
title: Animar elementos em diferentes momentos
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cZ89WA4'
|
||||
forumTopicId: 301040
|
||||
@@ -9,17 +9,17 @@ dashedName: animate-elements-at-variable-rates
|
||||
|
||||
# --description--
|
||||
|
||||
There are a variety of ways to alter the animation rates of similarly animated elements. So far, this has been achieved by applying an `animation-iteration-count` property and setting `@keyframes` rules.
|
||||
Existem várias maneiras de alterar o momento de uma animação de um elemento. Até agora, isso foi realizado aplicando a propriedade `animation-iteration-count` e definindo regras `@keyframes`.
|
||||
|
||||
To illustrate, the animation on the right consists of two stars that each decrease in size and opacity at the 20% mark in the `@keyframes` rule, which creates the twinkle animation. You can change the `@keyframes` rule for one of the elements so the stars twinkle at different rates.
|
||||
Para ilustrar, a animação à direita consiste em duas estrelas, cada uma diminuindo em tamanho e opacidade na marca de 20% na regra `@keyframes`. Você pode alterar a regra `@keyframes` em um dos elementos para que as estrelas cintilem em momentos diferentes.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Alter the animation rate for the element with the class name of `star-1` by changing its `@keyframes` rule to 50%.
|
||||
Altere o momento da animação do elemento que possui a classe `star-1` trocando a regra `@keyframes` para 50%.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `@keyframes` rule for the `star-1` class should be 50%.
|
||||
A regra `@keyframes` para a classe `star-1` deve ter o valor de 50%.
|
||||
|
||||
```js
|
||||
assert(code.match(/twinkle-1\s*?{\s*?50%/g));
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae3
|
||||
title: Animate Elements Continually Using an Infinite Animation Count
|
||||
title: Animar elementos infinitamente
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJDVfq'
|
||||
forumTopicId: 301041
|
||||
@@ -9,21 +9,21 @@ dashedName: animate-elements-continually-using-an-infinite-animation-count
|
||||
|
||||
# --description--
|
||||
|
||||
The previous challenges covered how to use some of the animation properties and the `@keyframes` rule. Another animation property is the `animation-iteration-count`, which allows you to control how many times you would like to loop through the animation. Here's an example:
|
||||
Os desafios anteriores cobriram como usar algumas das propriedades de animação e a regra `@keyframes`. Outra propriedade da animação é `animation-iteration-count`, que permite controlar quantas vezes você gostaria de repetir a animação. Um exemplo:
|
||||
|
||||
```css
|
||||
animation-iteration-count: 3;
|
||||
```
|
||||
|
||||
In this case the animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to `infinite`.
|
||||
Neste caso, a animação irá parar depois de repetir 3 vezes, mas é possível fazer a animação rodar infinitamente definindo esse valor para `infinite`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
To keep the ball bouncing on the right on a continuous loop, change the `animation-iteration-count` property to `infinite`.
|
||||
Para manter a bola quicando à direita em um loop contínuo, altere a propriedade `animation-iteration-count` para `infinite`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `animation-iteration-count` property should have a value of `infinite`.
|
||||
A propriedade `animation-iteration-count` deve ter um valor de `infinite`.
|
||||
|
||||
```js
|
||||
assert($('#ball').css('animation-iteration-count') == 'infinite');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae6
|
||||
title: Animate Multiple Elements at Variable Rates
|
||||
title: Animar múltiplos elementos em diferentes momentos
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpWZc9'
|
||||
forumTopicId: 301042
|
||||
@@ -9,29 +9,29 @@ dashedName: animate-multiple-elements-at-variable-rates
|
||||
|
||||
# --description--
|
||||
|
||||
In the previous challenge, you changed the animation rates for two similarly animated elements by altering their `@keyframes` rules. You can achieve the same goal by manipulating the `animation-duration` of multiple elements.
|
||||
No desafio anterior, você mudou o momento da animação de dois elementos com a mesma animação ao alterar a regra `@keyframes`. Você pode alcançar o mesmo resultado manipulando a propriedade `animation-duration` de vários elementos.
|
||||
|
||||
In the animation running in the code editor, there are three stars in the sky that twinkle at the same rate on a continuous loop. To make them twinkle at different rates, you can set the `animation-duration` property to different values for each element.
|
||||
Na animação sendo executada no editor de código, há três estrelas no céu que cintilam ao mesmo instante infinitamente. Para fazê-las brilhar com ritmos diferentes, você pode definir a propriedade `animation-duration` com valores diferentes para cada elemento.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Set the `animation-duration` of the elements with the classes `star-1`, `star-2`, and `star-3` to 1s, 0.9s, and 1.1s, respectively.
|
||||
Defina a propriedade `animation-duration` dos elementos com as classes `star-1`, `star-2`, e `star-3` para 1s, 0.9s, e 1.1s, respectivamente.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `animation-duration` property for the star with class `star-1` should remain at 1s.
|
||||
O valor da propriedade `animation-duration` da estrela com a classe `star-1` deve permanecer em 1s.
|
||||
|
||||
```js
|
||||
assert($('.star-1').css('animation-duration') == '1s');
|
||||
```
|
||||
|
||||
The `animation-duration` property for the star with class `star-2` should be 0.9s.
|
||||
O valor da propriedade `animation-duration` da estrela com a classe `star-2` deve ser 0.9s.
|
||||
|
||||
```js
|
||||
assert($('.star-2').css('animation-duration') == '0.9s');
|
||||
```
|
||||
|
||||
The `animation-duration` property for the star with class `star-3` should be 1.1s.
|
||||
O valor da propriedade `animation-duration` da estrela com a classe `star-3` deve ser 1.1s.
|
||||
|
||||
```js
|
||||
assert($('.star-3').css('animation-duration') == '1.1s');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ad0
|
||||
title: Center an Element Horizontally Using the margin Property
|
||||
title: Centralizar um elemento horizontalmente usando a propriedade margin
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLJqU4'
|
||||
forumTopicId: 301043
|
||||
@@ -9,17 +9,17 @@ dashedName: center-an-element-horizontally-using-the-margin-property
|
||||
|
||||
# --description--
|
||||
|
||||
Another positioning technique is to center a block element horizontally. One way to do this is to set its `margin` to a value of auto.
|
||||
Outra técnica de posicionamento é centralizar um elemento de bloco horizontalmente. Uma maneira de fazer isso é definir a propriedade `margin` para o valor "auto".
|
||||
|
||||
This method works for images, too. Images are inline elements by default, but can be changed to block elements when you set the `display` property to `block`.
|
||||
Esse método também funciona para imagens. Imagens são elementos inline por padrão, mas podem ser alterados para elementos de bloco caso você defina o valor da propriedade `display` para `block`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Center the `div` on the page by adding a `margin` property with a value of `auto`.
|
||||
Centralize a `div` na página adicionando a propriedade `margin` com o valor `auto`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `div` should have a `margin` set to `auto`.
|
||||
Esta `div` deve conter a propriedade `margin` definida com o valor `auto`.
|
||||
|
||||
```js
|
||||
assert(code.match(/margin:\s*?auto;/g));
|
||||
|
||||
Reference in New Issue
Block a user