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

chore(i18n,learn): processed translations (#45504)

Browse Source
This commit is contained in:
camperbot
2022-03-23 19:52:04 +05:30
committed by GitHub
parent dbb7f309a7
commit 3add6077ad
162 changed files with 2383 additions and 826 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md
View File

@@ -11,13 +11,13 @@ dashedName: add-a-box-shadow-to-a-card-like-element
`box-shadow` 屬性用來給元素添加陰影，該屬性值是由逗號分隔的一個或多個陰影列表。
`box-shadow` 屬性的陰影依次由下面這些值描述：
`box-shadow` 屬性按順序採用以下值：
<ul>
<li><code>offset-x</code> 陰影的水平偏移量；</li>
<li><code>offset-y</code> 陰影的垂直偏移量；</li>
<li><code>blur-radius</code> 模糊半徑；</li>
<li><code>spread-radius</code> 陰影擴展半徑；</li>
<li><code>offset-x</code> （陰影的水平偏移量），</li>
<li><code>offset-y</code> （陰影的垂直偏移量），</li>
<li><code>blur-radius</code></li>
<li><code>spread-radius</code></li>
<li><code>color</code></li>
</ul>

8
curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md
View File

@@ -9,7 +9,7 @@ dashedName: adjust-the-hue-of-a-color
# --description--
顏色具有多種特性，包括色相、飽和度和亮度。 CSS3 引入了 `hsl()` 做爲顏色的描述方式。
顏色具有多種特性，包括色相、飽和度和亮度。 CSS3 引入了`hsl()`函數，作爲直接說明這些特徵來挑選顏色的替代方法。
**色相** 是色彩的基本屬性，就是平常所說的顏色名稱，如紅色、黃色等。 以顏色光譜爲例，光譜左邊從紅色開始，移動到中間的綠色，一直到右邊的藍色，色相值就是沿着這條線的取值。 在 `hsl()` 裏面，色相用色環來代替光譜，色相值就是色環裏面的顏色對應的從 0 到 360 度的角度值。
@@ -27,19 +27,19 @@ dashedName: adjust-the-hue-of-a-color
# --hints--
應使用 `hsl()` 屬性來設置顏色爲 `green`。
應使用 `hsl()` 函數來設置顏色爲 `green`。
```js
assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
```
應使用 `hsl()` 屬性來設置顏色爲 `cyan`。
應使用 `hsl()` 函數來設置顏色爲 `cyan`。
```js
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
```
應使用 `hsl()` 屬性來設置顏色爲 `blue`。
應使用 `hsl()` 函數來設置顏色爲 `blue`。
```js
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));

6
curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md
View File

@@ -15,11 +15,11 @@ dashedName: create-a-graphic-using-css
爲了創建一個圓形的對象，`border-radius` 應該被設置成 50%。
你應該還記得之前關卡的 `box-shadow` 屬性以及它的依次取值 `offset-x`、`offset-y`、`blur-radius`、`spread-radius` 和顏色值。 其中 `blur-radius` 和 `spread-radius` 是可選的。
你應該還記得之前關卡的 `box-shadow` 屬性以及它的依次取值 `offset-x`、`offset-y`、`blur-radius`、`spread-radius` 和 `color` 值。 其中 `blur-radius` 和 `spread-radius` 是可選的。
# --instructions--
把編輯器裏的正方形元素變成新月形狀。 首先，把 `background-color` 改爲 `transparent`，接着把 `border-radius` 屬性設置成 50%，以創建一個圓形。 最後，更改 `box-shadow` 屬性，使其 `offset-x` 爲 25px，`offset-y` 爲 10px，`blur-radius` 爲 0，`spread-radius` 爲 0，顏色爲 `blue`。
把編輯器裏的正方形元素變成新月形狀。 首先，把 `background-color` 改爲 `transparent`，接着把 `border-radius` 屬性設置成 50%，以創建一個圓形。 最後，更改 `box-shadow` 屬性，使其 `offset-x` 爲 25px，`offset-y` 爲 10px，`blur-radius` 爲 0，`spread-radius` 爲 0，`color` 爲 `blue`。
# --hints--
@@ -35,7 +35,7 @@ assert(code.match(/background-color:\s*?transparent;/gi));
assert(code.match(/border-radius:\s*?50%;/gi));
```
更改 `box-shadow` 屬性，使其 `offset-x` 爲 25px，`offset-y` 爲 10px，`blur-radius` 爲 0，`spread-radius` 爲 0，顏色爲 `blue`。
更改 `box-shadow` 屬性，使其 `offset-x` 爲 25px，`offset-y` 爲 10px，`blur-radius` 爲 0，`spread-radius` 爲 0，`color` 爲 `blue`。
```js
assert(

10
curriculum/challenges/chinese-traditional/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md
View File

@@ -28,15 +28,15 @@ dashedName: create-a-more-complex-shape-using-css-and-html
# --instructions--
把屏幕裏的元素變成心形。 在 `heart::after` 選擇器裏，把 `background-color` 改成 `pink`，把 `border-radius` 改成 50%。
把屏幕裏的元素變成心形。 在 `.heart::after` 選擇器裏，把 `background-color` 改成 `pink`，把 `border-radius` 改成 50%。
接下來，用類選擇器選取 class 爲 `heart`（只是 `heart`）的元素，爲它添加 `transform` 屬性。 使用 `rotate()` 函數並設置角度爲 -45 度。
最後，在 `heart::before` 選擇器裏面，設置 `content` 屬性值爲空字符串。
最後，在 `,heart::before` 選擇器裏面，設置 `content` 屬性值爲空字符串。
# --hints--
`heart::after` 選擇器的 `background-color` 屬性值應爲 `pink`。
`.heart::after` 選擇器的 `background-color` 屬性值應爲 `pink`。
```js
const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0];
@@ -45,7 +45,7 @@ assert(
);
```
`heart::after` 僞元素的 `border-radius` 屬性值應爲 50%。
`.heart::after` 僞元素的 `border-radius` 屬性值應爲 50%。
```js
assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
@@ -57,7 +57,7 @@ class 爲 `heart` 的元素的 `transform` 屬性應使用 `rotate()` 函數並
assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
```
`heart::before` 僞元素的 `content` 應爲空字符串。
`.heart::before` 僞元素的 `content` 應爲空字符串。
```js
assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));

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

@@ -11,7 +11,7 @@ dashedName: use-a-bezier-curve-to-move-a-graphic
前面的關卡涉及了使用 `ease-out` 預定義值描述了動畫以高速開始低速結束。 右邊的動畫展示了 `ease-out` 效果（藍色的元素）和 `linear` 效果（紅色的元素）的區別。 同樣的，`ease-out` 預定義值也可以用貝塞爾曲線函數實現。
通俗的講，將一條直線放在範圍只有 1 的座標軸中，並從中間拿 `p1` 和 `p2` 兩個點來拉扯（X 軸的取值區間是 \[0, 1]，Y 軸任意），最後形成的曲線就是動畫的貝塞爾速度曲線。 下面是貝塞爾曲線模仿 ease-out 預定義值的例子：
通俗的講，將一條直線放在範圍只有 1 的座標軸中，並從中間拿 `p1` 和 `p2` 兩個點來拉扯（X 軸的取值區間是 \[0, 1]，Y 軸任意），最後形成的曲線就是動畫的貝塞爾速度曲線。 下面是一個使用值來模仿 `ease-out` 樣式的 Bezier 曲線示例：
```css
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);

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

@@ -47,7 +47,7 @@ assert(!code.match(/90deg/gi));
assert(code.match(/yellow\s+?0(px)?/gi));
```
40px 處的一個漸變顏色應該是 `yellow`。
40 像素處的第一個色標應該是 `yellow`。
```js
assert(code.match(/yellow\s+?40px/gi));