簡介：提升您的 CSS 遊戲水平

嘿，UI 開發人員朋友們！您準備好將您的 CSS 技能提升到新的水平了嗎？無論您是經驗豐富的專業人士還是剛起步，我們都曾經遇到過樣式表似乎有自己的想法的時刻。但不要害怕！我有一些漂亮的 CSS 技巧，它們一定會讓您的生活更輕鬆，讓您的設計更令人印象深刻。

在這篇文章中，我們將探索 10 個很棒的 CSS 技巧，它們將幫助您解決常見的設計挑戰，改進您的工作流程，並為您的專案增添一些額外的魅力。這些不僅僅是任何舊技巧 - 它們實用、強大，並且非常適合像我們這樣想要建立令人驚嘆的 Web 體驗的 UI 開發人員。

所以，拿起你最喜歡的飲料，放鬆一下，讓我們進入 CSS hack 的世界吧！

1. CSS 變數的魔力

什麼是 CSS 變數？

我們的 CSS hack 清單中的第一個是 CSS 變數的使用，也稱為 CSS 自訂屬性。如果您還沒有開始使用這些，那麼您將大飽口福！

CSS 變數可讓您儲存特定值並在整個樣式表中重複使用它們。當您使用顏色、字體或您發現自己經常重複的任何值時，這尤其有用。

如何使用 CSS 變數

以下是如何設定和使用 CSS 變數的快速範例：

:root {
  --main-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

.button {
  background-color: var(--main-color);
  font-size: var(--font-size);
}

.header {
  color: var(--secondary-color);
}

好處

• 易於更新：在一個地方更改值，它會隨處更新。

• 提高可讀性：使您的 CSS 更加語義化且更易於理解。

• 支援主題：非常適合建立明暗模式或多種配色方案。

2. ::before 和 ::after 偽元素的威力

理解偽元素

我們的 CSS 駭客工具庫中的下一個是::before和::after偽元素。這些小寶石可讓您為元素加入內容，而無需加入額外的 HTML 標記。

實際用途

您可以使用這些偽元素來實現各種很酷的效果：

• 加入裝飾元素

• 建立類似工具提示的資訊氣泡

• 動態生成內容

• 建立複雜的佈局

範例：建立報價區塊

以下是一個簡單的範例，說明如何使用::before和::after建立時尚的引用區塊：

blockquote {
  position: relative;
  padding: 20px;
  background: #f9f9f9;
}

blockquote::before,
blockquote::after {
  content: '"';
  font-size: 50px;
  position: absolute;
  color: #ccc;
}

blockquote::before {
  top: 0;
  left: 10px;
}

blockquote::after {
  bottom: -20px;
  right: 10px;
}

3. Flexbox：你的版面最好的朋友

Flexbox 的彈性

Flexbox 並不完全是一個 hack，但它是一個非常強大的工具，值得在此列表中佔有一席之地。如果您還沒有使用 Flexbox，那麼您就錯過了在 CSS 中建立佈局的最靈活、最有效的方法之一。

關鍵 Flexbox 屬性

• display: flex; - 將元素變成彈性容器

• flex-direction - 控制彈性專案的方向

• justify-content - 沿著主軸對齊專案

• align-items - 沿橫軸對齊專案

簡單的 Flexbox 佈局

以下是如何使用 Flexbox 建立響應式佈局的簡單範例：

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.item {
  flex: 0 1 calc(33.333% - 20px);
  margin: 10px;
}

@media (max-width: 768px) {
  .item {
    flex: 0 1 calc(50% - 20px);
  }
}

@media (max-width: 480px) {
  .item {
    flex: 0 1 100%;
  }
}

這將建立一個靈活的網格，隨著螢幕尺寸的減小，網格可以從三列調整為兩列，然後調整為一列。

4. CSS 網格革命

網格與 Flexbox

雖然 Flexbox 非常適合一維佈局，但 CSS Grid 透過二維佈局將其提升到了一個新的水平。它非常適合輕鬆建立複雜的頁面結構。

基本網格設置

以下是設定簡單網格的方法：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

先進的網格技術

透過使用命名網格區域，您可以真正發揮網格的創意：

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-gap: 20px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

這將建立一個包含頁眉、側邊欄、主要內容區域和頁腳的佈局，所有這些都只需幾行 CSS！

5. 掌握 CSS 過渡

平滑移動與過渡

CSS 過渡可讓您在給定的持續時間內平滑地變更屬性值。它們是無需 JavaScript 即可為 UI 元素加入微妙動畫的好方法。

基本轉換語法

轉換的基本語法是：

.element {
  transition: property duration timing-function delay;
}

實例：按鈕懸停效果

讓我們建立一個簡單的按鈕，懸停時顏色會平滑變化：

.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #2980b9;
}

這將建立一個按鈕，當您將滑鼠懸停在其上方時，該按鈕會平滑地改變顏色，從而為用戶提供良好的視覺回饋。

6. CSS 形狀的魔力

打破常規

CSS 形狀可讓您建立非矩形佈局，這可以為您的設計加入獨特且有趣的外觀。

使用外部形狀

shape-outside屬性定義內嵌內容應環繞的形狀。這是一個例子：

.circle-shape {
  width: 200px;
  height: 200px;
  float: left;
  shape-outside: circle(50%);
  clip-path: circle(50%);
  background: #3498db;
}

這會建立一個文字將圍繞的圓形形狀，從而建立一個視覺上有趣的佈局。

將形狀與影像結合

您也可以將shape-outside與圖像一起使用來建立更複雜的形狀：

.image-shape {
  float: left;
  shape-outside: url('path-to-your-image.png');
}

這使得文字可以圍繞圖像的輪廓流動，從而建立文字和視覺效果的無縫整合。

7. CSS 計數器的威力

使用 CSS 自動編號

CSS 計數器就像 CSS 維護的變數，其值可以透過 CSS 規則遞增。它們非常適合建立編號清單或部分，而不需要額外的標記。

設定計數器

以下是設定和使用計數器的方法：

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

這將自動使用「Section 1:」、「Section 2:」等對h2元素進行編號。

嵌套計數器

您甚至可以為子部分建立巢狀計數器：

body {
  counter-reset: section;
}

h2 {
  counter-reset: subsection;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

h3::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

這將為您的節和小節建立一個編號系統，例如“1.1”、“1.2”、“2.1”等。

8. 使用 CSS 自訂捲軸

捲軸樣式

您知道可以使用 CSS 設定捲軸樣式嗎？雖然這並不適用於所有瀏覽器，但它可以在支援的瀏覽器中為您的設計增添一抹亮色。

Webkit 捲軸樣式

以下是如何在 webkit 瀏覽器中設定捲軸樣式的範例：

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

這將建立一個帶有灰色拇指的自訂滾動條，該滾動條在懸停時會變暗。

跨瀏覽器滾動條樣式

對於跨瀏覽器相容的解決方案，您可以使用新的scrollbar-color和scrollbar-width屬性：

* {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

這會在支援這些屬性的瀏覽器中設定一個帶有灰色拇指和淺灰色軌道的細滾動條。

9.純 CSS 工具提示

無需 JavaScript！

工具提示是提供附加資訊而又不會使用戶介面混亂的好方法。你猜怎麼著？您只需使用 CSS 即可建立它們！

基本 CSS 工具提示

這是一個簡單的純 CSS 工具提示：

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

要使用它，您可以像這樣建立 HTML：

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

這會建立一個工具提示，當您將滑鼠懸停在文字上時會出現該工具提示，並具有平滑的淡入效果。

10.純 CSS 手風琴

無需 JavaScript 即可擴充內容

我們最終的 CSS hack 是一個漂亮的手風琴效果，不需要任何 JavaScript。這對於常見問題解答部分或您想要展開和折疊的任何內容非常有用。

僅限 CSS 的手風琴

以下是創作純 CSS 手風琴的方法：

.accordion {
  max-width: 500px;
  margin: 0 auto;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
}

.accordion-header {
  display: block;
  padding: 15px;
  background-color: #f4f4f4;
  color: #333;
  text-decoration: none;
  position: relative;
  cursor: pointer;
}

.accordion-header::after {
  content: '+';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.accordion-item input[type="checkbox"] {
  display: none;
}

.accordion-item input[type="checkbox"]:checked ~ .accordion-content {
  max-height: 1000px;
}

.accordion-item input[type="checkbox"]:checked ~ .accordion-header::after {
  content: '-';
}

HTML 結構如下：

<div class="accordion">
  <div class="accordion-item">
    <input type="checkbox" id="item1">
    <label class="accordion-header" for="item1">Section 1</label>
    <div class="accordion-content">
      <p>Content for section 1...</p>
    </div>
  </div>
  <!-- Repeat for more accordion items -->
</div>

這將建立一個可擴展的手風琴，它純粹使用 CSS 工作，不需要 JavaScript！

結論：掌握 CSS Hack

好了，夥計們！我們已經介紹了 10 個很棒的 CSS 技巧，它們可以真正提升您的 UI 開發水平。從 CSS 變數的靈活性到偽元素的魔力，從 Flexbox 和 Grid 等佈局大師到工具提示和手風琴等純粹 CSS 驅動的互動元素，這些技術為建立引人入勝且高效的使用者介面提供了豐富的可能性。

原文出處：https://dev.to/nnnirajn/10-css-tricks-for-ui-developers-2l5