CSS 不再只是讓網站看起來更漂亮。它已經發展成為一種工具，能讓網站栩栩如生地呈現出曾經被認為不可能實現的動作和互動。
因此，本指南將幫助你快速掌握三種強大的功能：過渡、動畫和變換。對於那些已經掌握了 CSS 基礎知識，並希望建立出與眾不同、經得起時間考驗的網站的網頁設計師和開發人員來說，瞭解和使用這些高階技術是必不可少的。
在學習本指南的過程中，你將獲得寶貴的技能，讓你的網站專案超越平凡。希望你還能從中獲得一些靈感。
高階 CSS 過渡
高階 CSS 過渡可使使用者介面元素具有互動性、吸引力和美觀性。想象一下，你的網站上有一個按鈕。通常情況下，它只是靜靜地放在那裡，但如果使用 CSS 過渡技術，當有人將滑鼠懸停在它上面時，它就會平滑地改變顏色或增大一些。
這個概念圍繞著插值的概念展開 – 在 CSS 屬性的不同狀態之間平滑過渡。
要建立這些效果，你需要熟悉幾個 CSS 屬性：
- 過渡屬性：這些屬性包括指定要製作動畫的屬性（如
background-color或opacity）、設定過渡的持續時間，以及決定transition-timing-function(如ease-in或linear)，該函式決定了過渡在持續時間內的進展方式。 - 定時函式：這些函式是必須的，因為它們可以控制過渡的加速和減速。其中最通用的選項之一是
cubic-bezier函式。該函式可以建立自定義的速度曲線，讓你完全控制轉場的節奏。一開始可能會有些棘手，但貝塞爾曲線函式等工具可以讓您更輕鬆地視覺化和建立這些曲線。
cubic-bezier 的一個應用例項。
下面是一個簡單的示例，說明如何在 CSS 中使用該函式：
.my-element {
transition-property: opacity;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
}
在此程式碼段中，.my-elementwill 將通過 cubic-bezier 函式定義的獨特速度曲線來改變其不透明度。這條曲線決定了一種特定的移動方式，比如開始時速度較慢，然後加快，最後減慢。
使用帶有自定義值的 transition-timing-function ，你可以讓網頁元素的移動方式感覺更自然、更動態，或者與標準方式完全不同。這是為網頁動畫增添個性和精細度的絕佳工具。
說到高階技術，這裡有幾種值得考慮：
- 同時處理多個屬性：為什麼只為一件事設定動畫？CSS 可讓您將多個屬性排成一行，並同時為它們製作動畫。這非常適合為動畫新增層次。
- 同步動畫：你還可以將不同的屬性排成一行，以相同的速度移動，從而產生更加協調的效果。
- 巢狀過渡：將過渡應用到容器中的元素。這樣，當你與容器進行互動時，子元素就會按照你的喜好進行操作。
確保這些動畫不僅美觀，而且執行流暢，尤其是在效能較弱的裝置上。使用 transform 和 opacity 等屬性是一個明智之舉，因為這些屬性對瀏覽器來說更容易使用，而且不會對效能造成太大影響。
此外，使用 will-change 屬性為瀏覽器提個醒，有助於瀏覽器做好準備，確保一切執行順暢。
最後要說明的是，要確保在任何地方都能正常執行：瀏覽器可能很挑剔。使用供應商字首有助於確保你的炫酷過渡效果在不同瀏覽器中都能正常執行。雖然會有一些額外的工作，但自動字首器等工具可以幫你處理這些工作，讓你省心省力。
CSS 變換
CSS 變換是為網頁設計增添趣味的好方法。當然，它們可以用來移動東西，也可以改變頁面的整體感覺。在這裡，transform 屬性是你的主要角色。
它用途廣泛，可以將元素從一個位置移動到另一個位置，比如在螢幕上滑動圖片或改變圖片大小–就像放大或縮小照片一樣，讓圖片看起來更近或更遠。如果你想玩得更花哨一些，還可以讓元素旋轉起來。
真正讓人印象深刻的是加入 3D 變換函式。利用 translate3d, scale3d, 和 rotate3d 等函式，元素可以跳出螢幕，在瀏覽器中創造更身臨其境的體驗。
以翻轉卡片效果為例。這是一個很好的功能，卡片的一面顯示特定資訊，翻轉後，另一面會顯示新的內容。這種互動元素能真正吸引訪客的注意力。
實現這種效果的關鍵在於有效使用 backface-visibility 屬性。這可以確保卡片背面在需要檢視之前保持隱藏狀態。
但為什麼要止步於此？當你將這些變換與轉場和動畫融合在一起時，你就能從 CSS 中獲得更多。你可以讓一個按鈕在懸停時優雅地變大，或者讓一個圖示在螢幕上俏皮地移動。這些動態變化為你的網頁元素增添了流動的特質，讓使用者體驗更加引人入勝。
Designmodo 提供了幾個漂亮的例項。首先，你可以看到 3D 變換的 CSS 分解。然後，您可以看到程式碼的實際應用：
Designmodo 提供了一個出色的 3D 變換示例
容器查詢
容器查詢是 CSS 值得探索的另一個方面。通過容器查詢，你可以根據容器的大小而不是整個螢幕的大小來為元素設計樣式。可以這樣想：你有一個盒子，無論盒子有多大或多小，你都希望裡面的東西看起來漂亮。容器查詢就很好地解決了這個問題。
當你想讓網頁的不同部分（如邊欄或卡片）根據空間大小改變外觀時，容器查詢就非常方便。每個元件都可以決定自己的風格，與頁面的其他部分無關。
下面簡要介紹一下如何使用它們：
- 設定容器：首先，告訴 CSS 頁面的哪個部分是容器。這需要使用
container-type和container-name等屬性。 - 編寫查詢：就像媒體查詢一樣，不過是針對容器。你要寫一條規則，”嘿，如果我的容器至少有這麼寬，那麼就做這些樣式更改”。
這就是基本程式碼的樣子：
@container (min-width: 300px) {
.component {
/* styles */
}
}
在此示例中，當容器的最小寬度達到 300px 時，將應用 .component 類中的樣式。
現在，容器查詢可用於各種情況，例如：
- 響應式邊欄和頁尾：根據容器大小調整側邊欄或頁尾的寬度和佈局。
- 響應式卡片：根據容器的寬度改變網格或柔性框佈局中卡片的佈局或樣式
雖然包括 Chrome、Firefox、Safari 和 Edge 在內的主流瀏覽器都支援容器查詢，但將其用作漸進增強仍不失為一種好的做法。對於不支援容器查詢的瀏覽器，從基本樣式開始，然後再對支援容器查詢的瀏覽器進行增強。
使用 Flexbox 進行垂直對齊
在 CSS 中，Flexbox 是一種非常方便的工具，尤其是在垂直對齊方面。雖然它已經存在了一段時間，但仍然非常實用，尤其是在沿橫軸對齊專案時（根據你的佈局，橫軸可以是垂直的）。
使用對齊項垂直對齊
Flexbox 中的 align-items 屬性是在容器內垂直對齊專案的首選。當你的 flex 容器具有行的 flex-direction 時，它就會起作用。通過該屬性，您可以控制 flex 容器的所有子項如何沿橫軸對齊。
例如，如果你在一個 flex 容器中放置了許多專案，並希望它們都垂直居中，你可以使用 align-items: center;。以下是使用 align-items 的主要選項：
flex-start: 將專案對齊到容器的起始位置。flex-end: 將專案對齊到容器的末端。center: 對齊容器中的專案居中。baseline: 根據基線對齊專案。stretch: 拉伸專案以填充容器（預設行為）。
使用 align-self 進行單獨控制
雖然 align-items 非常適合對齊容器中的所有專案，但有時你只想以不同的方式對齊一個專案。這就是 align-self 為何如此有用的原因。通過該屬性，你可以覆蓋單個 flex 專案的 align-items 值。它接受的值與 align-items 相同。
例如，假設你有一個 align-items: center 的 flex 容器，但有一個專案你想對齊到起始位置。你可以將 align-self: flex-start; 應用於該特定專案。這是精確控制單個專案對齊的好方法。
不過，在實際操作中使用這種方法會更有幫助。
比方說，你正在設計一個帶有徽標、連結和搜尋欄的導航欄。你希望連結居中，徽標對齊到頂部，搜尋欄對齊到底部。
你可以這樣做：
.nav-container {
display: flex;
flex-direction: row;
align-items: center;
}
.logo {
align-self: flex-start;
}
.search-bar {
align-self: flex-end;
}
在本例中，.nav-container 是一個 flex 容器，其專案一般居中。然而，徽標和搜尋欄卻打破了這一常規，分別對齊到了容器的起始和末尾。
CSS 中的現代顏色函式
CSS 中的現代色彩函式有了長足的發展，為網頁設計中定義和處理色彩提供了更復雜的方法。讓我們深入瞭解其中的一些函式：
1. rgb() 和 rgba()
rgb() 函式是使用紅、綠、藍通道定義顏色的傳統方法。每個通道的值在 0 到 255 之間。 rgba() 變體增加了一個不透明的 alpha 通道，1 表示完全不透明，0 表示完全透明。
看起來應該是這樣的：
.example {
color: rgb(255, 0, 0); /* Red */
background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
}
2. hsl() 和 hsla()
hsl() 用色相、飽和度和亮度表示顏色，使選擇顏色變化更加直觀。與 rgba() 一樣， hsla() 也包含一個不透明的 alpha 通道。就像這樣：
.example {
color: hsl(120, 100%, 50%); /* Green */
background-color: hsla(120, 100%, 50%, 0.3); /* Semi-transparent green */
}
3. oklch() 和 oklab()
oklch() 和 oklab() 是 CSS 顏色函式的最新成員。它們基於 CIELAB 色彩空間，該色彩空間旨在實現感知上的統一。這意味著顏色值的變化更接近人眼感知到的變化。
現在，具體來說：
-
oklab()用於在感知統一空間中定義顏色。 -
oklch()與之類似，但使用的是圓柱座標（亮度、色度和色調）。
通過這些函式，可以更準確、更直觀地操作顏色，尤其是建立平滑的顏色漸變等任務。以下是程式碼形式：
.example {
color: oklch(75%, 0.25, 250); /* A color in oklch */
background-color: oklab(0.623, 0.172, -0.079); /* A color in oklab */
}
實現高階配色方案
使用這些函式，尤其是更高階的 oklch() 和 oklab()，您可以實現複雜的色彩方案，使其在視覺上保持一致並具有吸引力。它們可以對顏色的呈現和感知方式進行更多控制，確保您的設計既美觀又易於使用。
將這些顏色函式與自定義屬性（CSS 變數）和計算等 CSS 功能相結合，就能開發出動態、靈活的顏色系統，以適應不同的主題、狀態和環境。
隨著網路標準和瀏覽器對這些功能的支援不斷變化，採用這些現代色彩功能可以顯著增強網路專案的視覺設計和使用者體驗。
文字包圍圖片
CSS shape-outside 屬性提供了一種創造性的方法，用於將文字包繞在圖片周圍，從而使佈局更有活力、視覺效果更有趣，並能實現更高階的圖片樣式。
它允許你定義一個形狀，讓內聯內容圍繞該形狀展開。這對於以非矩形形狀將文字包裹在圖片周圍非常有用，可以建立比標準矩形文字包裹更有機、更有視覺吸引力的佈局。
如何使用？
你可以定義各種形狀，如圓形、橢圓形和多邊形，甚至可以使用影象的 alpha 通道來決定形狀。
shape-outside 屬性通常適用於浮動元素。當你浮動影象並應用 shape-outside 屬性時，文字會根據定義的形狀圍繞影象展開。
下面是一個使用 shape-outside 的圓形的基本示例：
.image {
float: left;
shape-outside: circle(50%);
width: 200px;
height: 200px;
margin-right: 15px;
}
在本例中， .image 類應用於影象元素。它被浮動到左側， shape-outside: circle(50%); 建立了一個圓形，文字將圍繞該圓形展開。有效使用 shape-outside 可以為你的設計帶來新的可能性，因為它允許文字圍繞複雜的形狀流動，從而可以建立類似雜誌的佈局和視覺豐富的網頁。
CSS 混合模式
CSS 混合模式提供了一種強大的方式來混合顏色和影象，創造出獨特的視覺效果，同時還能增強設計效果。通過這些混合模式，你可以建立引人入勝的文字效果、影象疊加和複雜的背景圖案。要使用 background-blend-mode，我們先來了解一下它的作用。該屬性用於定義元素的背景圖片和顏色應如何混合在一起。例如，如果你有一張背景圖片和一種背景顏色，你可以使用不同的混合模式將它們混合在一起，如乘法、螢幕、疊加等。程式碼是這樣的：
.element {
background-image: url('image.jpg');
background-color: blue;
background-blend-mode: multiply;
}
現在，mix-blend-mode 的工作原理是將元素的內容（包括影象和文字）與其背景混合。這對於文字效果或在另一張圖片上疊加圖片特別有用。就像這樣
<
.element {
mix-blend-mode: screen;
}
常用混合模式
以下是正確使用該特效所需的幾種最常用的混合模式，供您參考：
- 疊加：將混合圖層和基礎圖層的顏色疊加，使顏色更暗。
- 濾色：使顏色變淺，與乘法相反。它適用於製作淺色效果。
- 疊層：結合了疊加和濾色混合模式。圖片的亮部變亮，暗部變暗。
- 變暗和變亮：分別選擇較暗或較亮的顏色。
- 色彩減淡和色彩加深：使基色變淺或變深，以反映混合色。
- 差異和排除：用於建立更具藝術性的反轉色彩效果。
適應使用者偏好
在網頁設計中適應使用者偏好是建立無障礙和使用者友好型網站的一個重要方面。在這一過程中，針對偏好（如 prefers-color-scheme 和 prefers-reduced-motion ）的 CSS 媒體查詢發揮著重要作用。
讓我們來探討一下這些概念。
prefers-color-scheme
該媒體查詢用於檢測使用者是否要求系統使用淺色或深色主題。這是一種在網站設計中實現深色模式的便捷方法。
您可以使用 prefers-color-scheme 為淺色和深色模式指定不同的樣式。
例如：
/* Default light mode styles */
body {
background-color: white;
color: black;
}
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
在此程式碼段中，預設樣式適用於淺色模式，而 @media 查詢中的樣式則適用於使用者偏好深色方案的情況。
prefers-reduced-motion
該媒體查詢用於檢測使用者是否要求系統儘量減少動畫或動作的使用量。這對於暈動病或前庭失調的使用者來說至關重要。
您可以使用 prefers-reduced-motion 來減少或移除動畫和過渡效果：
/* Standard animations */
.animate {
transition: transform 0.3s ease;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.animate {
transition: none;
}
}
在這裡，你會看到當使用者表示偏好減少動作時，動畫就會被禁用。
在 CSS 中加入 prefers-color-scheme 和 prefers-reduced-motion 是向更具包容性和使用者友好型網路邁出的一步，可確保具有不同需求和偏好的廣大使用者都能輕鬆訪問網站。
使用 :is() 和 :where() 偽選擇器
CSS 中的 :is() 和 :where() 偽選擇器是管理特異性和簡化複雜選擇器鏈的高階工具。讓我們來探索它們的工作原理，並看看一些實際例子。
:is() 偽選擇器
該選擇器允許你用一條規則針對多個元素，並減少了類似選擇器的重複。 :is() 偽類的特異性是其引數中最特異的選擇器的特異性。
/* Selects any paragraph or heading inside an article */
article :is(h1, h2, h3, p) {
color: blue;
}
:where() 偽選擇器
它與 :is() 類似，但有一個主要區別： :where() 的特異性總是為零。這使得它可以在不增加特異性的情況下覆蓋樣式。在使用中，它可能看起來像這樣：
/* Selects any paragraph or heading, but with no added specificity */
:where(article, section) p {
margin-bottom: 1em;
}
使用 :is() 和 :where() 可以製作出更靈活、更易維護的樣式表，尤其是在處理複雜設計時。例如，如果您需要，這些偽選擇器可能會很有用：
- 簡化巢狀選擇器：它們可以簡化深度巢狀的選擇器或分組選擇器，使 CSS 更易讀、更易維護。
- 覆蓋樣式：
:where()是建立基礎樣式的絕佳工具，可以輕鬆覆蓋，而不必擔心樣式的特殊性。 - 重複使用樣式：這兩種偽選擇器都允許使用更多模組化和可重用的樣式，因為你可以在一條規則下組合各種元素。
在實際應用中，可以想象一個包含不同部分的導航選單。您可以使用 :is() 對選單中的所有連結（無論其巢狀級別如何）統一樣式，如下所示：
nav :is(ul, ol, div) > li > a {
padding: 10px;
color: white;
}
小結
從讓使用者介面栩栩如生的優雅 CSS 過渡到強大的 3D 變換，希望你現在已經對 2024 年及以後可用的一些更高階 CSS 技術有了更好的瞭解。
本指南闡明瞭這些高階技術，並強調了它們在製作反應靈敏、使用者友好、視覺效果吸引人的網頁設計中的重要性。無論你決定使用哪種技術，都要記住在所有工作中優先考慮可訪問性和 CSS 效能。
你目前使用過這些高階 CSS 技術嗎？有推薦他人嘗試的建議嗎？請隨時告訴我們。
評論留言