Int's blog

transform提供開發者可以對元素旋轉、位移、縮放等等，只要使用對應的函式就能達到效果。

函式

• translate: 位移

  1	transform: translate(x, y);

• matrix: 向量變換

  1	transform: matrix(a, b, c, d, tx, ty);

• scale: 縮放

  1 2	transform: scale(sx); transform: scale(sx, sy);

• rotate: 旋轉

  1	transform: rotate(a);

• skew: 傾斜

  1 2	transform: skew(ax); transform: skew(ax, ay);

SCSS是用來更方便、更有結構性撰寫CSS的一種語言，撰寫後的SCSS會被編譯成CSS。
這篇會來介紹SCSS的特色以及與CSS的不同之處。

巢狀結構

scss可以使用巢狀結構，將子元素包在父元素的大括弧裡。

1
2
3
4
5
6
7

.box {
	width: 100%
	a {
    	color: #2D2D2D;
    }
}

編譯後的CSS檔案會長這樣

1
2
3
4
5
6
7

.box {
	width: 100%
}

.box a {
	color: #2D2D2D;
}

如果名稱相同也可以用&來代替

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.box {
	width: 100%
	a {
    	color: #2D2D2D;
        
        &:hover {
        	color: #1C1C1C;
        }
    }
    
    &-image { //if the class name is box-image
    	width: 50%
    }
}

變數

SCSS可以像js那樣設定變數，並帶入到選擇器中

1
2
3
4
5
6
7
8
9
10

$primary: #2D2D2D;
$secondary: #1C1C1C;

$font-size-lg: 48px;
$font-size-md: 24px;

.box {
	color: $primary;
    font-size: $font-size-lg;
}

mixin

mixin有點類似函數，可以將常用的語法包裝成mixin，要使用時可以直接拿出來，不過要注意，使用時須搭配@include。

1
2
3
4
5
6
7
8
9

@mixin rounded-border() {
	border-radius: 24px;
    border: 1px solid black;
}

.box {
	width: 100%;
    @include rounded-border();
}

結語

以上就是scss的一些簡單介紹，其他我沒介紹到的語法因為我自己還沒用過也還沒學會，之後會再補上。

在scss中有個語法叫!default，與css中的!important有點像是相反的存在，關於!important可以參考這篇，不過!defult是scss特有的，css並沒有。

如果在屬性後加上!default他會變成類似預設值的存在，權重最低，可以用任何方式覆蓋。

通常會用在scss的變數上

1

$primary: blue !default;

舉例來說bs5中的 _variable.scss檔案的許多變數都有使用到!default。

結語

關於SCSS的基礎介紹可以看這篇。

為了讓網頁看起來更豐富，很常會讓頁面在滾動時套用動畫，這篇會介紹最簡單達成這個目的的插件-animation on scroll library。

AOS插件提供了非常多樣的簡易載入動畫，如果只是要讓網頁呈現簡單的動畫，aos肯定是首選。

載入方法

1. npm、yarn

2. CDN

css:

1

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

js:

1

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

使用

1. 在網頁中加入初始化js語法(可以寫在script中或寫在外部的js檔案)。

   1	AOS.init();

2. 在欲套用動畫的元素上加入對應的動畫函式。

   1	<div data-aos="fade-up"></div>

兩步驟結束，是不是超簡單XD
當然也可以自訂動畫時間、動畫函式與滾動次數等等

1
2
3

<div data-aos="fade-up"
     data-aos-duration="3000">
</div>

1
2
3
4

<div data-aos="fade-down"
     data-aos-easing="linear"
     data-aos-duration="1500">
</div>

套用方式也是只要複製貼上就好，相當簡單。

結語

之前不知道有這個套件我都手寫jQuery還達不到自己想要的效果，自從知道這個套件後簡單的載入動畫我都改用這個了。

opacity顧名思義就是拿來調整透明度的，可以針對目標元素改變透明度，數值為0~1之間，0為完全透明，1為完全不透明。

語法

1
2
3

div {
	opacity: 0.5;
}

範例

範例中的box1與box2正是使用了opacity的區別，一般來說opacity會應用在hover的效果，我通常會用在圖片上，讓圖片產生hover效果，而一般開發者常見的用法會是overlay，讓他產生一個有透明度的背景(overlay)覆蓋整個元素，範例中的box3就是應用了opacity與overlay來達到效果的。

CSS提供了許多語法來做動畫，這裡要介紹的是@keyframe這個關鍵字，可以針對元素來做一連串的動畫。

語法

首先要在@keyframe關鍵字後面為自己的動畫做命名，到時候套用到元素上時會使用。@keyframe的語法有幾種，可以針對秒數來切割動畫效果，或是直接一次到底。

• from、to

1
2
3
4

@keyframe myAnimation {
	from {top: 0px;}
    to {top: 200px;}
}

這個寫法元素就可以直接最左邊移動到最右邊

• 針對秒數細分

1
2
3
4
5
6
7

@keyframes myAnimation {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}

這個寫法會將動畫持續時間切割成100等分，到達指定%數時會執行對應的動畫。假設動畫持續時間設定為4秒，那第0秒時會在top: 0px的位置，第一秒時(4*0.25)會移動到top: 200px的地方，依此類推

套用到元素上

要讓元素使用我們用@keyframe設定的動畫就要使用animation語法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@keyframes myAnimation {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: myAnimation 5s;
}

animation

aniamtion也如同background、border等等，有多種屬性，並且可以合併成一個屬性。

• animation-name: 欲套用的@keyframe動畫名稱。
• aniamtion-duration: 動畫持續時間。
• aniamtion-duration-function: 動畫函式，css有寫好一些動畫函式，或是可以自己撰寫，可以參考轉場動畫。
• animation-delay: 動畫延遲時間。
• animation-iteration-count: 動畫重複次數，也可以使用infinite讓他永遠持續下去。
• animation-direction: 動畫的方向。
• animation-fill-mode: 動畫最後會停在哪格。
• animation-play-state: 動畫的播放狀態，有paused和running兩個屬性。

範例

vmax與vmin是css中的單位，與vh、vw很相似，都是依據viewport來改變大小的單位，與vh、vw相同，範圍是0~100。

VMAX

vmax會找到viewport中較大的那邊，元素的長度或寬度會與那個邊相同長度，比如現在螢幕大小是1920*1080，假設我使用了一個元素他的寬度是100vmax，那麼這個元素的寬度會和螢幕寬度相同(1920 > 1080)。

VMIN

和vamx相反，vmin會找較短的邊，該元素長度或寬度會與短邊相同。

範例

• 可以試著改變螢幕大小來觀看效果

在CSS中有許多的單位提供開發者使用，不同情況下適合的單位都不同，這篇將會彙整所有CSS可以使用的單位。

絕對單位

不會隨著root大小或螢幕大小改變的單位。

相對單位

會自適應的單位，為了因應RWD的需求，現在大多使用這些單位來做開發。

結語

最常使用的單位是px、rem、vw、vh、%這幾個，如果可以的話盡量使用px以外的其他幾種單位，因為px是絕對單位。不過並不是所有元素都要更改成相對單位，如果是border或shadow之類的寬度還是會習慣使用px，因為我們通常不會希望這些樣式改變。

在設計網頁時我們很常將一個區塊作為可點擊的連結，例如可點擊的卡片、可點擊的文章等等，平常的情況下我們都會使用a tag來做出這樣的效果，不過bs5提供了一個更簡單的方法來實作。

使用方法

只要在對應區塊的a連結內加入stretched-link class就可以讓整個父層元素變得
可點擊。

• 以卡片為例

原理

他是透過偽元素::after並用position:absolute讓a連結覆蓋整個元素，因為bs5的卡片元件本身就有position:relative的特性，所以可以直接使用，其他元件或自己寫的元素沒有的話要記得在最外層加上position: relative才會作用。

可能會讓連結無法延伸的原因

剛剛也提到stretched-link是透過position:absolute實作，所以只要有以下情況都可能讓他無法使用:

• static 以外的 position 值。
• none 以外的 transform 或 perspective 值。
• 在 transform 或 perspective 使用 will-change 作為值。
• none 以外的 filter 值，或是在 filter 使用 will-change 作為值 (只會在 Firefox 作用)。

在使用時要特別注意。

之前我有介紹過bootstrap的卡片元件，不過在使用這個元件時都會遇到一個問題，就是卡片會自適應內容而導致每張卡片高度不同，這篇會來介紹如何讓卡片元件等高以及在RWD的情況下該如何排版。

方法一

• 使用card-group與card-footer。

如果我卡片用card-group包裹起來，並為他們都加上card-footer，那麼卡片高度就會自動對齊。

不過這種方法有個問題，他不支援小螢幕下換行，也就是說在RWD方面不是那麼的理想，所以一般來說會使用方法二。

方法二

• 使用網格排版與h-100

為每個卡片元件下col，透過bs5的網格系統達成不同螢幕比例下會自動換行。再來是透過在card上使用h-100讓卡片稱滿，使得所有卡片高度相同。

不過這裡有個小地方要注意，換行後稱滿的卡片與下行的卡片之間會沒有間距，所以要透過在col上下margin-bottom來讓卡片之間有間距。

• 如果是使用scss來開發可以在_variable.scss中找到card-height屬性，將它改為100%就不用手動一個一個加上h-100。