CSS3教程

当前位置: HTML5技术网 > CSS3教程 > CSS3制作价格标牌

CSS3制作价格标牌

一个使用CSS3制作价格标牌的例子,这个例子相对来比较简单,最主要的关键点是如何使用border-radius来制作圆形的效果。同时这个例子中还运用了CSS3的渐变,阴影。


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制作的分页导航

6. CSS3制作购物车下拉列表

7. CSS3制作Login栏

8. CSS3制作分步注册表单

9. CSS3制作下拉菜单

10. CSS3制作下拉工具条

本文来源:https://www.51html5.com/a896.html

点击展开全部

﹝CSS3制作价格标牌﹞相关内容

「CSS3制作价格标牌」相关专题

其它栏目

也许您还喜欢