CSS Card:純css製作撲克牌，csscard製作撲克牌

CSS Card:純css製作撲克牌，csscard製作撲克牌

製作撲克的html代碼

 

第一步是製作撲克的html，我的原則是用最少最簡潔的代碼，不引用任何圖片，也許你認為不可能，但是你還是乖乖的看我是如何工作的吧。

建立一個div，賦予兩個class屬性：cardand suitdiamonds

.代碼 

1. <div class="card suitdiamonds">  
2. </div>  

 

 

往這個div中添加卡片的內容，只需要一個包含字母A的段落標記<P>就可以了。

.代碼 

1. <div class="card suitdiamonds">  
2.   <p>A</p>  
3. </div>  

 

 

現在你頭腦裡要時刻記住，我們的目的不僅僅是要製作一張撲克牌，而且要用最簡潔的代碼，html部分的代碼就只需要這麼多了（夠簡潔吧）。

精心開發5年的UI前端架構！

css代碼

css的第一步是規定基本的頁面屬性，這些屬性將被card繼承。

.代碼 

1. * {margin: 0; padding: 0;}  
2.          
3. body {  
4.   background: #00a651;  
5. }  
6.          
7. .card {  
8.   position: relative;  
9.   float: left;  
10.   margin-right: 10px;  
11.   width: 150px;  
12.   height: 220px;  
13.   border-radius: 10px;  
14.   background: #fff;  
15.   -webkit-box-shadow: 3px 3px 7px rgba(0,0,0,0.3);  
16.   box-shadow: 3px 3px 7px rgba(0,0,0,0.3);  
17. }  

 

 

就如上面的代碼所示，card 的樣式非常簡單，白色背景，圓角，邊框陰影，除了position屬性為relative外沒有什麼特別的。

現在我們給A字母潤色一下

.代碼 

1. .card p {  
2.   text-align: center;  
3.   font: 100px/220px Georgia, Times New Roman, serif;  
4. }  

 

 

先看看效果：

 

現在看起來是不是已經有卡片的效果了，但是總感覺還缺少些什麼-梅花、方塊、紅桃、黑桃。如果我們要顯示這些圖形但又不引入圖片的話，事情將變得複雜起來，但是我們還是有解決問題的技巧的。精心開發5年的UI前端架構！

考慮到我們不再想要給html部分添加更多的代碼，我們引入虛擬元素before和after來給卡片添加梅花方塊這些圖形。幸運的是，絕大多數的瀏覽器都能識別各種種類的特殊符號。

.代碼 

1. .suitdiamonds:before, .suitdiamonds:after {  
2.   content: "";  
3.   color: #ff0000;  
4. }  

 

 

我同時用before 和 after這樣我就能得到上下兩個方塊圖形，其他圖形依葫蘆畫瓢。

.代碼 

1. .suitdiamonds:before, .suitdiamonds:after {  
2.   content: "";  
3.   color: #ff0000;  
4. }  
5.          
6. .suithearts:before, .suithearts:after {  
7.   content: "";  
8.   color: #ff0000;  
9. }  
10.          
11. .suitclubs:before, .suitclubs:after {  
12.   content: "";  
13.   color: #000;  
14. }  
15.          
16. .suitspades:before, .suitspades:after {  
17.   content: "";  
18.   color: #000;  
19. }  

 

 

如果你是一個仔細的人，你應該發現了這些方塊梅花的方向貌似搞反了。其實css實現反轉也很容易，但是考慮到沒人會把螢幕倒過來看這張撲克牌，所以這是不必要的。

我們畫好了撲克的符號，還應該修飾大小和合適的定位。方塊、梅花、紅桃黑桃的字型大小位置擺放以及position屬性都是一致的，因此我們最好唯寫一次。div[class*='suit']選取器就可以同時選擇這四個。（原文的評論裡面有人建議單獨用一個class來定義，因為作者的這個方法效率上講要低一些） 精心開發5年的UI前端架構！

.代碼 

1. div[class*='suit']:before {  
2.   position: absolute;  
3.   font-size: 35px;  
4.   left: 5px;  
5.   top: 5px;  
6. }  
7.         
8. div[class*='suit']:after {  
9.   position: absolute;  
10.   font-size: 35px;  
11.   right: 5px;  
12.   bottom: 5px;  
13. }  

 

 

下面看看效果

 

上面我們只是製作了一張圖片，現在我想製作一組圖片的效果：

.代碼 

1. <div class="hand">  
2.      
3.   <div class="card suitdiamonds">  
4.     <p>A</p>  
5.   </div>  
6.      
7.   <div class="card suithearts">  
8.     <p>A</p>  
9.   </div>  
10.        
11.   <div class="card suitclubs">  
12.     <p>A</p>  
13.   </div>  
14.        
15.   <div class="card suitspades">  
16.     <p>A</p>  
17.   </div>  
18.      
19. </div>  

 

 

css 精心開發5年的UI前端架構！

.代碼 

1. <strong style="border-color: initial; border-width: 0px; padding: 0px; margin: 0px;">.hand {  
2.   margin: 50px;  
3. }  
4.      
5. /* For modern browsers */  
6. .hand:before,  
7. .hand:after {  
8.     content:"";  
9.     display:table;  
10. }  
11.       
12. .hand:after {  
13.     clear:both;  
14. }  
15.       
16. /* For IE 6/7 (trigger hasLayout) */  
17. .hand {  
18.     zoom:1;  
19. }  
20.      
21. .card:hover {  
22.   cursor: pointer;  
23. }</strong>  

 

 

 

接下來我想利用css做出一些有趣的動畫效果來：開始的時候只顯示一張撲克，當滑鼠移上去，撲克會展開，就像你打牌的時候手裡握牌的樣子。

html

和之前不同的是我增加了spread class屬性

.代碼 

1. <div class="hand spread">  
2.     
3.   <div class="card suitdiamonds">  
4.     <p>A</p>  
5.   </div>  
6.     
7.   <div class="card suithearts">  
8.     <p>A</p>  
9.   </div>  
10.       
11.   <div class="card suitclubs">  
12.     <p>A</p>  
13.   </div>  
14.       
15.   <div class="card suitspades">  
16.     <p>A</p>  
17.   </div>  
18.     
19. </div>  

 精心開發5年的UI前端架構！

 

 

css

.代碼 

1. <strong style="border-color: initial; border-width: 0px; padding: 0px; margin: 0px;">.spread {  
2.   width: 350px;  
3.   height: 250px;  
4.   position: relative;  
5. }  
6.     
7. .spread > .card {  
8.   position: absolute;  
9.   top: 0;  
10.   left: 0;  
11.   -webkit-transition: top 0.3s ease, left 0.3s ease;  
12.   -moz-transition: top 0.3s ease, left 0.3s ease;  
13.   -o-transition: top 0.3s ease, left 0.3s ease;  
14.   -ms-transition: top 0.3s ease, left 0.3s ease;  
15.   transition: top 0.3s ease, left 0.3s ease;  
16. }</strong>  

 

 

滑鼠移上去的效果：

.代碼 

1. .spread:hover .suitdiamonds {  
2.   -webkit-transform: rotate(-10deg);  
3.   -moz-transform: rotate(-10deg);  
4.   -o-transform: rotate(-10deg);  
5.   -ms-transform: rotate(-10deg);  
6.   transform: rotate(-10deg);  
7. }  
8.     
9. .spread:hover .suithearts {  
10.   left: 30px;  
11.   top: 0px;  
12.   -webkit-transform: rotate(0deg);  
13.   -moz-transform: rotate(0deg);  
14.   -o-transform: rotate(0deg);  
15.   -ms-transform: rotate(0deg);  
16.   transform: rotate(0deg);  
17. }  
18.     
19. .spread:hover .suitclubs {  
20.   left: 60px;  
21.   top: 5px;  
22.   -webkit-transform: rotate(10deg);  
23.   -moz-transform: rotate(10deg);  
24.   -o-transform: rotate(10deg);  
25.   -ms-transform: rotate(10deg);  
26.   transform: rotate(10deg);  
27. }  
28.     
29. .spread:hover .suitspades{  
30.   left: 80px;  
31.   top: 10px;  
32.   -webkit-transform: rotate(20deg);  
33.   -moz-transform: rotate(20deg);  
34.   -o-transform: rotate(20deg);  
35.   -ms-transform: rotate(20deg);  
36.   transform: rotate(20deg);  
37. }  

 

 

再加上點陰影製作效果 精心開發5年的UI前端架構！

.代碼 

1. .spread > .card:hover {  
2.   -webkit-box-shadow: 1px 1px 7px rgba(0,0,0,0.4);  
3.   box-shadow: 1px 1px 7px rgba(0,0,0,0.4);  
4. }  

 

 

 

跪純CSS 網頁選項卡 製作方法

你的是什麼瀏覽器，我沒有發現不相容呀！！！

這個例子用到的都是通用標記嘛！！！
==========================================

CSS做選項卡，簡單地講就是，先定義，再引用。

你也可以照著你說的這個例子自己做做看，這個沒有多少難度。

=======================================================

PS：對“相容”不是這麼理解的，這個例子中的CSS定義模組，十分明確各個模組的功能和用途，而最終的效果是引用這些模組來實現的，你隨便去刪“模組”，肯定出問題嘛。就像JS你隨便刪語句不能運行一樣，但這不是“相容”問題！！
 
怎用純css製作動態網頁效果？

你說所的效果，幾乎都是用hover觸發做出來的，所以ie6幾乎做不出來這個效果。
比如<li><img class=pic1 src="test.jpg" /><img class=pic2 src="test2.jpg" /></li>
<style>
.pic2{display:none;}
li:hover .pic2{display:block;}
</style>
設定pic2為隱藏，當滑鼠觸發li:hover屬性時設定其為可見就行了。