嗨,各位 UI 開發者!你準備好將你的 CSS 技能提升到下一個層次了嗎?不論你是經驗豐富的專業人士,還是剛入門的小白,我們都會面臨樣式表似乎有自己意志的情況。可別擔心!我有一些實用的 CSS 小技巧,可以讓你的工作變得更加輕鬆,並使你的設計更具吸引力。
在這篇文章中,我們將探討 10 個令人驚嘆的 CSS 小技巧,這些技巧將幫助你解決常見的設計挑戰,改善你的工作流程,並為你的項目增添一些額外的亮點。這些可不只是隨便的技巧,它們都是實用且強大的,非常適合像我們這樣想要創造驚人網頁體驗的 UI 開發者。
所以,拿起你最愛的飲料,舒適地坐下,讓我們一起深入 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 小技巧是 ::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;
}
Flexbox 雖然不完全是黑科技,但它是如此強大的工具以至於值得在這個名單上佔有一席之地。如果你還沒有使用 Flexbox,那你就錯過了創建佈局最靈活高效的方法之一。
display: flex;
- 將一個元素變成 flex 容器flex-direction
- 控制 flex 項目的方向justify-content
- 在主軸上對齊項目align-items
- 在交叉軸上對齊項目這是一個快速範例,展示如何使用 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%;
}
}
這創建了一個靈活的網格,根據螢幕大小從三列調整為兩列,然後到一列。
雖然 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 創建一個包含標題、側邊欄、主要內容區域和頁腳的佈局。
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;
}
這創建了一個在懸停時平滑變色的按鈕,為用戶提供了良好的視覺反饋。
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');
}
這允許文本圍繞圖像的輪廓流動,創造文本與視覺的無縫整合。
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" 等的編號系統。
你知道嗎?你可以使用 CSS 美化滾動條?雖然這不適用於所有瀏覽器,但在支持的瀏覽器中,可以為你的設計增添一絲優雅。
這裡是一個在 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;
}
這會在支持這些屬性的瀏覽器中設置一個嬌小的滾動條,具有灰色的滑塊和淺灰色的滾動條背景。
工具提示是一種提供額外資訊而不雜亂你的 UI 的好方法。哇!你可以僅用 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>
這會創建一個當你懸停在文本上時出現的工具提示,並且有平滑的淡入效果。
我們的最後一個 CSS 小技巧是一個不需要任何 JavaScript 的手風琴效果。這非常適合常見問題部分或任何你想要展開和收起的內容。
這是如何創建一個僅用 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!
原文出處:https://dev.to/nnnirajn/10-css-tricks-for-ui-developers-2l5