闲着没事儿 用CSS3 写了个小东西，效果见下图：

主要用到了  transform , box-shadow , text-shadow, transition , border-radius , gradient [CSS3 渐变] 等几个属性
总体来说 现在的CSS3属性还需要各自增加前缀，使得整个文件比较繁冗。 gradient 在各个浏览器下表现还是有所不同。

但是在chrome下，表现都很良好。

现在没空间用了 ，只能贴代码了。等有了合适的空间再贴DEMO.

Oo,http://stuffandnonsense.co.uk/content/demo/cannybill/21-10-2009/pricing.html 这儿是原效果。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Bill Boxes</title>
<style>
* { margin:0; padding:0; }
body { background:#163755; color:#202020; font-family:Helvetica, sans-serif; font-size:12px; padding:40px 0 0; }
a { text-decoration:none; color:#202020; }
a:hover { text-decoration:none; }
.blist { margin:0 auto; width:880px; height:368px; }
.blist li { float:left; width:218px; height:364px; border:1px solid #dfe7ef; -webkit-transition:all linear .2s; -moz-transition:all linear .2s; -o-transition:all linear .2s; transition:all linear .2s; background:#fff; list-style:none; text-align:center; }
.blist li:hover { -webkit-transform:scale(1.05, 1.05); -moz-transform:scale(1.1, 1.1); -o-transform:scale(1.1, 1.1); transform:scale(1.1, 1.1); -webkit-box-shadow:0 0 10px rgba(102,102,102,.5); -moz-box-shadow:0 0 10px rgba(102,102,102,.5); -o-box-shadow:0 0 10px rgba(102,102,102,.5); box-shadow:0 0 10px rgba(102,102,102,.5); border-radius:12px; }
.blist li h2 { text-align:center; letter-spacing:2px; font-weight:100; padding-top:20px; height:28px; font-size:22px; }
.blist li h3 { text-align:center; font-weight:100; height:26px; margin-bottom:12px; border-bottom:1px solid #dfe7ef; margin:0 22px 30px; }
.blist li p { text-align:center; height:160px; line-height:18px; }
.blist li a.btn { display:block; width:152px; height:46px; padding-top:8px; text-align:center; color:#fff; font-size:16px; border-radius:10px; margin:0 auto; text-shadow:1px 1px 1px rgba(102,102,102,.8); font-weight:900; -webkit-transition:all linear .2s; -moz-transition:all linear .2s; -o-transition:all linear .2s; transition:all linear .2s; }
.blist li a.btn:hover { -webkit-box-shadow:0 0 12px rgba(51,51,51,.8); -moz-box-shadow:0 0 12px rgba(51,51,51,.8); -o-box-shadow:0 0 12px rgba(51,51,51,.8); box-shadow:0 0 12px rgba(51,51,51,.8); }
.blist li a.b1 { background-color:#cdaf4d; background-repeat : no-repeat; background-image : -webkit-gradient(linear, left top, left bottom, from(#e4c255), to(#bca147)); background-image : -moz-linear-gradient(left top, left bottom, from(#e4c255), to(#bca147)); }
.blist li a.b2 { background-color:#e1750c; background-repeat :  no-repeat; background-image : -webkit-gradient(linear, left top, left bottom, from(#fc9501), to(#c04e19)); background-image : -moz-linear-gradient(left top, left bottom, from(#bc4848), to(#7e3131)); }
.blist li a.b3 { background-color:#b94747; background-repeat :  no-repeat; background-image : -webkit-gradient(linear, left top, left bottom, from(#b94747), to(#7e3131)); background-image : -moz-linear-gradient(left top, left bottom, from(#b94747), to(#7e3131)); }
.blist li a.b4 { background-color:#7967a4; background-repeat :  no-repeat; background-image : -webkit-gradient(linear, left top, left bottom, from(#7866a4), to(#5c4f80)); background-image : -moz-linear-gradient(left top, left bottom, from(#7866a4), to(#5c4f80)); }
.blist li a.btn span { display:block; padding-top:2px; font-weight:100; }
</style>
</head>

<body>
<ul class="blist">
  <li>
    <h2>Basic</h2>
    <h3>£3.99 ($6 US)</h3>
    <p> 15 active clients<br>
      Unlimited invoices per month<br>
      Unlimited staff logins<br>
      Free upgrades<br>
      RapidSSL Certificate<br>
      Unlimited telephone & email support </p>
    <a href="#nogo" class="btn b1">Sign Up<span>30 day free trial</span></a> </li>
  <li>
    <h2>Small business </h2>
    <h3>£6.99 ($12 US)</h3>
    <p> 15 active clients<br>
      Unlimited invoices per month<br>
      Unlimited staff logins<br>
      Free upgrades<br>
      RapidSSL Certificate<br>
      Unlimited telephone & email support </p>
    <a href="#nogo" class="btn b2">Sign Up<span>30 day free trial</span></a> </li>
  <li>
    <h2>Professional </h2>
    <h3>£14.99 ($24 US)</h3>
    <p> 15 active clients<br>
      Unlimited invoices per month<br>
      Unlimited staff logins<br>
      Free upgrades<br>
      RapidSSL Certificate<br>
      Unlimited telephone & email support </p>
    <a href="#nogo" class="btn b3">Sign Up<span>30 day free trial</span></a> </li>
  <li>
    <h2>Enterprise </h2>
    <h3>£29.99 ($48 US)</h3>
    <p> 15 active clients<br>
      Unlimited invoices per month<br>
      Unlimited staff logins<br>
      Free upgrades<br>
      RapidSSL Certificate<br>
      Unlimited telephone & email support </p>
    <a href="#nogo" class="btn b4">Sign Up<span>30 day free trial</span></a> </li>
</ul>
</body>

</html>

转载于:https://www.cnblogs.com/trance/archive/2011/12/06/2277959.html

CSS3 写的个小东西相关推荐

  1. 把之前写的一个小东西代码分享出来

    大家接触到流的输出输入和GUI就会自己写了,其实soeasy 所以不好意思拿出来,毕竟是小白,主要还是因为懒,FileDialog也懒得弄了,讲道理界面太丑,加了dialog也挺low,自己想留着用的 ...

  2. 写了一个svg七巧板拼图的小东西

    写了一个svg七巧板拼图的小东西,可以拖动移动,改变颜色边框,旋转角度,然后保存图片. 保存图片用到的html2canvas.js和canvg.js,canvg用来将svg转换成canvas,html ...

  3. G++ 4.4.7 无法编译模板程序，Vs可以,和解?智者尾部留言,本人第一次使用vs pro,通常并且习惯在linux下写些小东西,虽然程序简单;...

    G++ 4.4.7 无法编译模板程序,Vs可以,和解?智者尾部留言,本人第一次使用vs pro,通常并且习惯在linux下写些小东西,虽然程序简单; vs 模板编译运行Ok \ linux g++ 4 ...

  4. 硬币 假硬币 天平_小东西叫硬币

    硬币 假硬币 天平 During the last 1,5 years, I've been traveling a lot. Apart from my must-have things like ...

  5. 【kimol君的无聊小发明】—用python写截屏小工具

    [kimol君的无聊小发明]-用python写截屏小工具 前言 一.技术实现 1. 相关库 2. 定义窗口 3. 绘制工具条 4. 定义事件函数 二.后续改进 写在最后 前言 今天我看了一下自己的文件 ...

  6. PHP写个Web小工具来监控你的加密币

    编写一个网页小工具来监控你的加密币投资组合的价值,只需要非常简单的PHP和HTML技能就行. 文章目的超级简单,但我认为可能有很多人会加入加密货币的投资,在某个地方拥有一个网站,并想建立一个私人(或者 ...

  7. 用html+css3写一个小丸子的头像

    启发是看到一篇博客用css3写的一个叮当猫http://www.cnblogs.com/jr1993/p/4448025.html,于是自己就想写个小丸子了. <!DOCTYPE html> ...

  8. 无师自通-自己学写脚本，小明外挂脚本代码教程 转载

    无师自通-自己学写脚本,小明外挂脚本代码教程 转载 2011-02-03 19:47:20| 分类: 石器脚本 assa | 标签:walkpos 指令 对话框 跳转 道具 |字号 订阅 下载LOFT ...

  9. c 语言500行小游戏代码,500行代码使用python写个微信小游戏飞机大战游戏.pdf

    500行行代代码码使使用用python写写个个微微信信小小游游戏戏飞飞机机大大战战游游戏戏 这篇文章主要介绍了500行代码使用python写个微信小游戏飞机大战游戏,本文通过实例代码给大家介绍的非常详 ...

  10. 在线签名、canvas手写在线签名——小程序端实现在线签名，手写电子签名canvas

    在线签名.canvas手写在线签名--小程序端实现在线签名,手写电子签名canvas 近期公司准备接一个政府的小项目,里头有一个在线签名的需求,老板让我研究一下.于是就...开始思考: 在线手写签名, ...

最新文章

  1. Oracle的括号转义字符,SQL中通配符、转义符与括号的使用
  2. Webpack 打包学习
  3. 让你真正体验一次主板超频的步骤以及成功的快乐
  4. delay 芯片时序output_【第二章 STA概念 上】静态时序分析圣经翻译计划
  5. 五角数 Exercise06_01
  6. Java 8 Lambda 表达式解析 1
  7. java byte binary_java byte 与 binary 转换
  8. linux 定位 踩内存_互联网线上系统故障定位方法论
  9. jsp之jsp内置对象
  10. 让你的软件支持繁体中文
  11. 网易云音乐ncm格式转换为mp3
  12. SpringBoot+Element-UI实现加载ActiveX控件
  13. Otsu算法——最大类间方差法（大津算法）
  14. 100万“音乐难民”陪伴虾米到最后一刻
  15. 计算机科学与工程学院团委,湖南科技大学计算机科学与工程学院
  16. 如何理解Ture Time
  17. 汇编语言（一）-基础知识
  18. Java程序员最喜欢的11款免费IDE编辑器
  19. matlab中filtfilt函数解析
  20. 图像的灰度化灰度值的读取Matlab

热门文章

  1. 女友的一个建议，让26岁程序员做了个价值 10 亿美元的 App
  2. 一个 Spring Boot 项目该包含哪些？
  3. 来自Google的面试题，真的有趣！果然与众不同
  4. 聆听python之父诠释python的精神和文化
  5. 大厂首选，为什么 SRE 比传统运维更抢手?
  6. Linux中级之netfilter/iptables应用及补充
  7. C89:论常用的字符串函数
  8. OpenStack-Ocata版+CentOS7.6 云平台环境搭建 — 3.安装配置OpenStack认证服务（keystone）...
  9. Linux安装Tomcat-Nginx-FastDFS-Redis-Solr-集群——【第十集之Nginx反向代理原理】（有参考其他文章）...
  10. 使用 Docker 一步搞定 ZooKeeper 集群的搭建