制作一幅扑克牌系列二---不用图片的纯css实现方法
2009-01-31 20:41
585 查看
制作一幅扑克牌系列二---不用图片的纯css实现方法
本站原创:biny
前面介绍了制作的扑克牌是用图片的方式来实现,它逼真地还原了扑克牌。下面介绍一种比较简单的实现方法,这种方法不用一张图片。
原理是:用四个特别字符的html标签来实现。
1.♠表示黑桃
2.♥表示红心
3.♣表示梅花
4.♦表示方块
先写结构:
<div class="card" style="left:10px;top:20px;">
<div class="front">
<b class="index">9<br />♠</b>
<span class="A1">♠</span>
<span class="A2">♠</span>
<span class="A3">♠</span>
<span class="A4">♠</span>
<span class="B1">♠</span>
<span class="C1">♠</span>
<span class="C2">♠</span>
<span class="C3">♠</span>
<span class="C4">♠</span>
<b class="end">♠<br/>9</b>
</div>
</div>
再写样式:
<style type="text/css">
.card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;}
/*中间图片通用设置*/
span{
display:block;
width:20px;
height:30px;
line-height:30px;
position:absolute;
font-size:26px;
left: 22px;
top: 130px;
}
/*小图片通用设置*/
/*数字通用设置*/
b{display:block;width:15px;height:10px; position:absolute;font-size:10px;text-align:center;font-weight:bold;overflow:hidden;}
/*各坐标点位置*/
.A1{left:21px;top:10px;}
.A2{left:21px;top:50px;}
.A3{left:21px;top:90px;}
.A4{left:21px;top:130px;}
.B1{left:51px;top:76px;}
.C1{left:83px;top:10px;}
.C2{left:83px;top:50px;}
.C3{left:83px;top:90px;}
.C4{left:83px;top:130px;}
.scroll{FILTER:progid:DXImageTransform.Microsoft.BasicImage(Rotation=2);height:1px}
.index {
font-size: 16px;
font-weight: bold;
text-align: center;
width:14px;
height:36px;
position: absolute;
left:5px;
top:0px;
}
.end {
font-size: 16px;
font-weight: bold;
text-align: center;
width:14px;
height:36px;
position: absolute;
right:5px;
bottom:0px;
}
.red { color: #ff0000; }
.font{font-size:34px;}
</style>
注意:为了真实的还原一张扑克牌,我在第二张扑克牌中加入滤镜功能,让下面的图案垂直翻转,但这种方法会造成图片不清晰,并且这种方法只有IE系列的浏览器才能识别,如果高手们有其它更好的办法,请不吝赐教!
提示:您可以先修改部分代码再运行
本站原创:biny
前面介绍了制作的扑克牌是用图片的方式来实现,它逼真地还原了扑克牌。下面介绍一种比较简单的实现方法,这种方法不用一张图片。
原理是:用四个特别字符的html标签来实现。
1.♠表示黑桃
2.♥表示红心
3.♣表示梅花
4.♦表示方块
先写结构:
<div class="card" style="left:10px;top:20px;">
<div class="front">
<b class="index">9<br />♠</b>
<span class="A1">♠</span>
<span class="A2">♠</span>
<span class="A3">♠</span>
<span class="A4">♠</span>
<span class="B1">♠</span>
<span class="C1">♠</span>
<span class="C2">♠</span>
<span class="C3">♠</span>
<span class="C4">♠</span>
<b class="end">♠<br/>9</b>
</div>
</div>
再写样式:
<style type="text/css">
.card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;}
/*中间图片通用设置*/
span{
display:block;
width:20px;
height:30px;
line-height:30px;
position:absolute;
font-size:26px;
left: 22px;
top: 130px;
}
/*小图片通用设置*/
/*数字通用设置*/
b{display:block;width:15px;height:10px; position:absolute;font-size:10px;text-align:center;font-weight:bold;overflow:hidden;}
/*各坐标点位置*/
.A1{left:21px;top:10px;}
.A2{left:21px;top:50px;}
.A3{left:21px;top:90px;}
.A4{left:21px;top:130px;}
.B1{left:51px;top:76px;}
.C1{left:83px;top:10px;}
.C2{left:83px;top:50px;}
.C3{left:83px;top:90px;}
.C4{left:83px;top:130px;}
.scroll{FILTER:progid:DXImageTransform.Microsoft.BasicImage(Rotation=2);height:1px}
.index {
font-size: 16px;
font-weight: bold;
text-align: center;
width:14px;
height:36px;
position: absolute;
left:5px;
top:0px;
}
.end {
font-size: 16px;
font-weight: bold;
text-align: center;
width:14px;
height:36px;
position: absolute;
right:5px;
bottom:0px;
}
.red { color: #ff0000; }
.font{font-size:34px;}
</style>
注意:为了真实的还原一张扑克牌,我在第二张扑克牌中加入滤镜功能,让下面的图案垂直翻转,但这种方法会造成图片不清晰,并且这种方法只有IE系列的浏览器才能识别,如果高手们有其它更好的办法,请不吝赐教!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <mce:style type="text/css"><!-- .card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;} /*中间图片通用设置*/ span{ display:block; width:20px; height:30px; line-height:30px; position:absolute; font-size:26px; left: 22px; top: 130px; } /*小图片通用设置*/ /*数字通用设置*/ b{display:block;width:15px;height:10px; position:absolute;font-size:10px;text-align:center;font-weight:bold;overflow:hidden;} /*各坐标点位置*/ .A1{left:21px;top:10px;} .A2{left:21px;top:50px;} .A3{left:21px;top:90px;} .A4{left:21px;top:130px;} .B1{left:51px;top:76px;} .C1{left:83px;top:10px;} .C2{left:83px;top:50px;} .C3{left:83px;top:90px;} .C4{left:83px;top:130px;} .scroll{FILTER:progid:DXImageTransform.Microsoft.BasicImage(Rotation=2);height:1px} .index { font-size: 16px; font-weight: bold; text-align: center; width:14px; height:36px; position: absolute; left:5px; top:0px; } .end { font-size: 16px; font-weight: bold; text-align: center; width:14px; height:36px; position: absolute; right:5px; bottom:0px; } .red { color: #ff0000; } .font{font-size:34px;} --></mce:style><style type="text/css" mce_bogus="1">.card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;} /*中间图片通用设置*/ span{ display:block; width:20px; height:30px; line-height:30px; position:absolute; font-size:26px; left: 22px; top: 130px; } /*小图片通用设置*/ /*数字通用设置*/ b{display:block;width:15px;height:10px; position:absolute;font-size:10px;text-align:center;font-weight:bold;overflow:hidden;} /*各坐标点位置*/ .A1{left:21px;top:10px;} .A2{left:21px;top:50px;} .A3{left:21px;top:90px;} .A4{left:21px;top:130px;} .B1{left:51px;top:76px;} .C1{left:83px;top:10px;} .C2{left:83px;top:50px;} .C3{left:83px;top:90px;} .C4{left:83px;top:130px;} .scroll{FILTER:progid:DXImageTransform.Microsoft.BasicImage(Rotation=2);height:1px} .index { font-size: 16px; font-weight: bold; text-align: center; width:14px; height:36px; position: absolute; left:5px; top:0px; } .end { font-size: 16px; font-weight: bold; text-align: center; width:14px; height:36px; position: absolute; right:5px; bottom:0px; } .red { color: #ff0000; } .font{font-size:34px;}</style> </head> <body> <!--9字符--> <div class="card" style="left:10px;top:20px;"> <div class="front"> <b class="index">9<br />♠</b> <span class="A1">♠</span> <span class="A2">♠</span> <span class="A3">♠</span> <span class="A4">♠</span> <span class="B1">♠</span> <span class="C1">♠</span> <span class="C2">♠</span> <span class="C3">♠</span> <span class="C4">♠</span> <b class="end">♠<br/>9</b> </div> </div> <!--9字符--> <div class="card" style="left:175px;top:20px;"> <div class="front red"> <b class="index">9<br />♥</b> <span class="A1">♥</span> <span class="A2">♥</span> <span class="A3">♥</span> <span class="A4">♥</span> <span class="B1">♥</span> <span class="C1">♥</span> <span class="C2">♥</span> <span class="C3">♥</span> <span class="C4">♥</span> <b class="end">♥<br/>9</b> </div> </div> <!--9字符--> <div class="card" style="left:340px;top:20px;"> <div class="front red"> <b class="index">9<br />♣</b> <span class="A1">♣</span> <span class="A2">♣</span> <span class="A3 scroll">♣</span> <span class="A4 scroll">♣</span> <span class="B1">♣</span> <span class="C1">♣</span> <span class="C2">♣</span> <span class="C3 scroll">♣</span> <span class="C4 scroll">♣</span> <b class="end scroll">9<br/>♣</b> </div> </div> <!--9字符--> <div class="card" style="left:510px;top:20px;"> <div class="front red"> <b class="index">9<br />♦</b> <span class="A1 font">♦</span> <span class="A2 font">♦</span> <span class="A3 font">♦</span> <span class="A4 font">♦</span> <span class="B1 font">♦</span> <span class="C1 font">♦</span> <span class="C2 font">♦</span> <span class="C3 font">♦</span> <span class="C4 font">♦</span> <b class="end">♦<br/>9</b> </div> </div> </body> </html>
提示:您可以先修改部分代码再运行
相关文章推荐
- 制作一幅扑克牌系列二---不用图片的纯css实现方法
- 制作一幅扑克牌系列一---css sprites图片背景优化技术
- CSS+DIV制作一幅扑克牌实例系列教程
- 制作一幅扑克牌系列一---css sprites图片背景优化技术
- 用CSS实现图片替换文字三种方法(Image replacement )
- 不用背景图片,只用css代码实现面包屑样式
- CSS图片垂直居中实现方法详解
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
- JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
- html+css使用空白标签巧妙实现不同尺寸的图片在容器里垂直居中的方法
- JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
- CSS针对IE6实现网页图片底部留出空白的方法
- 用css来控制图片大小显示的实现方法与代码
- html+css+js(+JQuery)制作扑克牌图片切换效果
- IE6中CSS方法实现PNG图片透明