寫CSS的常用套路（下篇）...

點擊觀看——我寫CSS的常用套路（上篇）...

box-shadow

為盒子添加陰影，增加盒子的立體感，可以多層疊加，并且會使陰影更加絲滑

本demo地址：Pagination

內(nèi)發(fā)光

注意到box-shadow還有個inset，用于盒子內(nèi)部發(fā)光

利用這個特性我們可以在盒子內(nèi)部的某個范圍內(nèi)設(shè)定顏色，做出一個新月形

再加點動畫和濾鏡效果，“猩紅之月”閃亮登場！

注意到它散發(fā)著淡淡的紅光，其實就是2個偽元素應(yīng)用了模糊濾鏡所產(chǎn)生的效果

本demo地址：Crimson Crescent Loading

text-shadow

文本陰影，本質(zhì)上和box-shadow相同，只不過是相對于文本而言，常用于文本發(fā)光，也可通過多層疊加來制作霓虹文本和偽3D文本等效果

發(fā)光文本

本demo地址：Staggered GlowIn Text

霓虹文本

本demo地址：Neon Text

偽3D文本

本demo地址：Staggered Bouncing 3D Loading

background-clip:text

能將背景裁剪成文字的前景色，常用來和color: transparent配合生成漸變文本

本demo地址：Menu Hover Fill Text

gradient

漸變可以作為背景圖片的一種，具有很強的色彩效果，甚至可以用來模擬光

linear-gradient

線性漸變是筆者最常用的漸變

這個作品用到了HTML的dialog標(biāo)簽，線性漸變背景，動畫以及overflow障眼法，細心的你看出來了嗎:)

本demo地址：Confirm Modal

radial-gradient

徑向漸變常用于生成圓形背景，上面例子中Snow的背景就是一個橢圓形的徑向漸變

此外，由于背景可以疊加，我們可以疊加多個不同位置大小的徑向漸變來生成圓點群，再加上動畫就產(chǎn)生了一種微粒效果，無需多余的div元素

本demo地址：Particle Button

conic-gradient

圓錐漸變可以用于制作餅圖

用一個偽元素疊在餅圖上面，并將content設(shè)為某個值（這個值通過CSS變量計算出來），就能制作出度量計的效果，障眼法又一次完成了它的使命

本demo地址：Gauge (No SVG)

filter

PS里的濾鏡，blur最常用

融合效果

當(dāng)blur濾鏡和contrast濾鏡一起使用時，會產(chǎn)生一種融合（gooey）的奇特效果

本demo地址：Snow Scratch

backdrop-filter

對背景應(yīng)用濾鏡，產(chǎn)生毛玻璃的效果

本demo地址：Frosted Glass

mix-blend-mode

PS里的混合模式，常用于文本在背景下的特殊效果

以下利用濾色模式（screen）實現(xiàn)文本視頻蒙版效果

本demo地址：Video Mask Text

clip-path

PS里的裁切，可以制作各種不規(guī)則形狀。如果和動畫結(jié)合也會相當(dāng)有意思

本demo地址：Name Card Hover Expand

故障效果

由于clip-path有裁切功能，因此可以將多個文字疊在一起，并按比例裁切成多分，再應(yīng)用交錯動畫，就能制作出酷炫的故障效果（glitch）。

本demo地址：Cross Bar Glitch Text

mask

PS里的遮罩。所謂遮罩，就是原始圖片只顯示遮罩圖片非透明的部分

鏤空效果

雖然clip-path能裁切出形狀，但它無法鏤空，因為形狀的里面它管不著

可能有人（包括我）會用偽元素來“模擬”鏤空（通過設(shè)置同樣的背景色），但這樣并非真的鏤空，換了個背景或浮在圖片上就會暴露出來，這時我們就要求助于遮罩了

假設(shè)，你想制作一個空心的圓環(huán)，那么你只需將一個徑向漸變作為元素的遮罩，并且第一個color-stop設(shè)置為透明，其他的color-stop設(shè)置為其他顏色即可，因為遮罩的定義就是只顯示遮罩圖片非透明的部分

注意：為了消除鋸齒，這個徑向漸變的中間需要有一個額外的color-stop用于緩沖，長度設(shè)置為原長度加0.5px即可

本demo地址：Circle Arrow Nav

-webkit-box-reflect

投影效果，不怎么常用，適合立體感強的作品

本demo地址：Card Flip Reflection

web animations

雖然這并不是一個CSS特性，但是它經(jīng)常用于完成那些CSS所做不到的事情

那么何時用它呢？當(dāng)CSS動畫中有屬性無法從CSS中獲取時，自然就會使用到它了

跟蹤鼠標(biāo)的位置

目前CSS還尚未有獲取鼠標(biāo)位置的API，因此考慮用JS來進行

通過查閱相關(guān)的DOM API，發(fā)現(xiàn)在監(jiān)聽鼠標(biāo)事件的API中，可通過e.clientX和e.clientY來獲得鼠標(biāo)當(dāng)前的位置

既然能夠獲取鼠標(biāo)的位置，那么跟蹤鼠標(biāo)的位置也就不是什么難事了：通過監(jiān)聽mouseenter和mouseleave事件，來獲取鼠標(biāo)出入一個元素時的位置，并用此坐標(biāo)來當(dāng)作鼠標(biāo)的位移距離，監(jiān)聽mousemove事件，來獲取鼠標(biāo)在元素上移動時的位置，同樣地用此坐標(biāo)來當(dāng)作鼠標(biāo)的位移距離，這樣一個跟蹤鼠標(biāo)的效果就實現(xiàn)了

本demo地址：Menu Hover Image

CSS Houdini

CSS Houdini是CSS的底層API，它使我們能夠通過這套接口來擴展CSS的功能

讓漸變動起來

目前來說，我們無法直接給漸變添加動畫，因為瀏覽器不理解要改變的值是什么類型

這時，我們就可以利用CSS.registerProperty()來注冊我們的自定義變量，并聲明其語法類型（syntax）為顏色類型<color>，這樣瀏覽器就能理解并對顏色應(yīng)用插值方法來進行動畫

還記得上文提到的圓錐漸變conic-gradient()嗎？既然它可以用來制作餅圖，那么我們能不能讓餅圖動起來呢？答案是肯定的，定義三個變量：--color1、--color2和--pos，其中--pos的語法類型為長度百分比<length-percentage>，將其從0變?yōu)?00%，餅圖就會順時針旋轉(zhuǎn)出現(xiàn)

利用絕對定位和層疊上下文，我們可以疊加多個從小到大的餅圖，再給它們設(shè)置不同的顏色，應(yīng)用交錯動畫，就有了下面這個炫麗的效果

本demo地址：Mawaru

彩蛋

將交錯動畫和偽類偽元素結(jié)合起來寫出來的慎重勇者風(fēng)格的菜單

本demo地址：Shinchou Menu

家好，我是大澈！

本文約 700+ 字，整篇閱讀約需 1 分鐘。

每日分享一段優(yōu)質(zhì)代碼片段。

今天分享一段 CSS 代碼片段，使用 CSS 設(shè)置網(wǎng)頁全屏背景圖片，很簡單。

老規(guī)矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評論區(qū)留下你的見解！

html {
background: url('images/bg.jpg') no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover; /* 適用于舊版 WebKit 瀏覽器 */
-moz-background-size: cover; /* 適用于舊版 Firefox 瀏覽器 */
-o-background-size: cover; /* 適用于舊版 Opera 瀏覽器 */
}

分享原因

這段代碼展示了如何使用 CSS 設(shè)置網(wǎng)頁全屏背景圖片，使其在不同瀏覽器中都能完美適應(yīng)屏幕尺寸。

這對于創(chuàng)建具有視覺吸引力且兼容性良好的網(wǎng)頁非常重要。

代碼解析

1. background: url('images/bg.jpg') no-repeat center center fixed;

background：簡寫屬性，用于設(shè)置所有背景屬性。

url('images/bg.jpg')：指定背景圖像的路徑。

no-repeat：背景圖像不重復(fù)顯示。

center center：背景圖像在水平方向和垂直方向都居中顯示。

fixed：背景圖像固定在視口中，即使頁面滾動，背景圖像也不會移動。

2. background-size: cover;

background-size: cover：使背景圖像按比例縮放，以完全覆蓋背景區(qū)域。這意味著圖像可能會被裁剪以適應(yīng)容器。

3. 瀏覽器前綴的使用

-webkit-background-size：適用于舊版 WebKit 瀏覽器（如舊版 Safari 和 Chrome）。

-moz-background-size：適用于舊版 Firefox 瀏覽器。

-o-background-size：適用于舊版 Opera 瀏覽器。

這些瀏覽器前綴用于處理舊版瀏覽器的兼容性問題。雖然現(xiàn)代瀏覽器大多已經(jīng)支持標(biāo)準(zhǔn)的 background-size 屬性，但在代碼中加入這些前綴可以確保在老舊瀏覽器中也能正常顯示背景圖片。

- end -

用JavaScript訪問OS剪貼板已經(jīng)有幾年了，往往使用的都是document.execCommand()，不幸的是，存在一些問題：

• 剪貼板訪問是同步的，這會對性能和安全性產(chǎn)生影響
• 支持不完整，尤其是在macOS和iOS上的Safari較舊版本上
• 權(quán)限訪問因瀏覽器而異，并且該API永遠不會被認(rèn)為是優(yōu)雅的

最終，它已被新的異步Clipboard API取代。雖然目前還沒有被所有瀏覽器所支持，但是更易于使用和更強大。

為什么應(yīng)用程序需要訪問剪貼板？

作為開發(fā)人員，您將了解剪貼板的工作原理，并定期使用以下鍵盤快捷鍵：

• Ctrl | Cmd+C 復(fù)制
• Ctrl | Cmd+X 剪切
• Ctrl | Cmd+V 粘貼

在編程中您可能需要訪問操作板，來完成你的業(yè)務(wù)邏輯，包括在剪貼板操作完成（例如添加或刪除格式）后修改內(nèi)容。

剪貼板訪問很危險！

以編程方式訪問剪貼板會引發(fā)一些安全問題：

• 用戶經(jīng)常復(fù)制密碼或私人信息，因此任何頁面都不能隨意讀取剪貼板數(shù)據(jù)。
• 將數(shù)據(jù)添加到剪貼板時，應(yīng)限制頁面。惡意頁面可能會用危險命令甚至可執(zhí)行文件替換復(fù)制的文本。

為避免潛在的問題，剪貼板API僅可用于通過HTTPS服務(wù)的頁面（localhost也是允許的）。在iframe中運行時，父頁面還必須授予clipboard-read和/或clipboard-write許可：

該API僅可用于活動的瀏覽器選項卡（不適用于背景選項卡），并且只能通過用戶交互（例如單擊）來觸發(fā)。必要時，將提示用戶讀取剪貼板數(shù)據(jù)的權(quán)限：

當(dāng)頁面首次請求剪貼板訪問權(quán)限時顯示此警報。鑒于API是異步的并返回Promise，因此不會造成任何問題。也可以使用Permissions API檢查和請求狀態(tài)。

剪貼板API功能檢測

當(dāng)navigator.clipboard返回真實結(jié)果時，說明剪貼板API可用。例如：

但是，這不能保證瀏覽器支持所有功能，因此有必要進行進一步檢查。例如，在撰寫本文時，Chrome支持API的readText()方法，而Firefox不支持。

復(fù)制和粘貼文字

在大多數(shù)應(yīng)用程序中，復(fù)制和粘貼文本將是一個有用的選項。該API非常簡單：

您將需要更多的代碼來檢測支持并處理錯誤……

代碼示例

剪貼板API的readText()和writeText()是更通用read()和write()方法的便捷選項，但他們無法操作二級制數(shù)據(jù)，而read()和write()能夠復(fù)制和粘貼任何類型的數(shù)據(jù)，例如二進制圖像。

復(fù)制需要通常由fetch() or canvas.toBlob()方法返回的Blob數(shù)據(jù)，這被傳遞給ClipboardItem構(gòu)造函數(shù)，因此可以將其寫入剪貼板：

粘貼更加復(fù)雜，因為ClipboardItem可以使用不同的內(nèi)容類型返回多個對象。因此，有必要遍歷每種類型，直到找到有用的格式為止。例如：

剪切，復(fù)制和粘貼事件

大多數(shù)瀏覽器都支持此剪貼板事件，并且處理程序函數(shù)可以使用作為參數(shù)傳遞的clipboardData對象，來攔截事件以進行更改。

以下函數(shù)將所有剪切或復(fù)制的文本強制為大寫。請注意，將e.preventDefault()停止將覆蓋它的默認(rèn)剪切/復(fù)制操作：

以下代碼將粘貼處理程序附加到特定<textarea>字段，該函數(shù)清除現(xiàn)有內(nèi)容并為文本加上前綴"pasted:"：

準(zhǔn)備使用？

Clipboard API是新的，但具有合理的瀏覽器支持，并且感覺比舊document.execCommand()選項更健壯，趕快試試吧！