chore(i18n,learn): processed translations (#45504)
This commit is contained in:
camperbot
GitHub
@@ -11,14 +11,14 @@ dashedName: add-a-box-shadow-to-a-card-like-element
|
||||
|
||||
A propriedade `box-shadow` aplica uma ou mais sombras a um elemento.
|
||||
|
||||
A propriedade `box-shadow` recebe valores para
|
||||
A propriedade `box-shadow` recebe os seguintes valores em ordem:
|
||||
|
||||
<ul>
|
||||
<li><code>offset-x</code> (determina a distância que você quer "empurrar" a sombra na horizontal),</li>
|
||||
<li><code>offset-y</code> (determina a distância que você quer "empurrar" a sombra na vertical),</li>
|
||||
<li><code>blur-radius</code> (faz com que a sombra fique mais borrada),</li>
|
||||
<li><code>spread-radius</code> (faz com que a sombra se espalhe mais) e</li>
|
||||
<li><code>color</code> (cor), nessa ordem.</li>
|
||||
<li><code>offset-x</code> (determina a distância que você quer "empurrar" a sombra na horizontal)</li>
|
||||
<li><code>offset-y</code> (determina a distância que você quer "empurrar" a sombra na vertical)</li>
|
||||
<li><code>blur-radius</code></li>
|
||||
<li><code>spread-radius</code></li>
|
||||
<li><code>color</code></li>
|
||||
</ul>
|
||||
|
||||
Os valores `blur-radius` e `spread-radius` são opcionais.
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: adjust-the-hue-of-a-color
|
||||
|
||||
# --description--
|
||||
|
||||
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.
|
||||
As cores têm várias características, incluindo tonalidade, saturação e luminosidade. O CSS3 introduziu a função `hsl()` como uma forma alternativa de escolher uma cor informando diretamente essas características.
|
||||
|
||||
**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.
|
||||
|
||||
@@ -39,7 +39,7 @@ Você deve usar a função `hsl()` para declarar a cor `cyan` (ciano).
|
||||
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
Você deve usar a função `hsl()` para declarar a cor `blue` (blue).
|
||||
Você deve usar a função `hsl()` para declarar a cor `blue` (azul).
|
||||
|
||||
```js
|
||||
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
|
||||
@@ -15,11 +15,11 @@ Você criará um objeto redondo e transparente com uma sombra nítida ligeiramen
|
||||
|
||||
Para criar um objeto redondo, a propriedade `border-radius` deve ter um valor de 50%.
|
||||
|
||||
Você deve se lembrar de um desafio anterior que a propriedade `box-shadow` recebe valores para o eixo horizontal (`offset-x`), eixo vertical (`offset-y`), `blur-radius`, `spread-radius` e um valor de cor, nessa ordem. Os valores `blur-radius` e `spread-radius` são opcionais.
|
||||
Você deve se lembrar de um desafio anterior que a propriedade `box-shadow` recebe valores para o eixo horizontal (`offset-x`), eixo vertical (`offset-y`), `blur-radius`, `spread-radius` e um valor de `color`, nessa ordem. Os valores `blur-radius` e `spread-radius` são opcionais.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Manipule o elemento quadrado no editor para criar a forma da lua. Primeiro, altere a propriedade `background-color` para `transparent` e, em seguida, defina a propriedade `border-radius` para 50% para fazer a forma circular. Finalmente, altere a propriedade `box-shadow` e defina o `offset-x` para 25px, o `offset-y` para 10px, `blur-radius` para 0, `spread-radius` para 0 e cor para azul (`blue`).
|
||||
Manipule o elemento quadrado no editor para criar a forma da lua. Primeiro, altere a propriedade `background-color` para `transparent` e, em seguida, defina a propriedade `border-radius` para 50% para fazer a forma circular. Finalmente, altere a propriedade `box-shadow` e defina o `offset-x` para 25px, o `offset-y` para 10px, `blur-radius` para 0, `spread-radius` para 0 e `color` para azul (`blue`).
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -35,7 +35,7 @@ A propriedade `border-radius` deve ter o valor de `50%`.
|
||||
assert(code.match(/border-radius:\s*?50%;/gi));
|
||||
```
|
||||
|
||||
A propriedade `box-shadow` deve receber 25px para o eixo horizontal (`offset-x`), 10px para o eixo vertical (`offset-y`), 0 para `blur-radius`, 0 para `spread-radius` e, finalmente, azul (`blue`) para a cor.
|
||||
A propriedade `box-shadow` deve receber 25px para o eixo horizontal (`offset-x`), 10px para o eixo vertical (`offset-y`), 0 para `blur-radius`, 0 para `spread-radius` e, finalmente, azul (`blue`) para `color`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -28,15 +28,15 @@ Para que os pseudo-elementos `::before` e `::after` funcionem corretamente, eles
|
||||
|
||||
# --instructions--
|
||||
|
||||
Transforme o elemento em tela em um coração. No seletor `heart::after`, altere a propriedade `background-color` para `pink` e `border-radius` para 50%.
|
||||
Transforme o elemento em tela em um coração. No seletor `.heart::after`, altere a propriedade `background-color` para `pink` e `border-radius` para 50%.
|
||||
|
||||
Em seguida, adicione a propriedade `transform` no elemento com a classe `heart` (apenas `heart`). Use a função `rotate()` com o valor de -45 graus.
|
||||
|
||||
Finalmente, no seletor `heart::before`, a propriedade `content` deve possuir um valor vazio.
|
||||
Finalmente, no seletor `.heart::before`, a propriedade `content` deve possuir um valor vazio.
|
||||
|
||||
# --hints--
|
||||
|
||||
A propriedade `background-color` do seletor `heart::after` deve ter o valor `pink`.
|
||||
A propriedade `background-color` do seletor `.heart::after` deve ter o valor `pink`.
|
||||
|
||||
```js
|
||||
const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0];
|
||||
@@ -45,7 +45,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
A propriedade `border-radius` do seletor `heart::after` deve ter um valor de 50%.
|
||||
A propriedade `border-radius` do seletor `.heart::after` deve ter um valor de 50%.
|
||||
|
||||
```js
|
||||
assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
|
||||
@@ -57,7 +57,7 @@ A propriedade `transform` da classe `heart` deve usar a função `rotate()` com
|
||||
assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
|
||||
```
|
||||
|
||||
A propriedade `content` do seletor `heart::before` deve ter um valor vazio.
|
||||
A propriedade `content` do seletor `.heart::before` deve ter um valor vazio.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: use-a-bezier-curve-to-move-a-graphic
|
||||
|
||||
Em um desafio anterior, tratamos da palavra-chave `ease-out`, que descreve uma mudança de animação que começa acelerando e desacelera ao final da animação. À direita, a diferença entre a palavra-chave `ease-out` (para o elemento azul) e a palavra-chave `linear` (para o elemento vermelho) é demonstrada. Progressões de animação semelhantes à palavra-chave `ease-out` podem ser alcançadas usando a função de curva de Bézier cúbica.
|
||||
|
||||
Em geral, alterar os pontos de ancoragem `p1` (ponto 1) e `p2` (ponto 2) leva à criação de diferentes curvas de Bézier, que controlam como a animação progride ao longo do tempo. Aqui está um exemplo de curva de Bézier usando valores para imitar o estilo ease-out:
|
||||
Em geral, alterar os pontos de ancoragem `p1` (ponto 1) e `p2` (ponto 2) leva à criação de diferentes curvas de Bézier, que controlam como a animação progride ao longo do tempo. Aqui está um exemplo de curva de Bézier usando valores para imitar o estilo `ease-out`:
|
||||
|
||||
```css
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||
|
||||
@@ -47,7 +47,7 @@ A interrupção de cor em 0 pixels deve ser `yellow`.
|
||||
assert(code.match(/yellow\s+?0(px)?/gi));
|
||||
```
|
||||
|
||||
A interrupção de cor em 40 pixels deve ser `yellow`.
|
||||
A primeira interrupção de cor em 40 pixels deve ser `yellow`.
|
||||
|
||||
```js
|
||||
assert(code.match(/yellow\s+?40px/gi));
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: change-a-variable-for-a-specific-area
|
||||
|
||||
Quando você cria suas variáveis em `:root`, elas ficam disponíveis para uso em toda a página.
|
||||
|
||||
Mas nada impede que você redefina os valores dessas variáveis dentro de qualquer outro seletor CSS.
|
||||
Mas nada impede que você redefina os valores dessas variáveis dentro de qualquer outro seletor de CSS.
|
||||
|
||||
# --instructions--
|
||||
|
||||
@@ -27,7 +27,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
A classe `penguin` não deve conter a propriedade `background-color`
|
||||
A classe `penguin` não deve conter a propriedade `background-color`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -15,7 +15,7 @@ Para criar uma variável no CSS, você precisa dar um nome, prefixar este nome c
|
||||
--penguin-skin: gray;
|
||||
```
|
||||
|
||||
Isso vai criar uma variável chamada `--penguin-skin` e atribuir a ela o valor de `gray`. Agora você pode usar essa variável em outro lugar do seu CSS para alterar o valor de outros elementos para cinza (gray).
|
||||
Isso vai criar uma variável chamada `--penguin-skin` e atribuir a ela o valor de `gray`. Agora você pode usar essa variável em outro lugar do seu CSS para alterar o valor de outras propriedades para cinza (gray).
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -77,7 +77,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
O elemento `h1` deve herdar a cor verde do elemento `body`.
|
||||
O elemento `h1` deve herdar a cor `green` do elemento `body`.
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)');
|
||||
|
||||
@@ -27,7 +27,7 @@ class="class1 class2"
|
||||
|
||||
**Observação:** a ordem das classes dentro do atributo "class" não é importante.
|
||||
|
||||
O importante é a ordem em que as classes (`class`) são declaradas dentro da tag `<style>`. A última declaração sempre terá prioridade sobre a anterior. Como a classe `.blue-text` é declarada por último, ela sobrescreve os estilos que foram declarados na classe `.pink-text`
|
||||
O importante é a ordem em que as classes (`class`) são declaradas dentro da tag `<style>`. A última declaração sempre terá prioridade sobre a anterior. Como `.blue-text` é declarado em segundo lugar, ele substitui os atributos de `.pink-text`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@ Por exemplo, quando sua tela for menor ou maior do que o media query definido, v
|
||||
|
||||
# --instructions--
|
||||
|
||||
Dentro da `media query` existe um seletor `:root`. Mude-o de forma que a variável `--penguin-size` seja redefinida e receba o valor de `200px`. Além disso, redefina a variável `--penguin-skin` e atribua a ela o valor `black`. Em seguida, redimensione a tela de visualização para ver a mudança.
|
||||
Dentro da media query existe um seletor `:root`. Mude-o de maneira que a variável `--penguin-size` seja redefinida e receba o valor de `200px`. Além disso, redefina a variável `--penguin-skin` e atribua a ela o valor `black`. Em seguida, redimensione a tela de visualização para ver a mudança.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -29,7 +29,7 @@ O elemento `h1` com o texto `I am red!` deve receber a propriedade `color` com o
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
O código hexadecimal (`hex code`) abreviado que representa a cor vermelha deve ser usado em vez do código hexadecimal `#FF0000`.
|
||||
O código hexadecimal (hex code) abreviado que representa a cor vermelha deve ser usado em vez do código hexadecimal `#FF0000`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
|
||||
@@ -41,7 +41,7 @@ O elemento `h1` com o texto `I am green!` deve receber a propriedade `color` com
|
||||
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
O código hexadecimal (`hex code`) abreviado que representa a cor verde deve ser usado em vez do código hexadecimal `#00FF00`.
|
||||
O código hexadecimal (hex code) abreviado que representa a cor verde deve ser usado em vez do código hexadecimal `#00FF00`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
|
||||
@@ -53,7 +53,7 @@ O elemento `h1` com o texto `I am cyan!` deve receber a propriedade `color` com
|
||||
assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
O código hexadecimal (`hex code`) abreviado que representa a cor ciano deve ser usado em vez do código hexadecimal `#00FFFF`.
|
||||
O código hexadecimal (hex code) abreviado que representa a cor ciano deve ser usado em vez do código hexadecimal `#00FFFF`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
|
||||
@@ -65,7 +65,7 @@ O elemento `h1` com o texto `I am fuchsia!` deve receber a propriedade `color` c
|
||||
assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
|
||||
```
|
||||
|
||||
O código hexadecimal (`hex code`) abreviado que representa a cor fúcsia deve ser usado em vez do código hexadecimal `#FF00FF`.
|
||||
O código hexadecimal (hex code) abreviado que representa a cor fúcsia deve ser usado em vez do código hexadecimal `#FF00FF`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));
|
||||
|
||||
@@ -27,13 +27,13 @@ Substitua a palavra `black` na cor de fundo do elemento `body` por sua represent
|
||||
|
||||
# --hints--
|
||||
|
||||
O elemento `body` deve ter a cor de fundo preta.
|
||||
O elemento `body` deve ter a propriedade `background-color` com o valor black (preto).
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
O código hexadecimal (`hex code`) para a cor preta deve ser usado no lugar da palavra `black`.
|
||||
O código hexadecimal (hex code) para a cor preta deve ser usado no lugar da palavra `black`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: check-radio-buttons-and-checkboxes-by-default
|
||||
|
||||
É possível deixar selecionada uma caixa ou um botão de seleção por padrão usando o atributo `checked`.
|
||||
|
||||
Para fazer isso, basta adicionar a palavra `checked` dentro de um elemento input. Por exemplo:
|
||||
Para fazer isso, basta adicionar a palavra `checked` dentro de um elemento `input`. Por exemplo:
|
||||
|
||||
```html
|
||||
<input type="radio" name="test-name" checked>
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: inform-with-the-paragraph-element
|
||||
|
||||
# --description--
|
||||
|
||||
Elementos `p` são os preferidos para textos de parágrafos em sites. `p` é a abreviação de "parágrafo".
|
||||
O elemento `p` é o preferido para textos de parágrafos em sites. `p` é a abreviação de "parágrafo".
|
||||
|
||||
Você pode criar um elemento de parágrafo da seguinte forma:
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ Lembre-se de que definir um flex container como uma linha coloca os flex items l
|
||||
|
||||
Existem várias opções para espaçar os flex items ao longo da linha que for o eixo principal. Uma dos mais usadas é `justify-content: center;`, que alinha todos os flex items ao centro dentro do flex container. As demais opções são:
|
||||
|
||||
<ul><li><code>flex-start</code>: alinha os itens no início do contêiner. Para linhas, os flex items são empurrados para a esquerda do flex container. Para colunas, os flex items são empurrados para o topo do flex container. Este é o alinhamento padrão se nenhum valor for especificado para <code>justify-content</code>.</li><li><code>flex-end</code>: alinha itens no final do contêiner. Para linhas, os flex items são empurrados para a direita do flex container. Para colunas, os flex items são empurrados para a parte inferior do flex container.</li><li><code>space-between</code>: alinha os itens ao centro do eixo principal, com um espaçamento entre os itens. O primeiro item e o último são empurrados até a borda do flex container. Por exemplo, quando a direção do flex container for em linha, o primeiro item fica do lado esquerdo do contêiner e o último item fica no lado direito do contêiner. Então, o espaço restante é distribuído igualmente para os demais itens.</li><li><code>space-around</code>: similar ao <code>space-between</code> mas os primeiros e últimos itens não ficam grudados nas bordas do flex container, o espaço é distribuído em torno de todos os itens com metade do espaço em cada extremidade do flex container.</li><li><code>space-evenly</code>: distribui o espaço igualmente entre os flex items com um espaço completo em cada extremidade do flex container</li></ul>
|
||||
<ul><li><code>flex-start</code>: alinha os itens no início do contêiner. Para linhas, os flex items são empurrados para a esquerda do flex container. Para colunas, os flex items são empurrados para o topo do flex container. Este é o alinhamento padrão se nenhum valor for especificado para <code>justify-content</code>.</li><li><code>flex-end</code>: alinha itens no final do contêiner. Para linhas, os flex items são empurrados para a direita do flex container. Para colunas, os flex items são empurrados para a parte inferior do flex container.</li><li><code>space-between</code>: alinha os itens ao centro do eixo principal, com um espaçamento entre os itens. O primeiro item e o último são empurrados até a borda do flex container. Por exemplo, quando a direção do flex container for em linha, o primeiro item fica do lado esquerdo do contêiner e o último item fica no lado direito do contêiner. Então, o espaço restante é distribuído igualmente para os demais itens.</li><li><code>space-around</code>: similar ao <code>space-between</code> mas os primeiros e últimos itens não ficam grudados nas bordas do flex container, o espaço é distribuído em torno de todos os itens com metade do espaço em cada extremidade do flex container.</li><li><code>space-evenly</code>: distribui o espaço igualmente entre os flex items com um espaço completo em cada extremidade do flex container.</li></ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: use-the-flex-wrap-property-to-wrap-a-row-or-column
|
||||
|
||||
# --description--
|
||||
|
||||
O CSS flexbox possui uma propriedade que permite dividir um flex container em várias linhas (ou colunas). Por padrão, um flex container manterá todos os flex items juntos. Por exemplo, todos os flex items estarão lado a lado na mesma linha.
|
||||
O CSS flexbox possui uma propriedade que permite dividir um contêiner flex em várias linhas (ou colunas). Por padrão, um flex container manterá todos os flex items juntos. Por exemplo, todos os flex items estarão lado a lado na mesma linha.
|
||||
|
||||
No entanto, ao usar a propriedade `flex-wrap`, informamos ao CSS para quebrar essa linha. Isso significa que os itens adicionais serão movidos para uma nova linha ou coluna. O ponto onde essa quebra acontece depende do tamanho dos itens e do tamanho do flex conteiner.
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ Depois de criar um modelo de área para o seu grid container, como mostrado no d
|
||||
}
|
||||
```
|
||||
|
||||
Isso informa ao grid que você deseja que a classe `item1` vá para a área chamada `header`. Nesse caso, o item usará toda a linha superior porque essa linha inteira foi nomeada como a área do cabeçalho (header).
|
||||
Isso informa ao grid que você deseja que a classe `item1` vá para a área chamada `header`. Nesse caso, o item usará toda a linha superior porque essa linha inteira foi nomeada como a área de `header` (cabeçalho).
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -31,7 +31,7 @@ Faça um grid com três colunas cujas larguras possuam as seguintes medidas, res
|
||||
|
||||
# --hints--
|
||||
|
||||
A classe `container` deve ter a propriedade `grid-template-columns` configurada para criar 3 colunas com as seguintes larguras: `1fr, 100px, 2fr`.
|
||||
A classe `container` deve ter a propriedade `grid-template-columns` de modo a criar 3 colunas com as seguintes larguras: `1fr`, `100px` e `2fr`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
Reference in New Issue
Block a user