10 個不錯的 CSS 小技巧
點(diǎn)擊上方?前端瓶子君，關(guān)注公眾號
回復(fù)算法，加入前端編程面試算法每日一題群
CSS 大約有兩百個屬性。很多屬性都是相互關(guān)聯(lián)的，理清楚每一個屬性細(xì)節(jié)是不可能的。所以，本文分享一些有用的 CSS 小技巧，方便開發(fā)者和設(shè)計師參考。
1. 打字效果
網(wǎng)頁設(shè)計變得越來越有創(chuàng)意。在 CSS 動畫的協(xié)調(diào)下，你的網(wǎng)頁會像活的一樣。在這個例子中，我們將使用 animation 和 @keyframes 屬性去實(shí)現(xiàn)打字效果。
具體來說，在這個演示中，我們通過 steps() 屬性來實(shí)現(xiàn)分割文本的效果。首先，你必須指定 step() 中傳入的數(shù)量，在這個例子中就是文本的長度。
接著，第二步，我們使用 @keyframes 去聲明什么時候開始執(zhí)行動畫。
如果你在文本
Typing effect for text后面添加內(nèi)容，而不改變step()中的數(shù)字，將不會產(chǎn)生這種效果。
這種效果并不是特別新鮮。然而，很多開發(fā)者卻使用 JavaScript 庫去實(shí)現(xiàn)，而不是使用 CSS。
代碼片段
2. 透明圖片陰影效果
你是否使用過 box-shadow 為透明的圖片添加陰影，卻讓其看起來像添加了一個邊框一樣？然而解決方案是使用 drop-shadow。
drop-shadow 的工作方式是，其遵循給給定圖片的 Alpha 通道。因此陰影是基于圖片的內(nèi)部形狀，而不是顯示在圖片外面。
代碼片段
3. 自定義 Cursor
你不需要強(qiáng)迫你站點(diǎn)訪問者使用獨(dú)特的光標(biāo)。至少，不是出于用戶體驗(yàn)的目的。不過，關(guān)于 cursor 屬性要說明的是，它可以讓你展示圖片，這相當(dāng)于以照片的格式顯示提示信息。
一些用戶案例，包括比較兩個不同的照片，你無需在視圖窗口渲染這些照片。比如：cursor 屬性可以用在你的設(shè)計中，節(jié)省空間。因?yàn)槟憧梢栽谔囟ǖ?div 元素中鎖定特定的光標(biāo)，所以在此 div 這外可以無效。
目前嘗試對圖片的大小有限制，讀者可以自行更改驗(yàn)證
代碼片段
4. 使用 attr() 展示 tooltip
attr() 屬性是我最近發(fā)現(xiàn)的，且是最得意的發(fā)現(xiàn)。我本打算為我的站點(diǎn)添加 tooltip 的功能，但是發(fā)現(xiàn)需要引入一個插件，這就引入了不必要的東西，讓我的站點(diǎn)看起來臃腫。感謝的是，可以使用 attr() 來避免這種情況。
attr() 屬性工作的方式很簡單，我逐步解析一下：
我們使用 tooltip class去標(biāo)志哪個元素需要展示tooltip信息。然后為該元素添加你喜歡的樣式，這個方便演示，我們使用了dotted border-bottom的樣式。接下來，我們創(chuàng)建一個 :before偽元素，它將包含內(nèi)容content，指向特定的attr()。這里指attr(tooltip-data)。接著，我們會創(chuàng)建一個 :hover偽類，當(dāng)用戶鼠標(biāo)移動道元素上時，它將設(shè)置opacity為1。
此外，你可以包含自定義的樣式。這取決于你設(shè)定的 tooltp 的數(shù)據(jù)，你也許需要調(diào)整其寬度或者邊距。一旦你設(shè)定了 tooptip-data arrt() 類，你可以在你設(shè)計的其他部分應(yīng)用。代碼片段
5. 純 CSS 實(shí)現(xiàn)核算清單
正如我開頭所說的，CSS 正逐步成熟。這個動態(tài)清單的演示就是一個很好的例子。
我們使用 checkbox 輸入類型，加上一個 :checked 偽類。當(dāng) :checked 返回 true 的情況時，我們使用 transform 屬性更改狀態(tài)。
你可以使用這種方法實(shí)現(xiàn)各種目標(biāo)。比如，當(dāng)用戶點(diǎn)點(diǎn)擊指定的復(fù)選框時候，切花到隱藏其內(nèi)容。在輸入 input 類型的單選和復(fù)選框使用，當(dāng)然，這也可以應(yīng)用到 和 元素。
代碼片段
6. 使用 :is() 和 :where() 添加元素樣式
現(xiàn)代 CSS 框架運(yùn)行的一種方式是通過使用條件邏輯選擇器。換言之，:is() 和 :where() 屬性可以用于同時設(shè)置多種設(shè)計元素的樣式。但是，更重要的是，你可以使用這些屬性去查詢你需單獨(dú)處理的元素。
下面的 CSS 片段是一個小案例，你可以通過 MDN 學(xué)習(xí)更多關(guān)于 :is() 和 :where() 的內(nèi)容。
代碼片段
7. 使用關(guān)鍵幀實(shí)現(xiàn)手風(fēng)琴下拉效果
JavaScript 庫，比如 jQuery, Cash 等，即使你想使用一個簡單的縮放功能，你都要整個引入。幸運(yùn)的是，很多 CSS 技巧能夠避免這種引入。比如下面的手風(fēng)琴片段代碼。
如果你認(rèn)真看下當(dāng)下 web 設(shè)計的趨勢，你會發(fā)現(xiàn)在登陸頁面就會發(fā)現(xiàn)手風(fēng)琴這種設(shè)計效果。這是一種簡縮內(nèi)容的方式，以節(jié)省設(shè)計空間。常見問題解答，產(chǎn)品功能，使用提示等功能，都可以放在手風(fēng)琴內(nèi)實(shí)現(xiàn)。下面是純 CSS 代碼片段對其的實(shí)踐。
代碼片段
8. 側(cè)邊欄的 Hover 效果
有沒有可以使用 CSS 就可以實(shí)現(xiàn)一個動態(tài) Hover 效果的側(cè)邊欄呢？當(dāng)然，這得多虧 transform 和 :hover 屬性。
為了兼容性，我在多種移動端中進(jìn)行測試，感覺還不錯。雖然這種效果在桌面中使用比在移動端中使用順暢。
在這個練習(xí)案例中，使用 position: sticky; 創(chuàng)建一個吸附的側(cè)邊欄，其工作的效果良好。
代碼片段
9. 使用 first-letter 實(shí)現(xiàn)首字母大寫
在 CSS 中，可以選擇確定的 first-of-type 元素。在這個例子中，我們使用 ::first-letter 偽類去實(shí)現(xiàn)首字母大寫的效果。這個類可以讓我們更自由的添加樣式。所以，你可以調(diào)整大寫字母的樣式以符合你的站點(diǎn)設(shè)計風(fēng)格。
說到這個屬性，你可以使用它干很多事。當(dāng)特定元素在頁面中第一次出現(xiàn)，我們可以使用 first-of-type 單獨(dú)進(jìn)行添加樣式。但是，正如下面代碼展示，盡管元素已經(jīng)出現(xiàn)過，你依然可以使用在多個元素上。
代碼片段
10. 使用 ::before 添加按鈕的圖標(biāo)
每當(dāng)我需要鏈接到外部其他資源的時候，我都會使用自定義的按鈕來實(shí)現(xiàn)。準(zhǔn)確來說，是一個添加圖標(biāo)的按鈕。簡單的谷歌搜索，你會發(fā)現(xiàn)很多 button generators ，但是我對可以隨時使用的通用解決方案更感興趣。
所以，為了實(shí)現(xiàn)這個目標(biāo)，我為特定按鈕創(chuàng)建了一個 :before 偽元素。需要聲明的是，代碼片段中的 content:"\0000a0"; 是 的 Unicode 轉(zhuǎn)義。
你可以通過寬高屬性來調(diào)整圖標(biāo)的尺寸，以更好適應(yīng)按鈕樣式。
代碼片段
最重要的一點(diǎn)，這些 CSS 技巧凸顯了不使用 JavaScript 來實(shí)現(xiàn)功能的潛力。你可以使用上面這些小技巧，應(yīng)用在你的設(shè)計上。事實(shí)上，很多這樣的例子可以混合使用，以創(chuàng)作自由風(fēng)格的設(shè)計。
當(dāng)然，這還需要更大的進(jìn)步空間。我不建議單純的這些小技巧就低估了框架和庫的使用。。
但是，不需要寫冗長的 JavaScript 函數(shù)，通過 CSS 來實(shí)現(xiàn)設(shè)計的效果正走在路上。
原文：10 Useful CSS Tricks for Front-end Developers[2]
【完】?
關(guān)于本文
作者：Jimmy
https://juejin.cn/post/7089997204252786702