Hover-Crafting with CSS3(使用 CSS3 進行懸停製作)

Snap1.png

我們已經完成了前兩章的培訓,以加快了解目前 CSS3 方面可用的內容。 我們還討論了體驗層是目前最適合應用可用 CSS3 的地方。

為了回顧一下到目前為止我們所討論的重要內容,讓我們記住:

  1. 現在有一些可用的核心 CSS3 屬性。
  2. 每個人都可以在自己的項目中使用這些核心屬性,特別是針對體驗層時。
  3. 供應商前綴使我們能夠立即向前推進,幫助測試現實環境中的流入屬性。
  4. CSS Transitions 不再是專有實驗,而是其他瀏覽器正在接受的草案規範。 讓我們使用它們吧!

所有這些都在我們的反重力帶下,現在是時候享受我們所有新工具的樂趣了,並將它們在全頁設計的背景下發揮作用。

我們的案例研究(Our case study)

對於以下大部分示例,我將使用我設計的虛構案例研究:對有幸前往月球的宇航員在月球上留下的所有東西進行幽默的致敬(圖 3.01)。 這個主題背後有一個與本書主題直接相關的故事,請耐心聽一下。

圖 3.01:我們虛構的案例研究,我們留在月球上的東西。

太空和網絡上的消息(Messages in space and on the web)

1969年,宇航員尼爾·阿姆斯特朗和巴茲·奧爾德林成為第一批踏上月球的人類。 我一直是太空旅行和 NASA 計劃的普通粉絲,但在四十週年紀念日期間聽到更多有關阿波羅 11 號任務的信息激發了我閱讀更多有關這次著陸的歷史和事件的信息。 特別是,我對留在月球上並至今仍留在月球上的所有東西很著迷。

在所有留下的物品中,有一個我發現非常有趣,它是用戶體驗設計的一個很好的例子。 它是一個小的矽盤(大約是半美元的大小)。 光盤上刻有來自世界各地七十多個國家領導人的善意信息。 你需要一台顯微鏡才能閱讀它們,但宇航員可以攜帶的物品的限制幫助塑造了一個紀念物品的設計,該物品可以留在月球上供未來的遊客發現(圖 3.02)。

圖 3.02:阿波羅 11 號宇航員留在月球上的小矽盤(大約相當於 5 美元的大小)。
(美國宇航局/nasaimages.org 提供)

從某種意義上說,美國宇航局正在使用當時可用的最新技術為未來某個未知的受眾設計一個物體。 聽起來有點熟?

後來,在 1977 年,航海者 1 號和航海者 2 號航天器通過金唱片解決了類似的設計問題:一張鍍金銅留聲機唱片,其中包含地球上生活的音頻、圖像和圖表(圖 3.03) 。 從某種意義上說,該記錄是向太陽係以外潛在文明發出的瓶中信息。 其外殼上刻有像徵性語言,內容包括如何正確播放唱片、唱片來自銀河系的何處以及其他說明。

圖 3.03:航行者 1 號和 2 號飛船上的留聲機唱片“金唱片”的鍍金外殼。 (由 NASA/加州理工學院噴氣推進實驗室提供)


就像仍在月球塵埃中的矽盤一樣,金唱片的設計採用了製造時現有的最新技術,為用戶提供了無數未知的體驗。 記錄的外星檢索者能夠看到、感覺到和聽到它的內容嗎?

我們可以從留在月球上的矽盤和飛入深空的金唱片中學到很多東西——利用盡可能最好的技術可以幫助支持將信息發送給很大程度上不為人所知的受眾。

作為網頁設計師,當我們為網頁創造東西時,我們也在傳遞瓶中的信息。 我們可以假設誰將閱讀它們、他們實際上能夠理解什麼等等,但我們永遠無法 100% 了解情況。 這不應該阻止我們使用現有的最佳技術來傳遞該消息及其周圍的體驗,讓體驗在較舊或功能較差的設備中優雅地降低。

作為設計師,我們的工作不是簡單地裝飾瓶子並使其看起來漂亮,而是找到方法來豐富故事並增強信息。 今天 CSS3 可以幫助我們做到這一點。

現在您知道為什麼我們的案例研究向那些留在月球或漂浮在太空中的信息致敬了。 是時候開始剖析該網站了,將其分解為與 CSS3 相關的小型示例。 我發現將我們將要討論的所有技術集中在一個地方很有幫助。 您可以隨時在一個生動的單頁網站中引用此模板和所有示例。

您可以在 http://CSS3exp.com/code 下載案例研究的示例代碼

其餘每一章都討論與 CSS3 相關的一組不同示例。 我沒有試圖包羅萬象,告訴您有關 CSS3 的所有知識,而是在這裡做完全相反的事情:深入研究非常具體的、有針對性的示例,同時展示它們如何在模擬環境中工作 - 您可以快速了解的內容 在消化這些頁面後,您將能夠立即應用並繼續構建。 打嗝。

驚喜與喜悅(Surprise and delight)

與靜態媒體相比,網絡設計如此不同且有趣的部分原因在於交互。 當在像素而不是紙上體驗時,事物可以做出反應、移動,甚至令人驚訝。

對於支持 CSS3 的瀏覽器來說,CSS3 可以輕鬆增強這種交互性,但那些不支持 CSS3 的瀏覽器也不會錯過這種交互。

在荷蘭設計師和開發人員 Faruk Ateş 的個人網站 (http://farukat.es) 上可以找到 CSS3 令人驚喜和愉悅的精彩示例。 側邊欄中是指向各種社交網絡的鏈接列表,這些社交網絡的鏈接在懸停時會展開並通過多種 CSS3 處理和平滑過渡而變得活躍起來(圖 3.04)。

圖 3.04:Faruk Ateş 網站上發現的側邊欄和懸停處理。

當您與它交互時,看起來像普通文本列表(帶有向右浮動的圖像)的內容會變得更有趣。 這是豐富體驗層的一個典型示例,Faruk 使用各種 CSS3 屬性來實現這一目標(在支持它們的瀏覽器中)。

圖 3.05 顯示了與 Internet Explorer 7 中查看的相同的默認狀態和懸停狀態,該瀏覽器根本不支持 CSS3。 但您會注意到,雖然懸停狀態沒有那麼完美,但它仍然是一種可用、可讀和功能性的體驗,更不用說默認的非懸停狀態幾乎是相同的。

圖 3.05:在 IE7 中查看,Faruk Ateş 的網站沒有通過 CSS3 進行相同的視覺處理,但這完全沒問題。

將鼠標懸停在(或聚焦在)某個元素上是使用 CSS3 增強功能的絕佳場所。 Internet Explorer 的用戶將獲得不同的體驗(直到它最終放棄對 CSS3 屬性的支持)。 但這種替代體驗非常好,並不意外,坦率地說,IE 用戶不會知道他們錯過了什麼。

也就是說,直到他們在朋友的 Safari、Chrome、Firefox 或 Opera 中啟動它(並感到一陣嫉妒)。

網站需要在每個瀏覽器中獲得完全相同的體驗嗎(Do websites need to be experienced exactly the same in every browser)?

這是一個重要的問題(也是此時提出的合適問題),我嘗試在這個非常長的域(圖 3.06)上回答它:http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

圖 3.06:奇怪的名字 http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com


就像法魯克的例子一樣,直到您開始與網站交互,事情才會變得有趣。 從表面上看,該網站在大多數瀏覽器中看起來幾乎相同,但當您將鼠標移過屏幕和文本時(圖 3.07),將應用一系列 CSS3 屬性、過渡和轉換,使體驗變得獨特且令人難忘 一。

圖 3.07:與站點交互時會展現出豐富的體驗。 我們的朋友 CSS3 使之成為可能。

再一次,我們在體驗層中逐步豐富了這個網頁設計。 核心內容、可讀性、可用性和標記保持一致且不受影響。

月球導航(Navigating the moon)

讓我們將 CSS3 添加到設計的懸停交互中的概念應用到我們的案例研究中。 我將引導我們完成網站頂部導航的創建(圖 3.08),其中我們結合了“邊框半徑(border-radius)”、“文本陰影(text-shadow)”、“RGBA”和“CSS 過渡(CSS transitions)”來創建令人驚喜的體驗 和喜悅。

圖 3.08:我們案例研究的頂部導航,懸停時使用 CSS3 進行了豐富。


第一、標記(First, the markup)

作為優秀的語義學家,我們將使用良好的無序列表來標記頂部導航。

1
2
3
4
5
6
7
<ul id="nav">
  <li><a href="#">News</a></li>
  <li><a href="#">Things</a></li>
  <li><a href="#">Stuff</a></li>
  <li><a href="#">Junk</a></li>
  <li><a href="#">About</a></li>
</ul>

當然,這裡沒有什麼驚天動地的事情——只是我們可以用來開始應用樣式的適當結構。

浮動項目(Floating the items)

首先,讓我們浮動整個列表並使用一些填充將其定位到頁面的右側; 然後,讓每個列表項也浮動。

1
2
3
4
5
6
7
8
#nav {
  float: right;
  padding: 42px 0 0 30px;
}
#nav li {
  float: left;
  margin: 0 0 0 5px;
}

圖 3.09 顯示了結果。 我們的列表現在是水平的。

圖 3.09:鏈接列表,通過一些 CSS 規則變成水平的。


接下來,讓我們為每個鏈接添加一些填充,並將顏色更改為半透明白色。 我們將使用 RGBA 以 70% 不透明度 (0.7) 指定白色 (255, 255, 255),讓文本吸收其背後的一些背景顏色(圖 3.10)。

1
2
3
4
5
#nav li a {
  padding: 5px 15px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.7);
}

圖 3.10:鏈接現在採用 RGBA 樣式,將文本稍微混合到背景中。

圖 3.11 顯示了鏈接的特寫,其中通過 RGBA 實現 70% 不透明度的白色讓背景稍微透亮。


圖 3.11:半透明鏈接的放大視圖。

為 RGBA 提供備份(Providing a backup for RGBA)

現在,雖然 RGBA 是一種非常靈活的指定顏色和不透明度級別的方法,但並非所有瀏覽器都支持它。 當前版本的 Safari、Chrome、Firefox 和 Opera 都支持它,並且在 Internet Explorer 9 中可用,但 IE6-8 又如何呢?

這就是指定備用顏色發揮作用的地方。 使用 RGBA 分配顏色值時,最好先指定純色,作為尚不支持 RGBA 的瀏覽器的備用顏色。

1
2
3
4
5
6
#nav li a {
  padding: 5px 15px;
  font-weight: bold;
  color: #ccc;
  color: rgba(255, 255, 255, 0.7);
}

支持 RGBA 的瀏覽器將覆蓋純色(在本例中為淺灰色 #ccc),而尚不支持 RGBA 的瀏覽器將忽略 RGBA 規則。

因此,需要記住的一點是:在 RGBA 規則之前出現的單獨規則中指定 RGBA 顏色的可靠備份。

添加文字陰影(Adding text-shadow)

對於鏈接樣式的最後一項添加,讓我們添加一個非常微妙的文本陰影。 我們將在這裡再次使用 RGBA 來定義陰影的顏色,讓不透明度為 50% 的半透明黑色混合到其後面的背景中。

1
2
3
4
5
6
7
#nav li a {
  padding: 5px 15px;
  font-weight: bold;
  color: #ccc;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

圖 3.12 顯示了未應用文本陰影( text-shadow)(左)和應用“文本陰影( text-shadow)”(右)的文本鏈接的比較,如在 Safari 中查看的那樣。 這是一個幾乎難以察覺的細節,但微小的陰影使文本足以“升起”其背後的空間背景。

圖 3.12:未應用文本陰影的鏈接(左)和應用文本陰影的鏈接(右)的比較。


請記住,文本陰影(text-shadow)適用於當前版本的 Safari、Chrome、Firefox 和 Opera。 不支持文本陰影的瀏覽器(咳嗽 IE)將無害地忽略該規則。 沒有陰影,沒問題。

文本陰影(text-shadow)就位後,我們現在可以繼續進行 :hover 處理。 這就是我們將更加依賴 CSS3 的地方。

懸停和焦點樣式(Hover and focus styles)

我們將為每個鏈接的 :hover 狀態添加顏色更改和背景顏色。 我們將再次使用 RGBA 在 :hover 上的文本後面設置半透明的白色背景。

#nav li a {
  padding: 5px 15px;
  font-weight: bold;
  color: #ccc;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
#nav li a:hover, #nav li a:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

因此,在:hover 上,我們將文本顏色更改為純白色,並添加不透明度為 15% 的白色背景色。 我還繼續聲明了當鏈接聚焦時的這種樣式。 例如,當每個鏈接獲得焦點時,使用鍵盤導航的用戶將看到此更改。

圖 3.13 顯示了鏈接的新 :hover(和:focus)狀態。 支持 RGBA 的瀏覽器將在更亮的白色文本後面獲得半透明的白色背景。


圖 3.13:顯示 :hover 狀態,現在通過 RGBA 具有半透明背景。


使用“border-radius”將懸停區域舍入(Rounding the hover with border-radius)

更進一步,我們可以使用 CSS3 border-radius 屬性將懸停背景的角變圓,為支持它的瀏覽器創建一個藥丸形狀。

記住我們在第 1 章中學到的有關 border-radius 屬性和使我們今天能夠使用它的供應商前綴的知識,我們可以將堆棧添加到默認鏈接聲明中,如下所示:

#nav li a {
  padding: 5px 15px;
  font-weight: bold;
  color: #ccc;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  border-radius: 14px;
}
#nav li a:hover, #nav li a:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

圖 3.14 顯示了 :hover 背景處理現在通過 borderradius 進行圓角處理,這將在 Safari、Chrome、Firefox 和 Opera 以及 IE9 中看到。 請記住,我們已將無前綴的 border-radius 屬性放在列表的最後,以確保最終的實現將勝過供應商前綴的實現。 例如,Safari 5 現在支持無前綴 border-radius 屬性以及 Safari 4 中支持的 –webkit-borderradius

圖 3.14:用邊框半徑將背景的角倒圓。

您可能想知道為什麼我將 border-radius 規則放在 #nav li a 聲明中,而不是放在 #nav li a:hover 聲明中(它被顯示的地方)。 答案就在於我們接下來要添加的 CSS 過渡,作為最後的潤色。

添加過渡(Adding a transition)

最後,讓我們利用第 2 章中學到的知識,為導航鏈接上的 :hover 和 :focus 添加過渡。 這將使背景藥丸的外觀變得平滑,巧妙地使其成為文本後面的焦點。 該過渡還將平滑文本顏色從半透明白色到全白色的變化(圖 3.15)。

圖 3.15:過渡到位時的緩入和緩出。

在這裡,我們將添加當前在 Safari、Chrome、Firefox (4.0) 和 Opera 中工作的過渡堆棧,並將無前綴過渡屬性放在聲明的最後,以便其他瀏覽器(或未來版本)最終實現。

#nav li a {
  padding: 5px 15px;
  font-weight: bold;
  color: #ccc;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  border-radius: 14px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#nav li a:hover, #nav li a:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

請記住,我們將轉換屬性添加到要轉換的元素的正常狀態。 轉換是以這種方式設計的,以便轉換不僅發生在:hover上,而且也發生在:focus:active 狀態上。

我在轉換中使用 all 值來捕獲:hover:focus 上更改的所有屬性(在本例中為顏色和背景)。 或者,我們可以通過在逗號分隔列表中顯式列出每個屬性來實現相同的轉換,如下所示:

-webkit-transition:
  color 0.3s ease-in-out,
  background 0.3s ease-in-out;
-moz-transition:
  color 0.3s ease-in-out,
  background 0.3s ease-in-out;
-o-transition:
  color 0.3s ease-in-out,
  background 0.3s ease-in-out;
transition:
  color .3s ease-in-out,
  background .3s ease-in-out;

您可以快速看到 all 值如何更加緊湊和高效地轉換元素上的多個更改。

懸停打造體驗(Hover-crafting the experience)

我們剛剛完成了一個相當簡單的示例,將各種 CSS3 屬性添加到體驗層。 有能力的瀏覽器將在文本陰影文本鏈接後面使用半透明的圓形背景顏色。 不具備此功能的瀏覽器無法獲得增強的懸停體驗,但這完全沒問題。 他們得到的是一個語義結構的水平鏈接列表——這個基礎是這裡最重要的。

我認為這個小練習還展示了實現以前需要 Flash 和/或 JavaScript 才能實現的目標的效率。 我們使用的 CSS 規則簡單明了,對於尚不支持它們的瀏覽器來說是無害的。

我們還通過確保規範中的屬性最後包含在我們的規則中來確保我們的 CSS3 面向未來。 使用適當的供應商特定前綴來複製這些規則是一項必要的工作,但回報是巨大的:立即使用 CSS3 來增強許多用戶的體驗。

使用不透明度實現簡單靈活的懸停(Simple and flexible hovering using opacity)

我們不斷尋找能夠節省時間並提供額外靈活性的解決方案。 這正是 CSS3 為我們提供的功能:只需幾行代碼即可實現過去需要更多時間和資源來創建和維護的功能。

懸停製作武器庫的另一個工具是不透明度屬性。 正如第 1 章中提到的,opacity 是一個 CSS3 屬性,允許您指定給定元素的不透明程度。 與前面提到的 RGBA 相結合,不透明度提供了另一種方法來為我們為 Web 創建的設計添加透明度。

我喜歡使用不透明度的方法之一是為超鏈接圖形創建簡單而靈活的懸停狀態,使用透明度的變化從單個圖像創建多個狀態。 將 CSS 過渡添加到組合中,您現在可以在頁面上輕鬆維護鏈接圖形,獲得極其豐富的體驗。

讓我們看看如何在月球案例研究中使用不透明度屬性。

可點擊圖像的不透明度(Opacity on clickable images)

圖 3.16 顯示了月球示例網站的頁腳,在一些合法副本和令人震驚的免責聲明下面,有三個可點擊的徽標。

圖 3.16:《我們留在月球上的東西》的頁腳。


我們將使用 opacity 屬性不僅控制 :hover:focus 處理,而且還設置初始透明度級別。 CSS 過渡將使該變化變得平滑並動畫化,以獲得完整的效果。

標記(The markup)

與前面的頂部導航示例一樣,這些頁腳徽標的標記簡單且語義化 - 只是超鏈接圖像的無序列表:

1
2
3
4
5
6
7
8
<ul id="footer-logos">
  <li><a href="#"><img src="img/logo-sb.png"   alt="SimpleBits logo" /></a>
  </li>
  <li><a href="#"><img src="img/icon-feed.png" alt="RSS feed" /></a>
  </li>
  <li><a href="#"><img src="img/icon-bitman.png" alt="BitMan" /></a>
  </li>
</ul>

不透明度和圖像效率(Opacity and image efficiency)

實際上,我已經將圖標本身創建為全白色 PNG 圖像,因為我知道稍後可以使用不透明度屬性來通過 CSS 調整透明度級別。 在某些情況下,這改變了我對 Web 項目圖形資源的看法。

我將保存可以在瀏覽器中調整的完全不透明版本(圖 3.17),而不是保存半透明的 PNG。 這不僅節省了時間,還允許我們改變:hover:focus:active 狀態的不透明度級別,而無需創建多組圖像。


圖 3.17:徽標 PNG 創建為全白色。


設置列表樣式(Styling the list)

樣式的第一部分將使圖像在頁腳中居中,並使它們水平而不是垂直(圖3.18)。

1
2
3
4
5
6
#footer-logos {
  text-align: center;
}
#footer-logos li {
  display: inline;
}

圖 3.18:白色 PNG 位於頁腳中央。


接下來,讓我們添加不透明度值,這些值將使圖標在默認狀態下變暗,在懸停或聚焦時使圖標稍微變亮。

1
2
3
4
5
6
#footer-logos a img {
  opacity: 0.25;
}
#footer-logos a:hover img, #footer-logos a:focus img {
  opacity: 0.6;
}

在這裡,我們以 25% 的不透明度顯示圖像,然後在懸停或聚焦時將它們的不透明度提高到 60%(圖 3.19)。 很簡單的事情,不是嗎? 而且它只需要一組圖像。


圖 3.19:通過調整不透明度來顯示頁腳中圖標的 :hover 狀態。


請注意,opacity 屬性不需要供應商前綴,並且可以在 Safari、Chrome、Firefox 和 Opera 中使用。 IE8 及更低版本不支持不透明度,但對於那些不介意涉足適當水域的人來說,有一個 hack-ish 解決方案可用。

IE 不透明度黑客(The IE opacity hack)

值得慶幸的是,Internet Explorer 9 Beta 現在支持不透明度,但我們也可以通過使用專有的 Microsoft 過濾器屬性來模擬舊版本 IE 的相同結果。

通常我不建議使用過濾器,因為(與供應商前綴的屬性不同)它不是任何提議標準的一部分。 此外,使用過濾器屬性可能會增加性能開銷,具體取決於使用位置或頻率。 這是一種黑客行為,但它提供了一種達到目的的手段。

只要您理解這一點,並且也許將此屬性的使用隔離到其自己的樣式表中,或者仔細註釋它,那麼它就可以是一種可行的方法。

它的工作原理如下:

#footer-logos a img {
  border: none;
  opacity: 0.25;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
  /* IE 8 hack */
  filter: alpha(opacity = 25); /* IE 5-7 hack */
}
#footer-logos a:hover img,
#footer-logos a:focus img {
  opacity: 0.6;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  /* IE 8 hack */
  filter: alpha(opacity = 60); /* IE 5-7 hack */
}

語法類似,不透明度值通過 IE 的 alpha 過濾器傳遞。 請注意,IE8 忽略過濾器屬性,並需要帶有供應商前綴的 –ms-filter 以及一些附加(醜陋)值。

完成這些修改後,您現在將在 Internet Explorer 中看到相同的結果(圖 3.20)。 再次強調,如果有的話,請謹慎使用。 但現實情況是,如果您的任何網站有相當大的 IE 流量統計數據(大多數網站都有),您可能需要使用它。

圖 3.20:IE7 中的頁腳,使用了過濾器 hack,模仿了不透明度屬性。


添加過渡(Adding a transition)

最後,向不透明度交換添加過渡將平滑該值變化,並提供一些豐富的動畫,將整個技術聯繫在一起。

讓我們將我們(現在熟悉的)轉換堆棧添加到聲明中,這次專門轉換不透明度屬性。 我們將使它變得相當快(僅 0.2 秒),然後緩慢地進入然後再次退出。

#footer-logos a img {
  opacity: 0.25;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
  /* IE 8 hack */
  filter: alpha(opacity = 25); /* IE 5-7 hack */
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}
#footer-logos a:hover img,
#footer-logos a:focus img {
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  /* IE 8 hack */
  filter: alpha(opacity = 60); /* IE 5-7 hack */
}

過渡到位後,我們現在有了一種簡單的技術,可以使用不透明度通過一組圖像打造靈活的懸停體驗。

繼續前進並懸停-工藝(Go forth and hover-craft)

正如我之前提到的,這個解決方案影響了我為設計創建資產圖形的想法。 我們可以使用不透明度來控製圖形在默認情況下的顯示方式,將其混合到背景中,然後為 :hover:focus:active狀態應用不同的值,將其與支持它的瀏覽器的過渡結合在一起。

下次在您自己的設計中為超鏈接圖像創建懸停處理時,請記住不透明度屬性。 您將節省時間、帶寬以及其他解決方案可能需要的不必要的複雜性。

使用 CSS3 進行懸停製作就是快速有效地添加簡單的樣式,豐富體驗層,讓現在和未來支持這些屬性的瀏覽器讓用戶感到驚訝和高興。 如果瀏覽器不支持您創建的高保真體驗,那也完全沒問題,因為他們不知道自己錯過了什麼。

Jangowdd9K7AAC20230701b4g5kt

Edit

Pub: 11 Jul 2023 05:29 UTC

Edit: 11 Jul 2023 05:29 UTC

Views: 19