整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
類(lèi)：同一個(gè)標(biāo)簽，根據(jù)其不同的種狀態(tài)，有不同的樣式。這就叫做“偽類(lèi)”。偽類(lèi)用冒號(hào)來(lái)表示。
比如div是屬于box類(lèi)，這一點(diǎn)很明確，就是屬于box類(lèi)。但是a屬于什么類(lèi)？不明確。因?yàn)樾枰从脩?hù)點(diǎn)擊前是什么狀態(tài)，點(diǎn)擊后是什么狀態(tài)。所以，就叫做“偽類(lèi)”。
偽類(lèi)選擇器分為兩種。
（1）靜態(tài)偽類(lèi)：只能用于超鏈接的樣式。如下：
PS：以上兩種樣式，只能用于超鏈接。
（2）動(dòng)態(tài)偽類(lèi)：針對(duì)所有標(biāo)簽都適用的樣式。如下：
a標(biāo)簽有4種偽類(lèi)（即對(duì)應(yīng)四種狀態(tài)），要求背誦。如下：
對(duì)應(yīng)的代碼如下：
```html ```
記住，在css中，這四種狀態(tài)必須按照固定的順序?qū)?/strong>：
a:link 、a:visited 、a:hover 、a:active
如果不按照順序，那么將失效。“愛(ài)恨準(zhǔn)則”：love hate。必須先愛(ài)，后恨。
看一下這四種狀態(tài)的動(dòng)圖效果：
問(wèn)：既然a{}定義了超鏈的屬性，和a:link{}定義了超鏈點(diǎn)擊之前的屬性，那這兩個(gè)有啥區(qū)別呢？
答：
a{}和a:link{}的區(qū)別：
超鏈接a標(biāo)簽在使用的時(shí)候，比較難。因?yàn)椴粌H僅要控制a這個(gè)盒子，也要控制它的偽類(lèi)。
我們一定要將a標(biāo)簽寫(xiě)在前面，將:link、:visited、:hover、:active這些偽類(lèi)寫(xiě)在后面。
針對(duì)超鏈接，我們來(lái)舉個(gè)例子：
為了實(shí)現(xiàn)上面這個(gè)效果，完整版代碼如下：
```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
```
上方代碼中，我們發(fā)現(xiàn)，當(dāng)我們?cè)诙xa:link和 a:visited這兩個(gè)偽類(lèi)的時(shí)候，如果它們的屬性相同，我們其實(shí)可以寫(xiě)在一起，用逗號(hào)隔開(kāi)就好，摘抄如下：
css .nav ul li a{ display: block; width: 120px; height: 50px; } /*兩個(gè)偽類(lèi)的屬性，可以用逗號(hào)隔開(kāi)*/ .nav ul li a:link , .nav ul li a:visited{ text-decoration: none; background-color: purple; color:white; } .nav ul li a:hover{ background-color: orange; }
如上方代碼所示，最標(biāo)準(zhǔn)的寫(xiě)法，就是把link、visited、hover這三個(gè)偽類(lèi)都要寫(xiě)。但是前端開(kāi)發(fā)工程師在大量的實(shí)踐中，發(fā)現(xiàn)不寫(xiě)link、visited也挺兼容。寫(xiě)法是：
a:link、a:visited都是可以省略的，簡(jiǎn)寫(xiě)在a標(biāo)簽里面。也就是說(shuō)，a標(biāo)簽涵蓋了link、visited的狀態(tài)（前提是都具有了相同的屬性）。寫(xiě)法如下：
```css .nav ul li a{ display: block; width: 120px; height: 50px; text-decoration: none; background-color: purple; color:white; } .nav ul li a:hover{ background-color: orange; }
```
當(dāng)然了，在寫(xiě)a:link、a:visited這兩個(gè)偽類(lèi)的時(shí)候，要么同時(shí)寫(xiě)，要么同時(shí)不寫(xiě)。如果只寫(xiě)a屬性和a:link屬性，不規(guī)范。
我們?cè)诘谝欢沃忻枋鲞^(guò)，下面這三種動(dòng)態(tài)偽類(lèi)，針對(duì)所有標(biāo)簽都適用。
我們不妨來(lái)舉下例子。
舉例1：
```html ```
效果：
數(shù)字產(chǎn)品可訪問(wèn)性是指構(gòu)建可供廣泛人群使用的數(shù)字內(nèi)容和應(yīng)用的實(shí)踐，包括具有視覺(jué)、運(yùn)動(dòng)、聽(tīng)覺(jué)、語(yǔ)言或認(rèn)知障礙的個(gè)人。
使網(wǎng)站為所有人設(shè)計(jì)，被人過(guò)度神話(huà)了，認(rèn)為那樣做既困難成本也高，但實(shí)際上并非如此。從設(shè)計(jì)初期就開(kāi)始考慮產(chǎn)品可訪問(wèn)性，其實(shí)并不會(huì)增加額外的功能或內(nèi)容，因此也不應(yīng)該會(huì)有額外的成本和努力。
但是，要修復(fù)一個(gè)已經(jīng)無(wú)法訪問(wèn)的網(wǎng)站可能就需要費(fèi)一番精力了。我以前在Carbon Health工作時(shí)，我們使用AXE 插件來(lái)檢查了網(wǎng)站的可訪問(wèn)性，我們發(fā)現(xiàn)僅在主頁(yè)上就28個(gè)違規(guī)行為需要解決。
雖然聽(tīng)起來(lái)很復(fù)雜，但我們發(fā)現(xiàn)這些問(wèn)題并不難以糾正，只是需要花費(fèi)一些時(shí)間和成本來(lái)研究這些問(wèn)題，最后差不多幾天功夫我們就全部解決了。
我想分享一些我們?cè)眠^(guò)的簡(jiǎn)單步驟，來(lái)改善你的網(wǎng)站可訪問(wèn)性。這些原則將側(cè)重于網(wǎng)站和移動(dòng)端。
在開(kāi)始之前，先來(lái)談?wù)劄槭裁醋鲞@些優(yōu)化很重要？
作為設(shè)計(jì)師，我們有能力和責(zé)任確保每個(gè)人都能訪問(wèn)我們?cè)O(shè)計(jì)的內(nèi)容，無(wú)論其能力，背景或使用場(chǎng)景如何，做好產(chǎn)品可訪問(wèn)性可以為每個(gè)人帶來(lái)更好的體驗(yàn)。
美國(guó)有超過(guò)5600萬(wàn)人（近五分之一）和全世界超過(guò)10億殘疾人。 在2017年，有814起網(wǎng)站可訪問(wèn)性訴訟在聯(lián)邦和州法院提起，僅這兩項(xiàng)數(shù)據(jù)就可以讓我們相信設(shè)計(jì)可用性的重要性。
可訪問(wèn)性還有一個(gè)很好的商業(yè)案例：研究表明，可訪問(wèn)的網(wǎng)站有更好的搜索結(jié)果，能夠覆蓋更多的受眾，對(duì)SEO友好，下載時(shí)間更快，同時(shí)還鼓勵(lì)使用更好的代碼結(jié)構(gòu)，他們也總是會(huì)有更好的可用性。
以下講到的7個(gè)方面是很容易做到，可以幫助你的產(chǎn)品更接近滿(mǎn)足Web內(nèi)容可訪問(wèn)性規(guī)范（WCAG 2.0）AA級(jí)標(biāo)準(zhǔn)。同時(shí)建議最好也去研究下最常用的輔助功能——包括屏幕閱讀器，屏幕放大器和語(yǔ)音識(shí)別工具。
對(duì)Guadalupe來(lái)說(shuō)，按鈕具有更好的色彩對(duì)比度將更易閱讀
顏色對(duì)比是一個(gè)經(jīng)常被忽視的Web可訪問(wèn)性問(wèn)題，如果對(duì)比度低，弱視的人很難從背景顏色中讀取文本。 在關(guān)于視力損傷和失明的情況說(shuō)明書(shū)中，世界衛(wèi)生組織（WHO）估計(jì)有2.17億人患有中度至重度視力障礙。因此，考慮文本和背景之間的充分對(duì)比是至關(guān)重要的。
根據(jù)W3C規(guī)定，文本與其背景之間的對(duì)比度應(yīng)該至少為4.5比1（符合AA級(jí)別）。對(duì)于較大和較重的字體，比率相對(duì)寬泛一些，因?yàn)樗鼈冊(cè)谳^低對(duì)比度下也能容易閱讀。比如：使用的字體為18pt或14pt粗體，則最小對(duì)比度將降至3比1。
有些工具可以幫你快速檢查，如果你使用的是Mac，建議使用對(duì)比應(yīng)用（https://usecontrast.com），使用此工具可以使用顏色選擇器立即檢查對(duì)比度。如果您想獲得更詳細(xì)的分?jǐn)?shù)，我建議您在WebAIM（https://webaim.org/resources/contrastchecker）顏色對(duì)比檢查器上輸入顏色值。
此工具將計(jì)算常規(guī)和較大文本，得出級(jí)別（A，AA，AAA）的分?jǐn)?shù)，你可以更改顏色值并實(shí)時(shí)查看結(jié)果。
參考資料：WCAG Visual Contrast
對(duì)René來(lái)說(shuō)，當(dāng)圖形對(duì)色盲患者友好時(shí)，他會(huì)感到很開(kāi)心！
當(dāng)你在傳達(dá)重要的事情、響應(yīng)動(dòng)作或提示時(shí)，不要把顏色作為唯一的視覺(jué)線(xiàn)索，弱視或色盲的人可能很難理解你的內(nèi)容。
嘗試使用顏色以外的符號(hào)，例如：文本標(biāo)簽或圖案。在界面上顯示錯(cuò)誤時(shí)，不要太依賴(lài)顏色，添加圖標(biāo)或在消息中寫(xiě)上一個(gè)標(biāo)題，考慮為段落中的鏈接文本添加視覺(jué)提示（如：字體加粗或增加下劃線(xiàn)），以便鏈接能突出顯示。
如果只使用顏色來(lái)區(qū)分?jǐn)?shù)據(jù)，那么具有更復(fù)雜信息(如柱狀圖和曲線(xiàn)圖)的元素就特別難閱讀。使用其他視覺(jué)元素來(lái)傳達(dá)信息，如形狀、標(biāo)簽和大小。還可以嘗試將多種模式進(jìn)行組合，以使差異更明顯。
Trello的色盲模式（https://twitter.com/trello/status/543420024166174721?lang=en）就是一個(gè)很好的例子，啟用后，通過(guò)添加紋理標(biāo)簽?zāi)茏尵W(wǎng)站變得更容易訪問(wèn)。
一個(gè)很好的技巧是將你設(shè)計(jì)的內(nèi)容以黑白模式打印出來(lái)，看看你是否仍然可以理解其中的所有內(nèi)容。你還可以使用Color Oracle（下載鏈接：http://colororacle.org）這樣的應(yīng)用，它可以實(shí)時(shí)顯示具有常見(jiàn)色覺(jué)障礙的人看到的內(nèi)容，這些提示可幫助你確保站點(diǎn)中的信息障礙與顏色無(wú)關(guān)。
參考資料：WCAG Visual Contrast Without Color
Tyler 的假手可以輕松切換按鈕焦點(diǎn)狀態(tài)
你是否注意到有時(shí)會(huì)出現(xiàn)在鏈接，輸入框和按鈕周?chē)乃{(lán)色輪廓？
這些藍(lán)色輪廓稱(chēng)為焦點(diǎn)指示符，默認(rèn)情況下，瀏覽器使用CSS偽類(lèi)在元素選中時(shí)顯示這些輪廓。你可能會(huì)發(fā)現(xiàn)這些默認(rèn)焦點(diǎn)指示符不是很漂亮，然后一門(mén)心思的想要隱藏掉它們。但是，如果你去掉了這些默認(rèn)樣式，請(qǐng)務(wù)必將其替換為其他內(nèi)容。
焦點(diǎn)指示符可幫助人們了解哪個(gè)元素具有鍵盤(pán)焦點(diǎn)，并幫助他們?cè)跒g覽站點(diǎn)時(shí)清楚自己的位置。這些都是對(duì)盲人，需要屏幕閱讀器，行動(dòng)不便，受過(guò)腕管損傷以及喜歡這種導(dǎo)航的高級(jí)用戶(hù)有用的技術(shù)。
甚至我們中的一些人，也會(huì)使用鍵盤(pán)作為他們?yōu)g覽網(wǎng)頁(yè)的主要方式！應(yīng)該可以聚焦的元素有：鏈接、表單字段、小部件、按鈕和菜單項(xiàng)，他們需要有一個(gè)焦點(diǎn)指示符，使它們看起來(lái)與周?chē)脑夭煌?/p>
你可以設(shè)計(jì)一個(gè)符合你網(wǎng)站風(fēng)格的焦點(diǎn)指示符，并與你的品牌保持風(fēng)格一致。創(chuàng)建一個(gè)高度可見(jiàn)的狀態(tài)，并具有良好的對(duì)比度，使得它從其他內(nèi)容中脫穎而出。
參考資料：W3C Focus Visible
Mr. López 不斷嘗試將占位符文本轉(zhuǎn)換為列表項(xiàng)標(biāo)簽
僅使用占位符文本作為標(biāo)簽是設(shè)計(jì)表單時(shí)最大的錯(cuò)誤之一，當(dāng)位置有限或想讓設(shè)計(jì)更簡(jiǎn)單和現(xiàn)代時(shí)，我們可能會(huì)想要順應(yīng)這種趨勢(shì)。占位符文本通常是灰色的，對(duì)比度不高，因此很難閱讀。
如果你像我一樣，你通常會(huì)忘記你在寫(xiě)什么，所以一旦文本消失，很難知道這些字段是什么。使用屏幕閱讀器的人，通常使用Tab鍵瀏覽表單以跳過(guò)表單控件。依賴(lài)<label>元素讀取控件，通常會(huì)跳過(guò)任何非標(biāo)簽文本（如：占位符文本）。
始終幫助人們了解他們應(yīng)該做什么，并以一種明確的形式給出。最好是標(biāo)簽不會(huì)消失，即使這個(gè)人正在輸入信息，人們不應(yīng)該失去他們的寫(xiě)作背景。當(dāng)設(shè)計(jì)師在他們的表單中隱藏描述時(shí)，其實(shí)是犧牲了可用性而追求簡(jiǎn)潔。
這種做法并不意味著你必須用不必要的信息來(lái)混淆你的設(shè)計(jì)，只是確保提供必要的線(xiàn)索，太多的指導(dǎo)性文本可能和太少的問(wèn)題一樣，目標(biāo)是確認(rèn)每個(gè)人有足夠的信息，來(lái)完成他們的任務(wù)而沒(méi)有障礙。
參考資料：WebAIM Creating Accessible Forms
Robin在圖片中發(fā)現(xiàn)了一個(gè)新的朋友
弱視的人經(jīng)常利用屏幕閱讀器來(lái)“聽(tīng)”網(wǎng)頁(yè)。這些工具會(huì)將文本轉(zhuǎn)換成語(yǔ)音，這樣人們就可以在網(wǎng)站上聽(tīng)到單詞。
有兩種方法可以顯示替代文本：
嘗試描述圖片中發(fā)生的事情，以及它對(duì)故事的重要性，而不僅僅是說(shuō)“圖片”。 如果圖片純粹是裝飾性的，或者由于上下文已經(jīng)解釋了內(nèi)容而變得多余，嘗試添加一個(gè)空的<alt>屬性將使屏幕閱讀器跳過(guò)它。如果不寫(xiě)任何替代文字，一些屏幕閱讀器將讀取文件名，這樣的用戶(hù)體驗(yàn)會(huì)很糟糕。
谷歌正在研究一種圖像字幕人工智能，它能以94%的準(zhǔn)確度描述照片（https://petapixel.com/2016/09/23/googles-image-captioning-ai-can-describe-photos-94-accuracy）。這個(gè)模型是開(kāi)源的，仍在研究中，希望我們能看到它在不同的產(chǎn)品中使用。與此同時(shí)，我們應(yīng)該在我們的內(nèi)容中手動(dòng)添加描述圖像含義和功能的文本。
參考資料：W3C Using Alt Attributes
Noah 一直想成為一名建筑師
標(biāo)題，標(biāo)記內(nèi)容開(kāi)始的地方。它們是給文本加上的標(biāo)簽，用來(lái)定義其風(fēng)格和目的，標(biāo)題還創(chuàng)建了頁(yè)面內(nèi)容的層次結(jié)構(gòu)。
大字號(hào)的標(biāo)題有助于讀者更好地理解內(nèi)容的順序，同樣，屏幕閱讀器也使用標(biāo)題標(biāo)簽來(lái)閱讀內(nèi)容。這樣，弱視的人通過(guò)閱讀內(nèi)容中的每個(gè)標(biāo)題來(lái)獲得頁(yè)面的大致內(nèi)容。
在開(kāi)發(fā)站點(diǎn)時(shí)使用適當(dāng)?shù)慕Y(jié)構(gòu)元素很重要，HTML元素向?yàn)g覽器傳達(dá)它們包含的內(nèi)容類(lèi)型，瀏覽器應(yīng)如何呈現(xiàn)或處理這些內(nèi)容。頁(yè)面的組件和結(jié)構(gòu)形成內(nèi)容樹(shù)，讀取內(nèi)容樹(shù)是屏幕閱讀器的強(qiáng)大功能，它們被盲人使用，使得他們可以“聽(tīng)”頁(yè)面內(nèi)容。
不正確使用標(biāo)記會(huì)影響可訪問(wèn)性，不要僅將HTML標(biāo)記用于樣式效果，屏幕閱讀器通過(guò)標(biāo)題結(jié)構(gòu)（真正的標(biāo)題，而不僅僅是大字號(hào)和粗體樣式的文本）按層次結(jié)構(gòu)瀏覽網(wǎng)頁(yè)。 使用你網(wǎng)站的用戶(hù)可以收聽(tīng)所有標(biāo)題的列表，按標(biāo)題類(lèi)型跳轉(zhuǎn)內(nèi)容，或直接導(dǎo)航到頂級(jí)標(biāo)題<h1>。
（譯者注：以前我最初寫(xiě)重構(gòu)代碼的時(shí)候，就困惑一個(gè)問(wèn)題，h1-h5標(biāo)簽除了自帶樣式和利于SEO等作用外，還有什么其他用途？看了本文才知道，原來(lái)還有幫助盲人聽(tīng)書(shū)這么重要的作用）
參考資料：WebAIM Semantic Structure
Gael 在聽(tīng)網(wǎng)站的時(shí)候使用鍵盤(pán)導(dǎo)航
鍵盤(pán)可訪問(wèn)性是Web可訪問(wèn)性的最關(guān)鍵方面之一，有運(yùn)動(dòng)障礙的人，依賴(lài)于屏幕閱讀器的盲人，沒(méi)有精確肌肉控制的人，甚至高級(jí)用戶(hù)都依賴(lài)鍵盤(pán)來(lái)導(dǎo)航內(nèi)容。
如果你像我一樣，經(jīng)常使用鍵盤(pán)上的Tab鍵來(lái)瀏覽網(wǎng)頁(yè)上的交互元素：鏈接、按鈕或輸入項(xiàng)，我們前面討論的焦點(diǎn)狀態(tài)，提供了當(dāng)前選擇的組件的可視化指示器。
當(dāng)你瀏覽頁(yè)面時(shí)，交互元素的順序很重要，導(dǎo)航必須有邏輯且直觀。選項(xiàng)卡順序應(yīng)遵循頁(yè)面的閱讀順序：從左到右、從上到下——標(biāo)題、主導(dǎo)航、內(nèi)容按鈕和輸入項(xiàng)，最后是頁(yè)腳。
一個(gè)好的做法是僅使用鍵盤(pán)測(cè)試你的網(wǎng)站，使用Tab鍵選擇鏈接和表單，使用Enter鍵測(cè)試以選擇元素。 驗(yàn)證所有交互式組件是否可控且有序，如果你可以在沒(méi)有鼠標(biāo)的情況下瀏覽所有網(wǎng)站，那么你的網(wǎng)站就做的很棒了！
最后一點(diǎn)，但并非不重要，請(qǐng)注意導(dǎo)航的大小——包括鏈接的數(shù)量和文本的長(zhǎng)度。對(duì)于有運(yùn)動(dòng)障礙的人來(lái)說(shuō)，通過(guò)長(zhǎng)菜單進(jìn)行切換可能會(huì)很困難，對(duì)于使用屏幕閱讀器的人來(lái)說(shuō)，聽(tīng)冗長(zhǎng)的鏈接可能很麻煩——盡量保持簡(jiǎn)潔。
提供ARIA Landmarks（https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/aria-landmarks/）或HTML5結(jié)構(gòu)元素（如<main>或<nav>）將使導(dǎo)航更容易。
參考資料：W3C Keyboard
這七條準(zhǔn)則是一個(gè)很好的開(kāi)始，如果你想要做更多的事情來(lái)使你的產(chǎn)品更容易訪問(wèn)，我鼓勵(lì)你去做以下一些事：
如以上所述，七個(gè)指導(dǎo)原則將幫助你的web設(shè)計(jì)，更接近于滿(mǎn)足web內(nèi)容可訪問(wèn)性指導(dǎo)方針AA級(jí)別標(biāo)準(zhǔn)（https://www.w3.org/TR/WCAG21）。
我正在努力改進(jìn)可訪問(wèn)性設(shè)計(jì)，也正在努力練習(xí)我講到的東西。我曾經(jīng)認(rèn)為它太難了并且也不重視，其實(shí)我誤解了，如今我邀請(qǐng)你同我一起，將可訪問(wèn)性設(shè)計(jì)加入到設(shè)計(jì)流程中，并繼續(xù)討論可訪問(wèn)性的重要性。
作為設(shè)計(jì)師，我們有責(zé)任倡導(dǎo)無(wú)障礙設(shè)計(jì)。有了它，我們使技術(shù)能為所有人服務(wù)，不管他們的能力、經(jīng)濟(jì)狀況、年齡、教育或地域。
做有責(zé)任感的設(shè)計(jì)師，謝謝！
原作者的文章題目是：《Designing for accessibility is not that hard》，意思是《為可訪問(wèn)性設(shè)計(jì)沒(méi)有那么難》。其實(shí)我一開(kāi)始是有把可訪問(wèn)性和可用性混淆的，后面查了相關(guān)資料，才發(fā)現(xiàn)這確實(shí)是2個(gè)不同的概念，所以想在文末解釋下可用性和可訪問(wèn)性的區(qū)別。
可用性：產(chǎn)品是否容易上手，用戶(hù)能否完成任務(wù)，效率如何，以及這過(guò)程中用戶(hù)的主觀感受可好，是從用戶(hù)的角度來(lái)看產(chǎn)品的質(zhì)量。可用性好意味著產(chǎn)品質(zhì)量高，是企業(yè)的核心競(jìng)爭(zhēng)力。
可訪問(wèn)性：Web內(nèi)容對(duì)于殘障用戶(hù)的可閱讀和可理解性。
想進(jìn)一步深入了解的話(huà)，有篇文章也可以推薦大家看看，可用性和可訪問(wèn)性之間的差異是什么？https://www.jianshu.com/p/8a0cd5403ffc
譯者：彩云Sky，微信公眾號(hào)：彩云譯設(shè)計(jì)
本文由 @彩云Sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自 PEXELS，基于 CC0 協(xié)議
寫(xiě)CSS的常用套路（下篇）...
點(diǎn)擊觀看——我寫(xiě)CSS的常用套路（上篇）...
為盒子添加陰影，增加盒子的立體感，可以多層疊加，并且會(huì)使陰影更加絲滑
本demo地址：Pagination
注意到box-shadow還有個(gè)inset，用于盒子內(nèi)部發(fā)光
利用這個(gè)特性我們可以在盒子內(nèi)部的某個(gè)范圍內(nèi)設(shè)定顏色，做出一個(gè)新月形
再加點(diǎn)動(dòng)畫(huà)和濾鏡效果，“猩紅之月”閃亮登場(chǎng)！
注意到它散發(fā)著淡淡的紅光，其實(shí)就是2個(gè)偽元素應(yīng)用了模糊濾鏡所產(chǎn)生的效果
本demo地址：Crimson Crescent Loading
文本陰影，本質(zhì)上和box-shadow相同，只不過(guò)是相對(duì)于文本而言，常用于文本發(fā)光，也可通過(guò)多層疊加來(lái)制作霓虹文本和偽3D文本等效果
本demo地址：Staggered GlowIn Text
本demo地址：Neon Text
本demo地址：Staggered Bouncing 3D Loading
能將背景裁剪成文字的前景色，常用來(lái)和color: transparent配合生成漸變文本
本demo地址：Menu Hover Fill Text
漸變可以作為背景圖片的一種，具有很強(qiáng)的色彩效果，甚至可以用來(lái)模擬光
線(xiàn)性漸變是筆者最常用的漸變
這個(gè)作品用到了HTML的dialog標(biāo)簽，線(xiàn)性漸變背景，動(dòng)畫(huà)以及overflow障眼法，細(xì)心的你看出來(lái)了嗎:)
本demo地址：Confirm Modal
徑向漸變常用于生成圓形背景，上面例子中Snow的背景就是一個(gè)橢圓形的徑向漸變
此外，由于背景可以疊加，我們可以疊加多個(gè)不同位置大小的徑向漸變來(lái)生成圓點(diǎn)群，再加上動(dòng)畫(huà)就產(chǎn)生了一種微粒效果，無(wú)需多余的div元素
本demo地址：Particle Button
圓錐漸變可以用于制作餅圖
用一個(gè)偽元素疊在餅圖上面，并將content設(shè)為某個(gè)值（這個(gè)值通過(guò)CSS變量計(jì)算出來(lái)），就能制作出度量計(jì)的效果，障眼法又一次完成了它的使命
本demo地址：Gauge (No SVG)
PS里的濾鏡，blur最常用
當(dāng)blur濾鏡和contrast濾鏡一起使用時(shí)，會(huì)產(chǎn)生一種融合（gooey）的奇特效果
本demo地址：Snow Scratch
對(duì)背景應(yīng)用濾鏡，產(chǎn)生毛玻璃的效果
本demo地址：Frosted Glass
PS里的混合模式，常用于文本在背景下的特殊效果
以下利用濾色模式（screen）實(shí)現(xiàn)文本視頻蒙版效果
本demo地址：Video Mask Text
PS里的裁切，可以制作各種不規(guī)則形狀。如果和動(dòng)畫(huà)結(jié)合也會(huì)相當(dāng)有意思
本demo地址：Name Card Hover Expand
由于clip-path有裁切功能，因此可以將多個(gè)文字疊在一起，并按比例裁切成多分，再應(yīng)用交錯(cuò)動(dòng)畫(huà)，就能制作出酷炫的故障效果（glitch）。
本demo地址：Cross Bar Glitch Text
PS里的遮罩。所謂遮罩，就是原始圖片只顯示遮罩圖片非透明的部分
雖然clip-path能裁切出形狀，但它無(wú)法鏤空，因?yàn)樾螤畹睦锩嫠懿恢?/p>
可能有人（包括我）會(huì)用偽元素來(lái)“模擬”鏤空（通過(guò)設(shè)置同樣的背景色），但這樣并非真的鏤空，換了個(gè)背景或浮在圖片上就會(huì)暴露出來(lái)，這時(shí)我們就要求助于遮罩了
假設(shè)，你想制作一個(gè)空心的圓環(huán)，那么你只需將一個(gè)徑向漸變作為元素的遮罩，并且第一個(gè)color-stop設(shè)置為透明，其他的color-stop設(shè)置為其他顏色即可，因?yàn)檎谡值亩x就是只顯示遮罩圖片非透明的部分
注意：為了消除鋸齒，這個(gè)徑向漸變的中間需要有一個(gè)額外的color-stop用于緩沖，長(zhǎng)度設(shè)置為原長(zhǎng)度加0.5px即可
本demo地址：Circle Arrow Nav
投影效果，不怎么常用，適合立體感強(qiáng)的作品
本demo地址：Card Flip Reflection
雖然這并不是一個(gè)CSS特性，但是它經(jīng)常用于完成那些CSS所做不到的事情
那么何時(shí)用它呢？當(dāng)CSS動(dòng)畫(huà)中有屬性無(wú)法從CSS中獲取時(shí)，自然就會(huì)使用到它了
目前CSS還尚未有獲取鼠標(biāo)位置的API，因此考慮用JS來(lái)進(jìn)行
通過(guò)查閱相關(guān)的DOM API，發(fā)現(xiàn)在監(jiān)聽(tīng)鼠標(biāo)事件的API中，可通過(guò)e.clientX和e.clientY來(lái)獲得鼠標(biāo)當(dāng)前的位置
既然能夠獲取鼠標(biāo)的位置，那么跟蹤鼠標(biāo)的位置也就不是什么難事了：通過(guò)監(jiān)聽(tīng)mouseenter和mouseleave事件，來(lái)獲取鼠標(biāo)出入一個(gè)元素時(shí)的位置，并用此坐標(biāo)來(lái)當(dāng)作鼠標(biāo)的位移距離，監(jiān)聽(tīng)mousemove事件，來(lái)獲取鼠標(biāo)在元素上移動(dòng)時(shí)的位置，同樣地用此坐標(biāo)來(lái)當(dāng)作鼠標(biāo)的位移距離，這樣一個(gè)跟蹤鼠標(biāo)的效果就實(shí)現(xiàn)了
本demo地址：Menu Hover Image
CSS Houdini是CSS的底層API，它使我們能夠通過(guò)這套接口來(lái)擴(kuò)展CSS的功能
目前來(lái)說(shuō)，我們無(wú)法直接給漸變添加動(dòng)畫(huà)，因?yàn)闉g覽器不理解要改變的值是什么類(lèi)型
這時(shí)，我們就可以利用CSS.registerProperty()來(lái)注冊(cè)我們的自定義變量，并聲明其語(yǔ)法類(lèi)型（syntax）為顏色類(lèi)型<color>，這樣瀏覽器就能理解并對(duì)顏色應(yīng)用插值方法來(lái)進(jìn)行動(dòng)畫(huà)
還記得上文提到的圓錐漸變conic-gradient()嗎？既然它可以用來(lái)制作餅圖，那么我們能不能讓餅圖動(dòng)起來(lái)呢？答案是肯定的，定義三個(gè)變量：--color1、--color2和--pos，其中--pos的語(yǔ)法類(lèi)型為長(zhǎng)度百分比<length-percentage>，將其從0變?yōu)?00%，餅圖就會(huì)順時(shí)針旋轉(zhuǎn)出現(xiàn)
利用絕對(duì)定位和層疊上下文，我們可以疊加多個(gè)從小到大的餅圖，再給它們?cè)O(shè)置不同的顏色，應(yīng)用交錯(cuò)動(dòng)畫(huà)，就有了下面這個(gè)炫麗的效果
本demo地址：Mawaru
將交錯(cuò)動(dòng)畫(huà)和偽類(lèi)偽元素結(jié)合起來(lái)寫(xiě)出來(lái)的慎重勇者風(fēng)格的菜單
本demo地址：Shinchou Menu
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
