Sketch to CSS

Posted on 本文总阅读量次

Sketch to CSS

學習來源

使用工具

編譯器初始化設定(Pen Settings)

step1.CSS設定為SCSS

step2.載入icon服務

可以手動直接將下方CDN貼到基本設定欄位中。或是透過畫面中內建的搜尋功能，搜尋：Font-Awesome，CDN將自動被加入欄位中。

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

step3.設定完成(Save&Close)

正式開始切版

切版呈現目標

呈現目標

背景色設定

step1.(SCSS語法)將顏色命名為一個變數

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

step2.設計漸層背景

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

中間卡片基本設定

step1.先在html中給他一個命名，名為card

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

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

1
2
3
4
5
6
.card{
  background-color:#fff;
  padding:15px;
  height:60vh;
  width:600px;
}

step3.加入：box-sizing屬性

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

1
2
3
.card{
  box-sizing:border-box;
}

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

1
2
3
*{
  box-sizing:border-box;;
}

step4.為card添加陰影

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

1
2
3
.card{
  box-shadow:$card-box-shadow;
}

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

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

卡片內圖片

step1.先在html中給予一個畫面空間

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

step2.先將父元素card定位

1
2
3
.card{
  position:relative;
}

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

1
2
3
4
5
6
7
8
.brand-bg{
  position:absolute;/*相較於父元素的定位方式 */
  left:0;
  top:0;
  bottom:0;
  width:445px;
 
}

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

1
2
3
4
5
.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.遮色片作梯形切割

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

卡片內文字

step1.先在html中給文字一個區塊畫面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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的位置

1
2
3
4
5
6
7
8
9
10
11
.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定位在區塊的最下方

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

step4.設定btn樣式

1
2
3
4
5
6
7
8
9
10
11
12
$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樣式變化

1
2
3
4
5
6
.btn{
  background-color:$btn-color;
  &:hover,&:focus{
    background-color:darken($btn-color,15%);
  }
}

step6.設定內文字體

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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)

step7.加上簽名圖片

1
2
3
4
5
6
7
8
.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;
  }

結果呈現

Sketch
© 2020 Leah's Blog All Rights Reserved. 本站访客数人次 本站总访问量次
Theme by hiero