gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore(i8n,curriculum): processed translations (#41548)

Browse Source 
Co-authored-by: Crowdin Bot <support+bot@crowdin.com>
This commit is contained in:
camperbot
2021-03-21 10:58:20 -06:00
committed by GitHub
parent 9ac00ce25b
commit 7215a6fa77
67 changed files with 332 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
curriculum/challenges/espanol/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md
View File

@@ -11,7 +11,9 @@ dashedName: animate-elements-continually-using-an-infinite-animation-count
En los desafíos anteriores, vimos cómo utilizar algunas de las propiedades de la animación y la regla `@keyframes`. Otra propiedad de animación es la `animation-iteration-count` la cual te permite controlar cuántas veces te gustaría hacer un bucle a través de la animación. Por ejemplo:
`animation-iteration-count: 3;`
```css
animation-iteration-count: 3;
```
En este caso, la animación se detendrá después de ejecutarse 3 veces, pero es posible hacer que la animación se ejecute continuamente estableciendo ese valor en `infinite`.

12
curriculum/challenges/espanol/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.md
View File

@@ -11,17 +11,21 @@ dashedName: create-a-gradual-css-linear-gradient
La aplicación de un color en elementos HTML no se limita a un tono plano. CSS proporciona la capacidad de usar transiciones de color, también conocidas como degradados, en los elementos. Esto se accede a través de la función `linear-gradient()` de la propiedad `background`. Aquí está la sintaxis general:
`background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);`
```css
background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
```
El primer argumento especifica la dirección desde la que comienza la transición de color - se puede establecer como un grado, donde `90deg` hace un gradiente horizontal (de izquierda a derecha) y `45deg` hace un gradiente diagonal (de abajo a izquierda hacia arriba a la derecha). Los siguientes argumentos especifican el orden de los colores utilizados en el degradado.
El primer argumento especifica la dirección desde la que comienza la transición de color, se puede establecer como un grado, donde `90deg` hace un gradiente horizontal (de izquierda a derecha) y `45deg` hace un gradiente diagonal (de abajo a izquierda hacia arriba a la derecha). Los siguientes argumentos especifican el orden de los colores utilizados en el degradado.
Ejemplo:
`background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));`
```css
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
```
# --instructions--
Utiliza un `linear-gradient()` para el `div` del elemento `background` y configúralo desde una dirección de 35 grados para cambiar el color de `#CCFFFF` a `#FFCCCC`.
Utiliza un `linear-gradient()` para el `background` del elemento `div` y configúralo desde una dirección de 35 grados para cambiar el color de `#CCFFFF` a `#FFCCCC`.
# --hints--

10
curriculum/challenges/espanol/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md
View File

@@ -15,17 +15,19 @@ En las animaciones CSS, las curvas Bezier se utilizan con la función `cubic-bez
La función `cubic-bezier` consta de cuatro puntos principales que se encuentran en esta cuadrícula de 1 por 1: `p0`, `p1`, `p2` y `p3`. `p0` y `p3` están configurados para ti: son los puntos inicial y final que siempre se encuentran respectivamente en el origen (0, 0) y (1, 1). Establece los valores x e y para los otros dos puntos, y donde los coloca en la cuadrícula determina la forma de la curva para la animación que debe seguir. Esto se hace en CSS declarando los valores x e y de los puntos "anchor" `p1` y `p2` de la siguiente forma:`(x1, y1, x2, y2)`. Juntando todo, aquí hay un ejemplo de una curva de Bezier en codigo CSS:
`animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);`
```css
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
```
En el ejemplo anterior, los valores x e y son equivalentes para cada punto (x1 = 0.25 = y1 y x2 = 0.75 = y2), que si recuerdas la clase de geometría, da como resultado una línea que se extiende desde el origen hasta el punto (1, 1). Esta animación es un cambio lineal de un elemento durante la duración de una animación, y es lo mismo que usar la palabra clave `linear`. En otras palabras, cambia a una velocidad constante.
# --instructions--
Para el elemento con el id de `ball1`, cambia el valor de la propiedad `animation-timing-function` de `linear` a su valor equivalente de la función `cubic-bezier`. Utiliza los valores de puntos dados en el ejemplo anterior.
Para el elemento con el id de `ball1`, cambia el valor de la propiedad `animation-timing-function` de `linear` a su valor de función `cubic-bezier` equivalente. Utiliza los valores de puntos dados en el ejemplo anterior.
# --hints--
El valor de la propiedad `animation-timing-function` para el elemento con el id `ball1` debe ser el equivalente lineal `cubic-bezier` función.
El valor de la propiedad `animation-timing-function` para el elemento con el id `ball1` debe ser la función lineal `cubic-bezier` equivalente.
```js
assert(
@@ -34,7 +36,7 @@ assert(
);
```
El valor de la propiedad `animation-timing-function` para el elemento con el id `ball2` no debería cambiar.
El valor de la propiedad `animation-timing-function` para el elemento con el id `ball2` no debe cambiar.
```js
const ball2Animation = __helpers.removeWhiteSpace(

4
curriculum/challenges/espanol/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.md
View File

@@ -15,7 +15,9 @@ La función `animation-timing-function` se realiza automáticamente en cada foto
La siguiente curva cúbica de Bezier simula el movimiento de rebotes:
`cubic-bezier(0.3, 0.4, 0.5, 1.6);`
```css
cubic-bezier(0.3, 0.4, 0.5, 1.6);
```
Observa que el valor de y2 es mayor que 1. Aunque la curva cúbica de Bezier se mapea en un sistema de coordenadas 1 por 1, y solo puede aceptar valores x de 0 a 1, el valor y se puede establecer en números mayores que uno. Esto da como resultado un movimiento de rebote que es ideal para simular la pelota rebotando.

6
curriculum/challenges/espanol/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.md
View File

@@ -13,11 +13,13 @@ Eso es genial, pero aún no funciona bien. Observa como la animación se restabl
Esto se puede hacer estableciendo la propiedad `animation-fill-mode` en `forwards`. El `animation-fill-mode` especifica el estilo aplicado a un elemento cuando la animación ha finalizado. Puedes configurarlo así:
`animation-fill-mode: forwards;`
```css
animation-fill-mode: forwards;
```
# --instructions--
Establece la propiedad `animation-fill-mode` de `button:hover` en `forwards` para que botón permanezca resaltado cuando un usuario pase sobre el.
Establece la propiedad `animation-fill-mode` de `button:hover` en `forwards` para que el botón permanezca resaltado cuando un usuario pase sobre el.
# --hints--

4
curriculum/challenges/espanol/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md
View File

@@ -13,7 +13,9 @@ Un desafío anterior discutió la palabra clave `ease-out` que describe un cambi
En general, el cambio de los puntos de anclaje `p1` y `p2` impulsa la creación de diferentes curvas Bezier, que controlan como la animación progresa a través del tiempo. Aquí hay un ejemplo de una curva de Bezier que usa valores para imitar el estilo de facilidad:
`animation-timing-function: cubic-bezier(0, 0, 0.58, 1);`
```css
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
```
Recuerda que todas las funciones `cubic-bezier` comienzan con `p0` en (0, 0) y terminan con `p3` en (1, 1). En este ejemplo, la curva se mueve más rápido a través del eje Y (comienza en 0, va a `p1` y valor de 0, luego va a `p2` y valor de 1) que se mueve a través del eje X (0 para iniciar, luego 0 para `p1`, hasta 0.58 para `p2`. Como resultado, el cambio en el elemento animado progresa más rápido que el tiempo de la animación para ese segmento. Hacia el final de la curva, la relación entre el cambio en los valores X e Y se invierte: el valor y se mueve de 1 a 1 (sin cambios), y los valores X se mueven de 0.58 a 1, lo que hace que los cambios de animación progresen más lentamente en comparación con la duración de la animación.

4
curriculum/challenges/espanol/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md
View File

@@ -17,7 +17,9 @@ En el ejemplo demostrado en el editor de código, el degradado comienza con el c
Para este ejemplo, ayuda a pensar en las paradas de color como pares donde cada dos colores se mezclan juntos.
`0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px`
```css
0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px
```
Si cada dos valores de parada de color son del mismo color, la mezcla no es visible porque está entre el mismo color, seguido de una dura transición hacia el siguiente color, así que terminas con rayas.