卡卡網(wǎng)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

本文介紹4個(gè)漂亮的CSS3 Loading預(yù)加載動(dòng)畫實(shí)例。

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

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

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

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

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

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

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

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