卡卡網(wǎng)

網(wǎng)頁彈窗功能很常見，但一般是使用Javascript或jQuery來實現(xiàn)，而本文要介紹的是，使用純CSS也能實現(xiàn)彈窗功能，不用JS。

前面文章介紹過《CSS實現(xiàn)：固定Table表頭和第一列》，今天介紹一下，如何用CSS實現(xiàn)：固定Table表頭和表腳。

與 JS 制作 Charts 圖相比，使用純 CSS 制作 Charts 圖，不需要渲染，所以性能得到了提升。本文就介紹利用一個CSS框架，制作各種Charts圖的方法。

今天給大家分享一些漂亮的CSS漸變按鈕，鼠標(biāo)滑過(hover)后有動畫效果，這些按鈕UI設(shè)計，在很多網(wǎng)站上都使用著，讓交互瞬間變得不再呆板。

本文介紹如何使用CSS實現(xiàn)文字顏色漸變效果。

CSS 中的cursor屬性控制鼠標(biāo)光標(biāo)位于設(shè)置此屬性的元素上時的外觀。它們主要用于用戶體驗，以傳達(dá)某些功能的想法。本文介紹CSS的32個鼠標(biāo)形狀cursor屬性。 

CSS有很多長度單位，但不是任何一個單位都適合用于任何設(shè)計上。本文將介紹CSS的15個長度單位使用區(qū)別。

在 CSS 中，可以使用各種度量單位指定元素的大小或長度，如PX、EM、REM、%、VW 和 VH等，不過也許你還不十分了解，這些單位之間有什么區(qū)別？什么情況下該用什么單位？

本文介紹如何用CSS讓內(nèi)容(如div/table/圖片等)顯示在網(wǎng)頁body中間。

當(dāng)表格內(nèi)容太多的時候，固定表頭不讓標(biāo)題滾出屏幕外，是一個很人性化的設(shè)計；而當(dāng)橫向項目內(nèi)容太多時，固定第一列（項目列）也是一個很貼心的設(shè)計。本文介紹如何用CSS實現(xiàn)固定Table表頭和第一列。

CSS有很多深層的東西，我們大多數(shù)人沒有研究開，本文將給大家介紹如何用CSS創(chuàng)建面積chart圖，這一功能的實現(xiàn)讓我感覺到CSS的功能實在太強大了。

霓虹燈文本可以為網(wǎng)站添加美感，本文介紹如何使用CSS創(chuàng)建霓虹燈效果的文本，在本文中，我們將看看如何為文本添加發(fā)光效果。

本文介紹一款CSS超平滑陰影，實現(xiàn)起來非常簡單，但效果好看，實用性很強。

本文介紹8款非常漂亮的CSS 3D外觀框陰影。

本文用動畫的形式一步一步給你呈現(xiàn)CSS實心三角形是怎樣制作出來的。

我之前介紹過44個CSS3制作的形狀圖形(shape)，本文將給大家介紹512個CSS圖標(biāo)形狀(icon shape)，無需用到第三方文件，遷移使用起來相當(dāng)方便。

前面介紹過一個側(cè)邊/左側(cè)目錄導(dǎo)航隨內(nèi)容滾動而變化，今天再介紹一個。

今天給大家分享一個側(cè)邊目錄導(dǎo)航，它能隨內(nèi)容滾動而變化。

我們經(jīng)?？吹揭恍┚W(wǎng)頁左側(cè)浮動固定著一個導(dǎo)航，利用它可以快速切換到你想到的內(nèi)容目錄上，今天給大家分享一個非常漂亮的左側(cè)導(dǎo)航/內(nèi)容目錄導(dǎo)航，它是純CSS實現(xiàn)，卻設(shè)計樣式漂亮實用。

我們經(jīng)?？吹竭@樣的網(wǎng)頁內(nèi)容排版：圖片被固定在某一個區(qū)域(div)內(nèi)，然后文字環(huán)繞著它。這要用到什么技術(shù)呢？Javascript？其實，只用純CSS就能實現(xiàn)，并且代碼超級簡單。

對于輸入框的字符，如果要求只能輸入小寫或大寫，怎么處理？js實現(xiàn)？提交到后臺程序轉(zhuǎn)換？其實很簡單，CSS就有這個功能，一條語句就搞定。

<li>是一個項目列表標(biāo)簽，它的樣式有disc(實心圓)，circle(空心圓)、square(正方形)等，本文要介紹的是，如何將li樣式更改為Font Awesome圖標(biāo)。

說到CSS導(dǎo)航欄，各種漂亮炫酷的樣式都應(yīng)有盡有，不過本文要介紹的是簡單卻又很實用的導(dǎo)航欄，分為水平導(dǎo)航欄和垂直導(dǎo)航欄兩種樣式。

網(wǎng)頁右下角正方形廣告很常見，不過CSDN網(wǎng)站的這個右下角廣告設(shè)計得非常好，它可以彈出縮進(jìn)，也可關(guān)閉，比大多數(shù)那些只能直接關(guān)閉的設(shè)計好，現(xiàn)分享給同樣喜歡這個設(shè)計的人。

今天看到CSDN的網(wǎng)頁右下角廣告圖片換了新效果，把原來的圖片縮進(jìn)效果換成了波紋擴散效果，覺得挺有趣的，于是就把此廣告代碼拿下來，分享給有需要的人使用。

這個用戶注冊表單令人眼前一亮，它充分利用Placeholder的特點，當(dāng)點擊輸入框的時候，提示文字移到輸入框左上角，用戶體驗非常友好，值得推薦使用，這個漂亮的用戶注冊表單是用純CSS3實現(xiàn)的。

單選按鈕radio是表單常見的元素，但是默認(rèn)的單選按鈕radio樣式呆板不好看，因此通常設(shè)計人員會自己設(shè)計一個單選按鈕radio，本文介紹用純css3實現(xiàn)漂亮的單選按鈕radio。

登錄表單與注冊表單的設(shè)計可以分開不同的頁面，也可以在同頁面里平滑切換，現(xiàn)在更多人傾向同頁面里平滑切換這種設(shè)計，本文將介紹使用CSS3+jQuery的實現(xiàn)方法。

用戶登錄框是一個非常常見的UI界面，無論是移動端還是PC端。不少人使用了圖片以設(shè)計出漂亮的UI視覺效果，不過其實用純CSS3代碼也可以設(shè)計出簡約大方而又漂亮的用戶登錄框UI布局出來。本文給大家介紹一下實現(xiàn)代碼。

今天給大家介紹如何用CSS3實現(xiàn)顏色漸變的按鈕，并且在鼠標(biāo)劃過時變色，這按鈕再UI設(shè)計中非常常用。

本文介紹的是純CSS實現(xiàn)的對話框（對話氣泡/語音泡沫/speech bubbles），所有示例都使用簡單的語義HTML，沒有空元素，沒有不必要的額外元素，沒有JavaScript，沒有圖像。

本文將介紹css ribbons如何實現(xiàn)漸變色帶的樣式。CSS-Ribbons 漸變色帶樣式本文介紹的色帶有兩種，分別是從左到右漸變，和從右到左漸變。

一些網(wǎng)頁的標(biāo)題或菜單呈帶狀樣式，本文將給大家介紹一個css-ribbons實例，適合用于標(biāo)題樣式。

在這篇新文章中，您將學(xué)習(xí)如何使用HTML placeholder屬性創(chuàng)建一個精美的CSS3搜索框。

CSS能夠制作各種形狀，本文收集了44個常見的CSS3形狀圖形。

本文為大家分享130個純CSS3圖標(biāo)(CSS icons)，值得下載收藏的寶貴資料。

本文介紹一個CSS3 loading預(yù)加載動畫——旋轉(zhuǎn)的圓弧，代碼很少，效果卻很好看。

本文將介紹CSS3+jQuery實現(xiàn)的工具提示(Tooltips)，本實例引用了jQuery文件，卻增強了提示框的顯示效果，添加了漸入的動畫效果，在用戶體驗上更好了。

在本文實例中，使用純CSS3來實現(xiàn)工具提示(Tooltips)，不需要用到Javascript，可謂簡單又實用。

今天我將介紹用純CSS3實現(xiàn)的內(nèi)容選項卡(Content Tabs)4個實例，在本教程中，我們將使用單選按鈕以及:checked偽類和同級組合器來實現(xiàn)一些簡單的CSS3內(nèi)容選項卡，效果很好，非常實用，值得收藏。

當(dāng)多個項目的內(nèi)容需要在同一頁面里展示時，往往是只顯示其中一個項目的內(nèi)容而隱藏其他項目的內(nèi)容，這時就需要用到內(nèi)容折疊的功能，本文介紹如何使用純CSS3來實現(xiàn)這個功能。

本文介紹4個漂亮的CSS3 Loading預(yù)加載動畫實例。

今天介紹一個實例，這個實例用css3實現(xiàn)旋轉(zhuǎn)圓盤的預(yù)加載動畫。

本文介紹另一個音波效果的CSS3 loading預(yù)加載動畫，代碼不復(fù)雜，使用也簡單，大家可以下載后即用。

 CSS3 Loading預(yù)加載動畫，今天介紹的是8個十分常見的實例，由于簡單易用，因此在大量網(wǎng)站里都使用它們。 

網(wǎng)頁UI設(shè)計追求精美漂亮，除此之外，實現(xiàn)代碼也越趨于簡單易用。本文就介紹如何用CSS3實現(xiàn)漸變/立體/扁平的漂亮按鈕，代碼簡單易用，但是效果卻是十分之好。

 時間線使用非常廣泛，它可以比文字直述更加清晰明了的展示某一事物的歷程。本文介紹純CSS3實現(xiàn)的時間線 (Timeline)，非常實用，難得的是代碼使用起來也很簡單。

 UISwitch(開關(guān)按鈕)是APP應(yīng)用程序中不可缺少的一個UI設(shè)計元素， 本文將介紹純CSS3實現(xiàn)的漂亮的開關(guān)按鈕 (UISwitch)。 

我們看到各種各樣的進(jìn)度條，這些進(jìn)度條顯示了流程的當(dāng)前完成狀態(tài)，例如下載或文件傳輸。 在本文中，將介紹如何使用CSS3創(chuàng)建時尚且具有動畫效果的進(jìn)度條。

前面介紹過兩個實例，它們都是頂部橫幅，本文將介紹類似的實例，網(wǎng)頁底部大橫幅#可關(guān)閉變小圖#。