CSS渐变统计柱形图

用作图工具作一个渐变的长度.看起来能好看一点(宽:187px;高15px)
本来设想是当12%时,图片从左到12%的位置显示,余下的88%不显示,但不占地(看起来和1px的图片底没什么区别).下午时去网罗了一班.发现不占地是不太可能的.
要隐藏图片余下的百分比,先想到了评分.亮和暗用了一张图片,各占图片总高度的一半.我写下了:
<div style="background:url(...) 12% left;width:187px;height:15px;"></div>
依次从10%-100%，见不到效果,换<span></span>这个是可以不过在盒子内必须要有内容.
昨天晚上没写出来.下午google了也没有找到类4渐变的.不过从其中一个示例中得到了灵感.
URL:http://apples-to-oranges.com/blog/post/css-for-bar-graphs/?id=55
中的:Complex CSS Bar Graph
马上得到了这个:

无标题文档

dl{margin:0;padding:0;width:187px;}
dd{position:relative;display:block;float:left;width:187px;height:15px; margin:0;border:1px solid #eee;}
* html dd{ float: none; }
dd div{position:relative;background:url("../image/default/Percent.gif");height:15px;width:100%;text-align:right;}


55%

55%

55%

55%

65%

75%

85%

95%

100%

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

有同需求的兄弟可以参考一下

赞 (0)

相关推荐

  • CSS渐变统计柱形图

    用作图工具作一个渐变的长度.看起来能好看一点(宽:187px;高15px) 本来设想是当12%时,图片从左到12%的位置显示,余下的88%不显示,但不占地(看起来和1px的图片底没什么区别).下午时去网罗了一班.发现不占地是不太可能的. 要隐藏图片余下的百分比,先想到了评分.亮和暗用了一张图片,各占图片总高度的一半.我写下了: <div style="background:url(...) 12% left;width:187px;height:15px;"></di

  • CSS 渐变背景的6个演示代码

    CSS渐变背景 var setGradient = (function(){ var p_dCanvas = document.createElement('canvas'); var p_useCanvas = !!( typeof(p_dCanvas.getContext) == 'function'); var p_dCtx = p_useCanvas?p_dCanvas.getContext('2d'):null; var p_isIE = /*@cc_on!@*/false; try{

  • CSS渐变文本效果的两种方法比较

    CSS渐变文本效果的两种方法比较

    是否想不用photoshop来创建一个带渐变的标题文字吗? 这里用一个简单的css技巧来向你展示如何仅仅使用css和png图片来制造这种效果. 经测试这种方法适合大多数主流浏览器.当然, IE6需要一个支持透明PNG的Hack(值得庆幸的是微软正在极力的将用户的IE6自动升级到IE7^.^, 延伸阅读:Warning: An IE7 Auto-Update Is Coming Soon) 优势 这是纯粹的css技巧,没有使用任何ja脚本或者flash, 并且它可以在大多数浏览器上正常工作(IE6

  • 《CSS3实战》笔记--渐变设计（三)

    《CSS3实战》笔记--渐变设计（三)

    IE浏览器引擎的CSS渐变实现方法 IE并不支持CSS渐变,但是提供了渐变滤镜,可以用来实现简单的渐变效果. 基本语法 该参数的参数说明如下: enabled:设置或检索滤镜是否激活.可选布尔值,包括 true 和 false,默认值为 true ,表示激活状态. startColor :设置或检索色彩渐变的开始颜色和透明度.可选项,其格式为#AARRGGBB.AA,RR,GG,BB为十六进制正整数,取值范围为00~FF.RR指定红色值,GG指定绿色值,BB指定蓝色值,AA指定透明度,00是完全

  • 《CSS3实战》笔记--渐变设计（二)

    《CSS3实战》笔记--渐变设计（二)

    Gecko引擎的CSS渐变设计直线渐变基本语法 -moz-linear-gradient([<point> || <angle>,]?<stop>,<stop>[,<stop>]*) 参数说明: <point>:定义渐变起始点,取值包含数值,百分比,也可以使用关键字,其中left,center 和 right 关键字定义 x 轴坐标,top,center 和 bottom 关键字定义 y 轴坐标.当指定一个值时,另一个值默认为 cen

  • 《CSS3实战》笔记--渐变设计（一)

    《CSS3实战》笔记--渐变设计（一)

    基于CSS的渐变与图片渐变相比,最大的优点是便于修改,同时支持无级缩放,过渡更加自然.目前,实现CSS渐变的只有基于Webkit和Gecko引擎的浏览器,基于Presto引擎的Opera浏览器暂时不支持渐变,基于Trident的IE虽然可以通过滤镜的方式实现,但并不提倡. Webkit引擎(Safari 4及以上版本)的CSS渐变设计 基本语法: -webkit-gradient(<type>,<point>[,<radius>]?,<point>[,<

  • 利用CSS制作3D动画

    利用CSS制作3D动画

    目录 CSS 3D 基础知识 使用 transform-style 启用 3D 模式 利用 perspective & perspective-origin 设置 3D视距,实现透视/景深效果 通过绘制 Webpack Logo 熟悉 CSS 3D 实现文字的 3D 效果 3D 氖灯文字效果 利用 CSS 3D 配合 translateZ 实现真正的文字 3D 效果 利用距离.角度及光影构建不一样的 3D 效果 3D 计数器 空间效果 空间 3D 效果热身 利用图片素材 3D 无限延伸视角动画

  • XSLT轻松入门第一章：XSLT的概念

    XSLT轻松入门第一章：XSLT的概念

    1.XSLT的概念 1.1 什么是XSLT 1.2 为什么要用XSLT 1.3 XSLT的历史 1.4 什么是XPath 1.5 XSLT和CSS的比较 1.6 XSLT和IE5 1.XSLT的概念 我们首先来澄清一个概念,大家可能听说过XSL(eXtensible Stylesheet Language),XSL和我们这里说的XSLT从狭义上理解是一样的,而按照W3C的标准,XSLT的说法更严格些,因此我们在文章中统一使用XSLT的称法.它们之间具体的关系我们会在下面讲述. 1.1 什么是XS

  • jQuery 限制输入字符串长度

    jQuery 限制输入字符串长度

    我们后台做程序的时候,比如录入一篇文章,文章会有摘要,我们希望文章的字符长度是我们可以控制的,我们不希望它太长,比如限制只能输入250个字符,下面的代码实现了这种功能. 先来看一下效果图 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/javascri

  • jQuery扩展实现text提示还能输入多少字节的方法

    jQuery扩展实现text提示还能输入多少字节的方法

    本文实例讲述了jQuery扩展实现text提示还能输入多少字节的方法.分享给大家供大家参考,具体如下: 1.添加jQuery自定义扩展 $(function($){ // tipWrap: 提示消息的容器 // maxNumber: 最大输入字符 $.fn.artTxtCount = function(tipWrap, maxNumber){ var countClass = 'js_txtCount', // 定义内部容器的CSS类名 fullClass = 'js_txtFull', //

随机推荐