CSS3制作价格标牌
一个使用CSS3制作价格标牌的例子,这个例子相对来比较简单,最主要的关键点是如何使用border-radius来制作圆形的效果。同时这个例子中还运用了CSS3的渐变,阴影。
HTML CODE
CSS CODE
下载:CSS3PriceTag.zip
HTML CODE
<div class="box">
<div class="round red">
<span><b class="sup">$</b>99</span>
<span>*Premium</span>
</div>
<div class="round blue">
<span>FREE</span>
<span>*Trial Only</span>
</div>
</div>
CSS CODE
html{
background-image: url(data:image/jpeg;base64,...;}
body{
color:#fff;
background:-webkit-radial-gradient(circle,rgba(255,255,255,.1),rgba(255,255,255,0));
background:-moz-radial-gradient(circle,rgba(255,255,255,.1),rgba(255,255,255,0));
background:-o-radial-gradient(circle,rgba(255,255,255,.1),rgba(255,255,255,0));
background:-ms-radial-gradient(circle,rgba(255,255,255,.1),rgba(255,255,255,0));
background:radial-gradient(circle,rgba(255,255,255,.1),rgba(255,255,255,0));
height: 100%;
padding: 50px;
}
.box{
width: 350px;
text-align:center;
margin:50px auto;
}
.round{
width: 130px;
height: 140px;
background: #fff;
border-radius: 65px 0 65px 65px;
float: left;
margin-right: 20px;
}
.red{
background: -webkit-linear-gradient(top,#f9443e,#c93532);
background: -moz-linear-gradient(top,#f9443e,#c93532);
background: -o-linear-gradient(top,#f9443e,#c93532);
background: -ms-linear-gradient(top,#f9443e,#c93532);
background: linear-gradient(top,#f9443e,#c93532);
border:1px solid #c8544f;
}
.blue{
background: -webkit-linear-gradient(top,#64e7fe,#1ac7eb);
background: -moz-linear-gradient(top,#64e7fe,#1ac7eb);
background: -o-linear-gradient(top,#64e7fe,#1ac7eb);
background: -ms-linear-gradient(top,#64e7fe,#1ac7eb);
background: linear-gradient(top,#64e7fe,#1ac7eb);
border:1px solid #1dadd3;
}
.sup {
vertical-align:super;
font-size: 20px;
}
.round span:first-child{
display:block;
padding-top: 20px;
height: 55px;
font:50px bold "Impact";
}
.round span:last-child{
height: 18px;
font:italic normal 13px "arial";
color:#ffdc7c;
}
.red span:first-child{
margin-bottom: 5px;
padding-bottom:5px;
text-shadow:0 1px 1px #000;
border-bottom: 1px solid #b03130;
box-shadow: 0 1px 0 #dd5a59;
}
.blue span:first-child{
color:rgba(0,160,206,.8);
text-shadow:0 1px 2px #7ee5f5, 0 0 0 #026e97;
}
.blue span:last-child{
color:#fff;
}
下载:CSS3PriceTag.zip
【CSS3制作价格标牌】相关文章
1. CSS3制作价格标牌
2. 利用CSS3制作动画效果
3. 用css3制作纸张效果
4. 利用CSS3制作动画效果
5. CSS3制作的分页导航
7. CSS3制作Login栏
8. CSS3制作分步注册表单
9. CSS3制作下拉菜单
10. CSS3制作下拉工具条
本文来源:https://www.51html5.com/a896.html
﹝CSS3制作价格标牌﹞相关内容
- css3制作日历风格登陆表单
- CSS3制作登录表单
- CSS3制作莲花开放
- 用CSS3制作一个令人印象深刻的产品展示
- 用CSS3创建动画价格表
- 一个简单的冻结HTML表格标题jQuery插件Freezeheader
- B2C电子商务价格大战再演 赢得消费者重在服务
- 排队党挤爆苹果店 iphone4s价格暴跌
- 由于漏洞及价格问题,美高校要求将iPhone 4S退货
- CSS3+jQuery制作灯箱画廊