藤藤每日一练——CSS3制作价格标牌

作者：大漠 日期：2012-09-21 点击：267
css3
gradient
border-radius
藤藤每日一练
入门级
藤藤每日一练——CSS3制作价格标牌

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

demodownload

HTML 结构

<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代码

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;
}

demodownload

如需转载，烦请注明出处：http://www.w3cplus.com/demo/css3-price-tag.html

返回顶部