製作撲克的html**
第一步是製作撲克的html，我的原則是用最少最簡潔的**，不引用任何，也許你認為不可能，但是你還是乖乖的看我是如何工作的吧。
建立乙個div，賦予兩個class屬性：cardand suitdiamonds
.**
"card suitdiamonds">
往這個div中新增卡片的內容，只需要乙個包含字母a的段落標記就可以了。
.**
"card suitdiamonds"> a
現在你頭腦裡要時刻記住，我們的目的不僅僅是要製作一張撲克牌，而且要用最簡潔的**，html部分的**就只需要這麼多了（夠簡潔吧）。
精心開發5年的ui前端框架！
css**
css的第一步是規定基本的頁面屬性，這些屬性將被card繼承。
.**
*
body
.card
就如上面的**所示，card 的樣式非常簡單，白色背景，圓角，邊框陰影，除了position屬性為relative外沒有什麼特別的。
現在我們給a字母潤色一下
.**
.card p
先看看效果：
現在看起來是不是已經有卡片的效果了，但是總感覺還缺少些什麼-梅花、方塊、紅桃、黑桃。如果我們要顯示這些圖形但又不引入的話，事情將變得複雜起來，但是我們還是有解決問題的技巧的。
精心開發5年的ui前端框架！
考慮到我們不再想要給html部分新增更多的**，我們引入偽元素before和after來給卡片新增梅花方塊這些圖形。幸運的是，絕大多數的瀏覽器都能識別各種種類的特殊符號。
.**
.suitdiamonds:before, .suitdiamonds:after
我同時用before 和 after這樣我就能得到上下兩個方塊圖形，其他圖形依葫蘆畫瓢。
.**
.suitdiamonds:before, .suitdiamonds:after
.suithearts:before, .suithearts:after
.suitclubs:before, .suitclubs:after
.suitspades:before, .suitspades:after
如果你是乙個仔細的人，你應該發現了這些方塊梅花的方向貌似搞反了。其實css實現反轉也很容易，但是考慮到沒人會把螢幕倒過來看這張撲克牌，所以這是不必要的。
我們畫好了撲克的符號，還應該修飾大小和合適的定位。方塊、梅花、紅桃黑桃的字型大小位置擺放以及position屬性都是一致的，因此我們最好只寫一次。div[class*='suit'精心開發5年的ui前端框架！
.**
div[class*='suit']:before
div[class*='suit']:after
下面看看效果
上面我們只是製作了一張，現在我想製作一組的效果：
.**
"hand">
"card suitdiamonds">
a"card suithearts">
a"card suitclubs">
a"card suitspades"> a
css
精心開發5年的ui前端框架！
.**
"border-color: initial; border-width: 0px; padding: 0px; margin: 0px;">.hand
/* for modern browsers */
.hand:before,
.hand:after
.hand:after
/* for ie 6/7 (trigger haslayout) */
.hand
.card:hover
接下來我想利用css做出一些有趣的動畫效果來：開始的時候只顯示一張撲克，當滑鼠移上去，撲克會展開，就像你打牌的時候手裡握牌的樣子。
html
和之前不同的是我增加了spread class屬性
.**
"hand spread">
"card suitdiamonds">
a"card suithearts">
a"card suitclubs">
a"card suitspades"> a
精心開發5年的ui前端框架！
css
.**
"border-color: initial; border-width: 0px; padding: 0px; margin: 0px;">.spread
.spread > .card
滑鼠移上去的效果：
.**
.spread:hover .suitdiamonds
.spread:hover .suithearts
.spread:hover .suitclubs
.spread:hover .suitspades
再加上點陰影效果
精心開發5年的ui前端框架！
.**
.spread > .card:hover
純css 製作簡單的愛心
網頁中我們用到愛心 的地方不少，如看到一篇喜歡的文章給他點個贊，表白你喜歡的女孩，給他比個小心心什麼的。今天用純css寫乙個簡單的愛心。簡單思路如下 1.先做乙個盒子，裡面包含兩個小盒子 2.兩個小盒子弄成一樣大小的長方形 3.通過border radius transform，進行調整，整合成乙個...
純CSS製作冒泡提示框
前兩天翻譯了一篇文章，關於利用css的border屬性製作基本圖形 先看2張效果圖 對話氣泡 用法 使用.speech bubble和.speech bubble direction類 hi there speech bubble speech bubble after 箭頭的位置 speech b...
純CSS製作冒泡提示框
前兩天翻譯了一篇文章，關於利用css的border屬性製作基本圖形 先看2張效果圖 對話氣泡 使用方法 使用.speech bubble和.speech bubble direction類 hi there speech bubble speech bubble after 箭頭的位置 speech...