# Sketch to CSS

## 學習來源
* youtube影片：[從 Sketch 設計到 CSS 切版](https://www.youtube.com/watch?v=ev9bGi_XCqU)
* codepen案例：[0913 demo](https://codepen.io/Wcc723/pen/zEYXdN)

## 使用工具
* [Sketch](https://www.sketchapp.com/)：UI 設計軟體
(補充youtube影片：[六角學院 - Sketch 介紹](https://www.youtube.com/watch?v=dxUR0kfidb0&t=18s))
* [Codepen](https://codepen.io/pen/tour/welcome)：線上編譯器

## 編譯器初始化設定(Pen Settings)
#### step1.CSS設定為SCSS
#### step2.載入icon服務
可以手動直接將下方CDN貼到基本設定欄位中。或是透過畫面中內建的搜尋功能，搜尋：**Font-Awesome**，CDN將自動被加入欄位中。

https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css


#### step3.設定完成(Save&Close)

## 正式開始切版
#### 切版呈現目標

#### 背景色設定
step1.(SCSS語法)將顏色命名為一個變數

$bg-color1: #FCF4ED;
$bg-color2: #F0C7B2;

step2.設計漸層背景

body{
  height:100vh;/*body設定為裝置高度的100%*/
  background-image:linear-gradient(175deg,$bg-color1,$bg-color1 50%,$bg-color2 50%)
  /*角度175度,開始色,開始色比例,結束色比例*/
}

#### 中間卡片基本設定
step1.先在html中給他一個命名，名為**card**

<div class="card"></div>

step2.在css中定義**card**的基本樣式

.card{
  background-color:#fff;
  padding:15px;
  height:60vh;
  width:600px;
}

step3.加入：**box-sizing**屬性

==當你設定一個元素樣式為 **box-sizing**: border-box;，這個元素的內距和邊框將不會增加元素本身的寬度。==

.card{
  box-sizing:border-box;
}

或者可以用*{}，代表對所有元素統一做設定

*{
  box-sizing:border-box;;
}


step4.為**card**添加陰影

$card-box-shadow: 0 4px 30px #979797;

.card{
  box-shadow:$card-box-shadow;
}

step5.如何讓**card**置中整個畫面呢？在**body**中加入對齊的設定！

body{
  display:flex;/*彈性布局*/
  justify-content:center;/*//水平置中*/
  align-items:center;/*垂直置中*/
}

#### 卡片內圖片
step1.先在html中給予一個畫面空間

<div class="card">
    <div class="brand-bg"></div><!--新增這個div作為圖片空間 -->
    <h1>About JENDES</h1>
</div>

step2.先將父元素card定位

.card{
  position:relative;
}

step3.再將子元素brand-bg(遮色片)定位

.brand-bg{
  position:absolute;/*相較於父元素的定位方式 */
  left:0;
  top:0;
  bottom:0;
  width:445px;
 
}

step4.載入圖片url，並相較於遮色片做定位

.brand-bg{
  background-image:url(https://images.unsplash.com/photo-1550939810-cb345b2f4ad7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2632&q=80);
  background-size:527px 633px;/*載入圖片的尺寸 */
  background-position:-41px -10px;/*相較於遮色片的定位 */
}

step5.遮色片作梯形切割

.brand-bg{
     clip-path:polygon(0 0, 339.05px 0,445px 100%,0% 100%); 
     /*四個點的位置依序是 左上,右上,右下,左下*/
}

#### 卡片內文字
step1.先在html中給文字一個區塊畫面

<div class="card">
  <div class="brand-bg"></div>
  <div class="card-block">
    <div class="card-header">
      <h1>About JENDES</h1>
    </div>
    <div class="card-body">
      <p>粉橘色，一個溫柔又有個性的顏色。
        <br/>柔和色相的背後蘊含著明亮活潑的橘彩，卻同時調入了冷靜灰階。 
        <br/>有如生活中的我們，一人扮演著多種角色，每個角色充滿著層次、彈性，無法輕易僅以黑白雙色定義。
      </p>
      <p>讓每道顏色都能在這找到適合的穿著，舒服展現每一個自己。
        <br/>由裡到外，穿出自信自在。
      </p>
      <p>When style shines from inside, no one can define you.
        <br/>You are just who you are. 
      </p>
    </div>
    <div class="card-footer">
      <a href="#" class="btn">＋電子報訂閱</a>
    </div>
  </div>

==p標籤代表文字段落==

==br標籤代表斷行==

step2.定位文字區塊相較於card的位置

.card-block{
  width:318px;
  /*設定右方文字在左方圖層上面 */
  position:relative;
  x-index:3; 

  /*設定裡面的物件排列為flex*/
  /* flex預設是由左至右，可以調整flex-direction:column，改為由上到下== */
  display:flex;
  flex-direction:column;
}

==flex跟position是可以一起使用的，兩個沒有關係;float跟display也沒有關係;flex裡面可以再有flex==

step3.設定**card-footer**定位在區塊的最下方

  .card-footer{
    /*使用auto會自動將空間用空白補滿*/
    margin-top:auto;
  }

step4.設定**btn**樣式

$btn-color:#D8D8D8;
.btn{
  background-color:$btn-color;
  color:#000000;
  width:292px;
  
  padding-top:0.5rem;
  padding-bottom:0.5rem;
  display:block;/*設定區塊元素 */
  text-decoration:none;
  text-align:center;
}

==display:block - **區塊元素**，元素會以區塊方式呈現。一個區塊元素會讓其內容從新的一行開始顯示，並盡可能的撐滿容器。==

==display:inline - **行內元素**，所有文字或圖片均不換行，也就是全部都會是同一行的意思。==

step5.設定**btn**的動態hover樣式變化

.btn{
  background-color:$btn-color;
  &:hover,&:focus{
    background-color:darken($btn-color,15%);
  }
}

step6.設定內文字體

h1{
  font-size:32px;
  font-weight:bolder;
  }
.card-header{
  color:#AD5E36;
  font-family:cursive;
  font-weight:bold;
}
p{
  font-size:16px;
  margin-top:16px;
  line-height: 20px;
}
.card-body{
  font-family:"STXihei","FangSong",cursive;
  color:#6D7278;
}

參考資料：[CSS 常用中文字型 (Traditional Chinese font family)
](http://blog.ja-anything.com/2016/11/25/css-%E5%B8%B8%E7%94%A8%E4%B8%AD%E6%96%87%E5%AD%97%E5%9E%8B-traditional-chinese-font-family/)

step7.加上簽名圖片

.sign-image{
    margin-left:203px;
    margin-top:16px;
    width:115px;
    height:39px;
    background-image:url(https://www.jendesstudio.com/front/assets/images/jenwu.png);
    background-size:115px 39px;
  }

## 結果呈現

* [codepen編譯檔](https://codepen.io/leah-lin/pen/YgKjdZ)
* [github打包檔](https://github.com/lehlin912/practice_css_slicingUI_0226-)