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