CSS Card:纯css制作扑克牌

制作扑克的html代码

 

第一步是制作扑克的html，我的原则是用最少最简洁的代码，不引用任何图片，也许你认为不可能，但是你还是乖乖的看我是如何工作的吧。

建立一个div，赋予两个class属性：cardand suitdiamonds

 "card suitdiamonds">

  

 

 

往这个div中添加卡片的内容，只需要一个包含字母A的段落标记

就可以了。

 "card suitdiamonds">
   A

  

 

 

现在你头脑里要时刻记住，我们的目的不仅仅是要制作一张扑克牌，而且要用最简洁的代码，html部分的代码就只需要这么多了（够简洁吧）。

精心开发5年的UI前端框架！

css代码

css的第一步是规定基本的页面属性，这些属性将被card继承。

 * {margin: 0; padding: 0;}

 body {
   background: #00a651;
 }

 .card {
   position: relative;
   float: left;
   margin-right: 10px;
   width: 150px;
   height: 220px;
   border-radius: 10px;
   background: #fff;
   -webkit-box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
   box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
 }

 

 

就如上面的代码所示，card 的样式非常简单，白色背景，圆角，边框阴影，除了position属性为relative外没有什么特别的。

现在我们给A字母润色一下

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

 

 

先看看效果：

 

现在看起来是不是已经有卡片的效果了，但是总感觉还缺少些什么-梅花、方块、红桃、黑桃。如果我们要显示这些图形但又不引入图片的话，事情将变得复杂起来，但是我们还是有解决问题的技巧的。精心开发5年的UI前端框架！

考虑到我们不再想要给html部分添加更多的代码，我们引入伪元素before和after来给卡片添加梅花方块这些图形。幸运的是，绝大多数的浏览器都能识别各种种类的特殊符号。

 .suitdiamonds:before, .suitdiamonds:after {
   content: "♦";
   color: #ff0000;
 }

 

 

我同时用before 和 after这样我就能得到上下两个方块图形，其他图形依葫芦画瓢。

 .suitdiamonds:before, .suitdiamonds:after {
   content: "♦";
   color: #ff0000;
 }

 .suithearts:before, .suithearts:after {
   content: "♥";
   color: #ff0000;
 }

 .suitclubs:before, .suitclubs:after {
   content: "♣";
   color: #000;
 }

 .suitspades:before, .suitspades:after {
   content: "♠";
   color: #000;
 }

 

 

如果你是一个仔细的人，你应该发现了这些方块梅花的方向貌似搞反了。其实css实现反转也很容易，但是考虑到没人会把屏幕倒过来看这张扑克牌，所以这是不必要的。

我们画好了扑克的符号，还应该修饰大小和合适的定位。方块、梅花、红桃黑桃的字体大小位置摆放以及position属性都是一致的，因此我们最好只写一次。div[class*='suit']选择器就可以同时选择这四个。（原文的评论里面有人建议单独用一个class来定义，因为作者的这个方法效率上讲要低一些） 精心开发5年的UI前端框架！

 div[class*='suit']:before {
   position: absolute;
   font-size: 35px;
   left: 5px;
   top: 5px;
 }

 div[class*='suit']:after {
   position: absolute;
   font-size: 35px;
   right: 5px;
   bottom: 5px;
 }

 

 

下面看看效果

 

上面我们只是制作了一张图片，现在我想制作一组图片的效果：

 "hand">

   "card suitdiamonds">
     A

  

     

  "card suithearts">  

    

A

  

  

  

       

  "card suitclubs">  

    

A

  

  

  

       

  "card suitspades">  

    

A