🎄🎅 🦌translate doc to en

Author: RunleiWang

bevel-corners.md

@@ -1,7 +1,7 @@
 
-# 切角效果
+# Cutout corners
 
-?> 背景知识：:point_right: [gradient](https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient), [clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)
+?> Background：:point_right: [gradient](https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient), [clip-path](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)
 
 <vuep template="#bevel-corners"></vuep>
 
@@ -64,27 +64,27 @@
   <main>
     <div class="bevel-corners">
       <p>① linear-gradient</p>
-      <div>A paragraph of filler text.La la la de dah de dah de dah de la.La la la de dah de dah de dah de la.La la la de dah de dah de dah de la.</div>
+      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in.</div>
     </div>
     <div class="bevel-corners">
       <p>② radial-gradient</p>
-      <div>A paragraph of filler text.La la la de dah de dah de dah de la.La la la de dah de dah de dah de la.La la la de dah de dah de dah de la.</div>
+      <div>Etiam dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Neque egestas congue quisque egestas. Quis ipsum suspendisse ultrices gravida dictum fusce.</div>
     </div>
     <div class="bevel-corners">
-      <p>③ 内联SVG</p>
-      <div>A paragraph of filler text.La la la de dah de dah de dah de la.La la la de dah de dah de dah de la.La la la de dah de dah de dah de la.</div>
+      <p>③ Inline SVG</p>
+      <div>Cras semper auctor neque vitae tempus quam pellentesque nec. Congue quisque egestas diam in arcu. Purus in mollis nunc sed id semper risus in.</div>
     </div>
     <div class="bevel-corners">
       <p>④ clip-path</p>
-      <div>A paragraph of filler text.La la la de dah de dah de dah de la.La la la de dah de dah de dah de la.La la la de dah de dah de dah de la.</div>
+      <div>Molestie ac feugiat sed lectus vestibulum. Eu turpis egestas pretium aenean pharetra magna ac. Porttitor eget dolor morbi non arcu risus quis.</div>
     </div>
   </main>
 </template>
 <script>  
 </script>
 </script>
 
-### 浏览器支持
+### Browser Support
 
 <iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-gradients&amp;periods=future_1,current,past_1,past_2,past_3&amp;accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>
 

blink.md

@@ -1,15 +1,14 @@
 
-# 闪烁效果
+# Blink
 
-?> 背景知识：:point_right: [animation-direction](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-direction)
-
-`animation-direction`属性接受的值共有四个，为了你能从视觉上直接理解其作用，我以下图一段从`#FFFFFF`变化到`#b4a078`并循环三次的动画为例，展示了这四个值各自对动画的作用效果。
+?> Background：:point_right: [animation-direction](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-direction)
 
+The `animation-direction` Property has four values can be accepted. For the purpose of understanding its effect visiually and precisely, this document takes the example of the animation that changes from `#FFFFFF` to `#b4a078` and loop three times, which present the different effects of the different four values. See the following diagram.  
 <div align="center"><img src="static/animation-direction.jpeg" width="60%" align="center"/></div><br />
 
-<vuep template="#blink"></vuep>
+<vuep template="#blink_tlp"></vuep>
 
-<script v-pre type="text/x-template" id="blink">
+<script v-pre type="text/x-template" id="blink_tlp">
 <style>
   main {
     width: 100%; height: 329px;
@@ -54,17 +53,20 @@
 </style>
 <template>
   <main class="main">
-    <span>animation-direction: 默认<code>normal</code></span><p>info~</p>
-    <span>animation-direction: 反向<code>alternate</code></span><p>warning~ warning~</p>
-    <span>animation-direction: 反向交替<code>alternate-reverse</code></span><p>error~ error~ error~</p>
+    <span>animation-direction: default
+    <code>normal</code></span><p>info~</p>
+    <span>animation-direction: Reverse
+    <code>alternate</code></span><p>warning~ warning~</p>
+    <span>animation-direction: Reverse alternating
+    <code>alternate-reverse</code></span><p>error~ error~ error~</p>
   </main>
 </template>
 <script>
 </script>
 </script>
 
-> 一切的过度皆应该由动画来完成
+> All the transitions should be animated.
 
-### 浏览器支持
+### Browser Support
 
 <iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-animation&amp;periods=future_1,current,past_1,past_2,past_3&amp;accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>

blurry-weaken-background.md

@@ -1,10 +1,10 @@
-# 通过模糊弱化背景
+# Blurry waken background
 
-?> 背景知识：:point_right: [css-boxshadow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/css-boxshadow), HTML < [dialog](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/dialog) >
+?> Background：:point_right: [css-boxshadow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/css-boxshadow), HTML < [dialog](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/dialog) >
 
-<vuep template="#blurry-weaken-background"></vuep>
+<vuep template="#blurry-weaken-background_tlp"></vuep>
 
-<script v-pre type="text/x-template" id="blurry-weaken-background">
+<script v-pre type="text/x-template" id="blurry-weaken-background_tlp">
 <style>
   main {
     width: 100%;
@@ -80,9 +80,9 @@
 </script>
 </script>
 
-> 创造良好的用户体验应当养成一种习惯~
+> Greate user experience should always go first as a habit ~
 
-### 浏览器支持
+### Browser Support
 
 <iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-boxshadow&amp;periods=future_1,current,past_1,past_2,past_3&amp;accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>
 

bounce.md

@@ -1,18 +1,18 @@
 
-# 弹跳效果
+# Bounce
 
-?> 背景知识：:point_right: [animation](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation), [timing-function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/timing-function), [transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform)
+?> Background：:point_right: [animation](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation), [timing-function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/timing-function), [transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform)
 
-小球下落过程属于自由落体运动，在时间函数[timing-function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/timing-function)中,`ease`（更快的加速度）相对更接近于自由落体运动，所以下落过程我们选用`ease`作为时间函数的关键值；当小球被弹起时属于减速运动，我们需用使用`ease`的方向版本`cubic-bezier(.1,.25,.1,.25)`（更快的减速度）作为时间函数的函数值来模仿减速运动。调速函数如下图所示：
+The falling of ball is a typical Free Fall motion, in the [timing function](https://developer.mozilla.org/zh-CN/docs/Web/CSS/timing-function), `ease`(sharper accelerated speed) is relatively closer to the free-fall motion. Therefore, we use the `ease` as the keyword during the falling process; However, when the ball is bounced, it belongs to the deceleration motion, we need to use the `ease` direction version `cubic-bezier(.1,.25,.1,.25)`(faster deceleration) as the function value of the time function to mimic deceleration. The speed control function is shown below:   
 
 <br/>
 <div align="center"><img src="static/cubic-bezier.jpeg" width="100%" align="center"/></div>
 
 ------
 
-<vuep template="#bounce"></vuep>
+<vuep template="#bounce_tlp"></vuep>
 
-<script v-pre type="text/x-template" id="bounce">
+<script v-pre type="text/x-template" id="bounce_tlp">
 <style>
   main{
     width: 100%; height: 584px;
@@ -25,7 +25,7 @@
     padding: 20px;
     border-radius: 50%;
     background: #b4a078 radial-gradient(at 30% 30%, #f7f5f1, #b4a078);
-    animation: bounce 2s cubic-bezier(.1,.25,1,.25) forwards; /* 当动画完成后，保持最后一帧 */
+    animation: bounce 2s cubic-bezier(.1,.25,1,.25) forwards; /* when the animation is complete, keep the last frame */
   }
   @keyframes bounce {
     40%,
@@ -72,7 +72,7 @@
 </script>
 </script>
 
-### 浏览器支持
+### Browser Support
 
 <iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-animation&amp;periods=future_1,current,past_1,past_2,past_3&amp;accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>
 

centering-known.md

@@ -1,13 +1,13 @@
 
-# 水平垂直居中
+# Centered
 
-?> 背景知识：:point_right: [display](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display), [calc()](https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc), [flex](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex)
+?> Background：:point_right: [display](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display), [calc()](https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc), [flex](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex)
 
-> “44 年前我们就把人类送上月球了，但现在我们仍然无法在 CSS 中实现垂直居中。”        [——James Anderson](/centering-known)
+> "44 year ago we put a man on the moon,yet we still can't vertically centre things in CSS。"        [——James Anderson](/centering-known)
 
-以下的所有实现方案，笔者都在项目中验证过，每种方法都有自己的利与弊，大家可以根据具体的需求，选择最适合的方案。
+All the practices mentioned in the following part, I have experimented it on my own project. Those practices have both advantages and disadvantages. You guys can pick the most suitable solution according to your preference.
 
-> `display: flex` + `margin: auto` 不限定宽高 :thumbsup:
+> `display: flex` + `margin: auto` no limit to width & height :thumbsup:
 
 <vuep template="#flex"></vuep>
 
@@ -36,7 +36,7 @@
 </script>
 </script>
 
-> `display: grid` 不限定宽高 :thumbsup:
+> `display: grid` no limit to width & height :thumbsup:
 
 <vuep template="#grid"></vuep>
 
@@ -66,7 +66,7 @@
 </script>
 </script>
 
-> 绝对定位 `position: absolute` 限定宽高
+> absolute-positioned `position: absolute` limit the width & height
 
 <vuep template="#position"></vuep>
 
@@ -98,7 +98,7 @@
 </script>
 </script>
 
-> 绝对定位 `position: absolute` + `calc()` 限定宽高
+> absolute-positioned `position: absolute` + `calc()` limit the width & height
 
 <vuep template="#calc"></vuep>
 
@@ -129,7 +129,7 @@
 </script>
 </script>
 
-> 绝对定位 `position: absolute` + `translate` 不限定宽高 :thumbsup:
+> absolute-positioned `position: absolute` + `translate` no limit to width & height :thumbsup:
 
 <vuep template="#translate"></vuep>
 
@@ -160,7 +160,7 @@
 </script>
 </script>
 
-> 仿table布局 `display: table/table-cell` + `vertical-align: middle` 不限定宽高
+> table-like layout `display: table/table-cell` + `vertical-align: middle` no limit to width & height
 
 <vuep template="#table"></vuep>
 
@@ -194,7 +194,7 @@
 </script>
 </script>
 
-> 伪元素 `:after` + `vertical-align:middle` 不限定宽高
+> pseudo-elements `:after` + `vertical-align:middle` no limit to width & height
 
 <vuep template="#after"></vuep>
 
@@ -230,9 +230,9 @@
 </script>
 </script>
 
-使用`vertical-align`实现居中时，居中元素`display`的值，必须为`inline-block/inline`，否则无法垂直居中，这是因为`vertical-align`只能用来指定行内元素`（inline）`或表格单元格`（table-cell）`元素的垂直对齐方式。更多请查看[MDN vertical-align](https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align)
+When you are applying the `vertical-align` to achieve the goal of centering, please remeber to set the value of `display` element to `inline-block/inline`, otherwise, you cannot make it center vertically. The reason is that `vertical-align` is utilized to define the way of vertical alignment only for the inline or the table-cell element. Please click [MDN vertical-align](https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align) for more information.
 
-### 浏览器支持
+### Browser Support
 
 <iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=calc&amp;periods=future_1,current,past_1,past_2,past_3&amp;accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>
 

circular-smooth.md

@@ -1,13 +1,13 @@
 
-# 延轨迹平滑效果
+# Circular smooth
 
-?> 背景知识：:point_right: [animation](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation), [transition](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition), [transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform), [animation-delay](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-delay)
+?> Background：:point_right: [animation](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation), [transition](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition), [transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform), [animation-delay](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-delay)
 
-> “transform-origin 只是一个语法糖而已。实际上你总是可以用 translate() 来代替它。”        [——James Anderson](/Aryeh Gregor)
+> "Transform-origin is just a syntactic sugar. In fact, you can always use translate() instead." [——James Anderson](/Aryeh Gregor)
 
-<vuep template="#circular-smooth"></vuep>
+<vuep template="#circular-smooth_tlp"></vuep>
 
-<script v-pre type="text/x-template" id="circular-smooth">
+<script v-pre type="text/x-template" id="circular-smooth_tlp">
 <style>
   main {
     width: 100%; height: 529px;
@@ -116,9 +116,9 @@
 </script>
 </script>
 
-!> 如有疑问，后续会添加细节的讲解~
+!> If any questions, please keep following the continued explanation.
 
-### 浏览器支持
+### Browser Support
 
 <iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-animation&amp;periods=future_1,current,past_1,past_2,past_3&amp;accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>
 

circular-text.md

@@ -1,11 +1,11 @@
 
-# 环形文字
+# Circular text
 
-?> 背景知识：:point_right: [SVG](https://developer.mozilla.org/zh-CN/docs/Web/SVG), [transition](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition)
+?> Background：:point_right: [SVG](https://developer.mozilla.org/zh-CN/docs/Web/SVG), [transition](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition)
 
-<vuep template="#circular-text"></vuep>
+<vuep template="#circular-text_tlp"></vuep>
 
-<script v-pre type="text/x-template" id="circular-text">
+<script v-pre type="text/x-template" id="circular-text_tlp">
 <style>
   main {
     width: 289px; height: 289px;
@@ -45,6 +45,6 @@
 </script>
 </script>
 
-### 浏览器支持
+### Browser Support
 
 <iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-transitions&amp;periods=future_1,current,past_1,past_2,past_3&amp;accessible-colours=false" frameborder="0" width="100%" height="458px"></iframe>

class-order-layout.md

@@ -1,17 +1,19 @@
 
-# 类订单布局
+# Class order layout
 
-?> 背景知识：:point_right: [水平垂直居中](/centering-known)
+?> Background：:point_right: [centring horizontally & vertically](/centering-known)
 
-此布局一般的需求为左侧高度不固定，右侧自适应高度并且居中。
+Normaly, this layout do not limit the height of the left side, while right-side should be centred with self-adaptive height.
+
+Requirments for this layout: 
 
 <div align="center" style="border: 1px solid #f5f5f5"><img src="static/interesting-layout-1.jpeg" width="100%" align="center"/></div>
 
-> 伪元素 `:after` + `vertical-align:middle` 方案
+> pseudo element `:after` + `vertical-align:middle` solution
 
-<vuep template="#class-order-layout"></vuep>
+<vuep template="#class-order-layout_tlp"></vuep>
 
-<script v-pre type="text/x-template" id="class-order-layout">
+<script v-pre type="text/x-template" id="class-order-layout_tlp">
 <style>
   main {
     width: 100%;
@@ -73,8 +75,8 @@
       <span class="left">
         <div v-for="ele in elements" @click="handleClick" class="item">{{symbol}}</div>
       </span>
-      <span class="center">垂直居中<br>垂直居中垂直居中垂直居中</span>
-      <span class="right">垂直居中</span>
+      <span class="center">Vertical centering<br>Vertical centering Vertical centering</span>
+      <span class="right">Vertical centering</span>
     </section>
   </main>
 </template>
@@ -101,11 +103,11 @@
 </script>
 </script>
 
-### 浏览器支持
+### Browser Support
 
 <iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-sel3&amp;periods=future_1,current,past_1,past_2,past_3&amp;accessible-colours=false" frameborder="0" width="100%" height="453px"></iframe>
 
-> 伪元素 `display: flex` 方案
+> pseudo element `display: flex` solution
 
 <vuep template="#layout-flexbox"></vuep>
 
@@ -155,8 +157,8 @@
       <span class="left">
         <div v-for="ele in elements" @click="handleClick" class="item">{{symbol}}</div>
       </span>
-      <span class="center">垂直居中<br>垂直居中垂直居中垂直居中</span>
-      <span class="right">垂直居中</span>
+      <span class="center">vertical centering<br>vertical centering</span>
+      <span class="right">vertical centering</span>
     </section>
   </main>
 </template>
@@ -183,11 +185,11 @@
 </script>
 </script>
 
-### 浏览器支持
+### Browser Support
 
 <iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=flexbox&amp;periods=future_1,current,past_1,past_2&amp;accessible-colours=false" frameborder="0" width="100%" height="418px"></iframe>
 
-> 伪元素 `display: grid` 方案 :thumbsup:
+> pseudo element `display: grid` solution :thumbsup:
 
 <vuep template="#layout-grid"></vuep>
 
@@ -229,8 +231,8 @@
       <span class="left">
         <div v-for="ele in elements" @click="handleClick" class="item">{{symbol}}</div>
       </span>
-      <span class="center">垂直居中<br>垂直居中垂直居中垂直居中</span>
-      <span class="right">垂直居中</span>
+      <span class="center">vertical centering<br>vertical centering</span>
+      <span class="right">vertical centering</span>
     </section>
   </main>
 </template>
@@ -257,6 +259,6 @@
 </script>
 </script>
 
-### 浏览器支持
+### Browser Support
 
 <iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-grid&amp;periods=future_1,current,past_1,past_2&amp;accessible-colours=false" frameborder="0" width="100%" height="400px" style="height: 418px;"></iframe>