CSS-切版練習

發表於 | 分類於

紀錄練習切版時，遇到卡卡的問題

icon 利用 position 位移

示意圖

重點

  1. row 的 position 設置 relative;
  2. icon 的 position 設置 absolute;
  3. 移動 icon 的位置， top 、 left
  4. 將 icon 移進去在 input 時，input 需增加 左邊 padding，保留位置給 icon。

HTML 程式碼

1
2
3
4
5
6

<div class="row">
    <label for="email">Email Address*</label>
    <label for="email" class="icon"><i class="fa fa-envelope-o" aria-hidden="true"></i></label>
    <input type="email" name="email" id="email">
</div>

SCSS 程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//記得input的左邊要留padding,保留一些位置給icon
input {
    padding: 6px 0 6px 28px;
}


//位移 icon 至 input 裡
.row {
    position: relative;

    .icon {
        position: absolute;
        top: 26px;
        left: 9px;
        font-size: 16px;
        z-index: 10;
        color: rgba(61, 17, 1, 0.5);
    }
}

See the Pen LoginForm&icon位移至input.

緞帶效果

重點

  • .tag-wrap 為 藍色框線
  • .tag 為 紅色框線(熱賣)
  1. .tag-wrap 的 position 設置 absolute ，並且位移要超出原有的框架，才能做出緞帶效果;
  2. 新增 .tag 的 width、background-color…等屬性
  3. 利用 transform ，位移翻轉 .tag
  4. 移動好 .tag 後，在 .tag-wrap 新增 overflow: hidden;， 將多餘的部份隱藏
  5. 利用 .tag 的偽元素 :before、:after，新增 小三角 ▲

html 程式碼

1
2
3
4
5
6
7
8
9
10
11
<div class="card">
  <!--  不影響結構  -->
  <div class="tag-wrap">
    <div class="tag">
      熱賣!!
    </div>
  </div>

  <!--  主要結構  -->
  <div class="card-block"></div>
</div>

SCSS 程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
.card {
  width: 230px;
  height: 200px;
  position: relative;
}

//緞帶效果
.tag-wrap {
  $p: 5px;
  $size: 80px;
  position: absolute;
  //位移要超出原有的框架，才能做出緞帶效果
  top: -$p;
  right: -$p;
  //超出的部份隱藏
  overflow: hidden;
  width: $size * 2;
  height: $size * 2;
  //查看位置
  border: 1px solid blue;

  .tag {
    position: relative;
    width: $size * 2;
    background-color: orange;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    text-align: center;
    margin-top: -$p * 2;
    color: white;
    //rotate為旋轉、translate為移動、skew為傾斜、scale為縮放
    transform: translateX(50%) rotate(45deg) translateY(150%);
    //查看位置
    border: 1px solid red;

    &:before {
      content: "";
      position: absolute;
      //利用 加粗邊框 + 邊框上方顏色，達到小三角的效果
      border: $p solid transparent;
      border-top-color: darken(orange, 15%);
      bottom: -10px;
      left: 6px;
    }

    &:after {
      content: "";
      position: absolute;
      //利用 加粗邊框 + 邊框上方顏色，達到小三角的效果
      border: $p solid transparent;
      border-top-color: darken(orange, 15%);
      bottom: -10px;
      right: 14px;
    }
  }
}

codepen 範例: CSS-緞帶效果(乾淨版本)
codepen 範例: CSS-緞帶效果

觀念補充

六角範例

從 Sketch 設計到 CSS 切版

本日範例：https://codepen.io/Wcc723/pen/zEYXdN

本日設計參考：https://codepen.io/Wcc723/pen/pWzxXO

transform

CSS 程式碼

1
2
3
4
5
6
7
8
9
10
11
12
/* 
rotate為旋轉
skew為傾斜
scale為縮放
translate為移動 
*/

/* 範例1：移動X軸 → 旋轉 → 移動Y軸 */
transform: translateX(150%) rotate(45deg) translateY(50%);

/* 範例2：旋轉 → 移動X軸 → 移動Y軸 */
transform: rotate(45deg) translateX(150%) translateY(50%);

上列 CSS 程式碼 「範例 1 、 範例 2」，
雖然同樣都做了「移動 X 軸、移動 Y 軸、旋轉」的動作，
但是因為 執行順序 不同，
所以二個範例呈現出來的結果也會不一樣。

See the Pen transform_執行順序.

transform 基本介紹 >1.CSS transform 概觀 >2.CSS transform 軸線的謊言 >3.CSS transform-origin >4.CSS transform-3D 的透視

SCSS 顏色函數範例

1
2
3
4
5
6
7
8
9
.box {
  background: rgba(#000, 0.5); //變半透明
  background: invert(#f00); //變反向色彩
  background: lighten(#06c, 30%); //變亮
  background: darken(#06c, 15%); //變暗
  background: saturate(#06c, 50%); //提高飽和度
  background: desaturate(#06c, 50%); //降低飽和度
  background: grayscale(#06c); //灰階
}

SCSS 相關

linear-gradient 讓顏色有漸層效果

CSS 程式碼

1
background-image: linear-gradient(165deg, white, white 50%, $bg-color 50%);

background: linear-gradient( 方向, 第一個顏色, 第二個顏色, … );

背景色  —  线性渐变 >背景色  —  漸層效果

繪製幾何圖形(支援度不高)

1
clip-path: polygon(0 0, 280px 0, 370px 100%, 0% 100%);

CSS clip-path 生成器 >利用 CSS 繪製更多形狀 >不可思议的 CSS 之 CLIP-PATH