嗨，各位 UI 開發者！你準備好將你的 CSS 技能提升到下一個層次了嗎？不論你是經驗豐富的專業人士，還是剛入門的小白，我們都會面臨樣式表似乎有自己意志的情況。可別擔心！我有一些實用的 CSS 小技巧，可以讓你的工作變得更加輕鬆，並使你的設計更具吸引力。

在這篇文章中，我們將探討 10 個令人驚嘆的 CSS 小技巧，這些技巧將幫助你解決常見的設計挑戰，改善你的工作流程，並為你的項目增添一些額外的亮點。這些可不只是隨便的技巧，它們都是實用且強大的，非常適合像我們這樣想要創造驚人網頁體驗的 UI 開發者。

所以，拿起你最愛的飲料，舒適地坐下，讓我們一起深入 CSS 小技巧的世界吧！

1. CSS 變數的魔力

什麼是 CSS 變數？

我們的 CSS 小技巧名單上的第一項是使用 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 雖然不完全是黑科技，但它是如此強大的工具以至於值得在這個名單上佔有一席之地。如果你還沒有使用 Flexbox，那你就錯過了創建佈局最靈活高效的方法之一。

主要 Flexbox 屬性

• display: flex; - 將一個元素變成 flex 容器
• flex-direction - 控制 flex 項目的方向
• 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 Grid 革命

Grid 與 Flexbox

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

基本 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 技巧

你可以利用命名的網格區域來發揮更多創意：

.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 轉場允許你在給定的時間內平滑地改變屬性值。它們是一種為你的 UI 元素添加微妙動畫的好方法，無需 JavaScript。

基本轉場語法

轉場的基本語法為：

.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

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: "第 " counter(section) " 節： ";
}

這會自動為你的 h2 元素編號，顯示為 "第 1 節："、"第 2 節：" 等等。

嵌套計數器

你甚至可以為子節點創建嵌套計數器：

body {
  counter-reset: section;
}

h2 {
  counter-reset: subsection;
}

h2::before {
  counter-increment: section;
  content: "第 " 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！

工具提示是一種提供額外資訊而不雜亂你的 UI 的好方法。哇！你可以僅用 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">滑鼠懸停在我上面
  <span class="tooltiptext">工具提示文字</span>
</div>

這會創建一個當你懸停在文本上時出現的工具提示，並且有平滑的淡入效果。

10. 僅用 CSS 的手風琴

無需 JavaScript 的可擴展內容

我們的最後一個 CSS 小技巧是一個不需要任何 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">第 1 節</label>
    <div class="accordion-content">
      <p>第 1 節的內容...</p>
    </div>
  </div>
  <!-- 重複更多手風琴項目 -->
</div>

這創建了一個可擴展的手風琴，完全使用 CSS 實現，無需 JavaScript！

結論：精通 CSS 小技巧

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