• <nav id="7pq8u"></nav>
  • <table id="7pq8u"><font id="7pq8u"><tt id="7pq8u"></tt></font></table>

    <big id="7pq8u"><font id="7pq8u"></font></big><font id="7pq8u"><u id="7pq8u"></u></font>
    1. Menu

      10個CSS工具提示片段可以節省Web項目的時間

      <返回列表

      在頁面中添加一個簡單的工具提示并不難。你可以找到一堆免費工具提示插件和JS腳本可以幫助解決這個問題。

      但是純CSS是另一種選擇,它很快成為許多web設計師的首選。如果你在尋找CSS工具提示,那么這個集合應該有你需要的東西。

      所有這些代碼片段都來自CodePen,它們可以免費為您的網站進行分叉、復制和重新設計。

      1.產品特色亮點

      讓我們從網絡開發人員伊恩·法布(Ian Farb)的一句廢話開始吧。他的一個片段產品功能工具提示簡直不可思議。絕對是獨一無二的,不是你每天都能看到的東西!

      通過將一些工具提示附加到div元素上,您可以將它們放置在圖像頂部的任何位置。通過這種方式,用戶可以懸停以獲取有關產品樣式、設計、格式等信息。

      工具提示本身看起來超級干凈的白色背景和一個小的陰影。它們可以使用任何布局樣式,因此非常適合產品標注。

      2.動畫CSS工具提示

      在工具提示上尋找自定義動畫樣式?然后是馬庫斯·布魯赫的動畫提示應該在你的網站上創造奇跡。

      它們有三種不同的風格:褪色、膨脹和搖擺運動。

      它們都很容易添加到頁面中,并且使用HTML5數據標題屬性來定義工具提示文本。這意味著您不需要太多額外的HTML來實現這些功能,而且它們完全是語義引導的。

      你甚至可以把它作為一個模板來定制你自己的CSS動畫,在Markus的基礎上構建。

      3.自動化工具提示

      帶著這些自動化工具提示您會注意到兩件事:它們與錨鏈接很好地融合在一起,并且依賴于一些JavaScript。

      盡管這些不是純粹的CSS,但我還是不得不把它們包括進來,因為它們實在太實用了。我不會說這些工具提示適用于所有人,因為它們需要特定類型的網站才能真正“適應”內容。

      不過,這個設計還是很棒的,代碼片段可以完美地工作。

      所有的CSS都在Sass上運行,HTML在Pug上運行,但是如果您想直接復制/粘貼到布局中,您可以在CodePen內部編譯成原始代碼。

      4.動畫問題

      我經??吹叫柼枅D標在更大的表單和更復雜的頁面。它們有助于吸引用戶的注意力并告知用戶頁面的特定部分。

      您可以使用此動畫問題工具提示運行在純CSS上。它甚至有自己的自定義動畫樣式,你可以在懸停時看到。

      HTML5在這方面又起作用了數據-*屬性,以便所有工具提示文本都可以直接放入其中。

      代碼完全開源后,您甚至可以根據需要更改動畫樣式和配色方案,以更好地融入其中。

      5.純CSS3快速提示

      我想這些工具提示是完美的日常運行工具提示任何網站。

      它們在純CSS3上工作,如果您深入研究一下代碼,它們非常容易定制。

      默認情況下,每個工具提示都使用半透明不透明的略暗背景。如果你的工具提示出現在另一個段落的頂部,這可能很難閱讀。但是只要對CSS稍作改動,你就可以重新設計配色方案為了可讀性 .

      完全免費的圖片和JavaScript,這也許是最好的工具提示集,你會發現具有普遍吸引力。

      6.沒有JS工具提示

      Chris Yaxley設計這些非JS工具提示它也運行在純CSS上。它們沒有自定義動畫效果,因此與此列表中的其他動畫相比,它們可能會覺得有些過時。

      但它們完全兼容現代瀏覽器,而且它們的行為完全符合您的預期。

      有時刪除動畫對你有利。這就像一個毫無意義的設計,你可以直接分享工具提示信息,沒有什么有趣的事情。

      7.帶工具提示的動畫按鈕

      這個風俗動畫按鈕工具提示當然是獨一無二的。它在懸停時出現,并以自上而下的動畫樣式淡入視圖。

      開發人員adityabhandari用最廣泛支持的CSS3屬性創建了這個工具提示。它可以在使用類的任何按鈕或鏈接上工作.按鈕和偽類一起出現:之前:之后 .

      如果你要設計一個帶有下載或注冊表單的頁面,請記住這一點。您可以將此工具提示添加到任何按鈕上,以便與用戶共享相關信息。

      8.純文本CSS提示

      我非常喜歡基于文本的工具提示,因為它們在網絡上很傳統。與這些純粹的CSS提示你不僅可以得到一個干凈的界面,而且可以在懸停時獲得一個非??岬膭赢嬓Ч?。

      實際的工具提示有一個小延遲,這是標準瀏覽器工具提示的典型特征。這一個使用CSS動畫浮動到視圖中。此外,它還將默認光標樣式更改為問號光標,這是一種與通常不可單擊的鏈接相關的設計模式。

      非常簡單的設置一個華麗的最終結果。而且,它運行在純CSS上的事實更令人印象深刻。

      9.信息工具提示

      這是另一個信息型工具提示使用“i”信息圖標。您可以輕松地復制此CSS,以在任何可能支持基于信息的工具提示的頁面元素上運行。

      動畫的風格是超級干凈,雖然有點慢,我的口味。謝天謝地,您可以完全訪問源代碼,這樣您就可以更改動畫的速度、樣式、位置以及幾乎所有其他內容。

      另一點需要注意的是,這個設計如何使用SVG元素作為圖標。減少頁面上的圖像當然不是很好的方法。

      10.帶工具提示的甜甜圈圖表

      數據圖表總是與工具提示一起工作得更好。這樣,即使頁面上沒有太多空間,也可以共享有關圖表某些部分的額外數據。

      看一眼這個甜甜圈圖表使用一些非常不可思議的工具提示。您會注意到它確實使用了一些JavaScript,但它主要用于donut圖形效果。

      工具提示基于JS數據顯示,因此不需要任何HTML。這使得定制變得更加困難,同時也使您能夠更好地控制工具提示的樣式、位置和行為。


      最新網站設計資訊
      企業網站建設

      企業網站建設優化一條龍,多年品牌網站設計,營銷網站開發,手機網站制作,響應式網站設計

      聯系我們

      電話:18868949445QQ:1611387063 郵箱:[email protected]

      聯系云軒總監微信

      微信
      TG平台

    2. <nav id="7pq8u"></nav>
    3. <table id="7pq8u"><font id="7pq8u"><tt id="7pq8u"></tt></font></table>

      <big id="7pq8u"><font id="7pq8u"></font></big><font id="7pq8u"><u id="7pq8u"></u></font>
      1. |TG网|TG网|TG登录网址

      2. <nav id="7pq8u"></nav>
      3. <table id="7pq8u"><font id="7pq8u"><tt id="7pq8u"></tt></font></table>

        <big id="7pq8u"><font id="7pq8u"></font></big><font id="7pq8u"><u id="7pq8u"></u></font>
        1. TG足球app TG登录 TG登录网址 TG网 TG登录 TG足球淘金网 TG网 TG登录 TG足球app TG足球淘金网