手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:css

CSS透明属性详解

对于CSS的各种特效,在网页上是被用的很多,但,有一些是在IE下独有的,比如滤镜。。。(有专门的程序现在可以处理哦,已经实现。黑黑,当然不是我写的)
以下内容就是帕兰映像对于CSS透明属性进行的解释。他的V7模版最终我还是没有用。准备等这次项目结束后更换到wordpress下,或许,我会请朋友帮做模版和开发插件了。
相信应该有人用吧?

.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

上面的几个属性分别是:

  • opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持Firefox, Safari和 Opera.
  • filter:alpha(opacity=50); 这个是为IE6设的,可取值在0-100,其它三个0到1.
  • -moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
  • -khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。

CSS透明度继承问题

但CSS的透明属性涉及到一个继承问题,当为父级元素设置透明度后,子元素将自动继承其透明度,比如本站的一个效果:

大小: 41.85 K
尺寸: 425 x 189
浏览: 1127 次
点击打开新窗口浏览全图

即使你又为子元素指定透明度为1也是无效的。

对于子元素是文字的情况,我的解决方法一般是如果多少还能够看清,就不管。另一个折衷的方法是,为文本子元素指定一个相对更深的颜色。也就是说,当 子元素继承透明度后,所得到的文本颜色正好就是你想要的。前提是,这个颜色还有加深的可能,和需要详细的计算颜色和透明度的值。

还有“取消透明度继承”的说法,这个说法是不太准确的,据我个人所知,没有任何取消透明度继承的方法。只能说,当想要实现“多个元素覆盖,只让指定的元素透明”时,可以使用的一些Hack。

搜了一下,找到一个不错的实现这种效果的方法 – 一个关于透明继承度的问题,有兴趣的朋友可以看看。原理很简单,添加一个空元素作为透明层,和不想透明但是要实现覆盖效果的元素为同级元素。父级元素使用position:relative定位; 两个子元素使用position:absolute定位,实现覆盖。

来源于 CSS透明属性详解 | 帕兰映像

Tags: css

Table2CSS Converter

Table2CSS是一款可以将表格布局网页完美转换 成DIV+CSS方式的软件。支持外部CSS,支持网页及目录 批量转换。

够吸引你了吧?

» 阅读全文

Tags: convert, table, css

9 个基于JavaScript 和 CSS 的 Web 图表框架

CB纯粹是一堆程序员发泄的地方,因此,在上面不可避免的会出现一些好的东西,比如这个:9 个基于JavaScript 和 CSS 的 Web 图表框架

图表,我个人还是觉得用FLASH来做比较好,比较有动感,而且现在所有浏览器都支持FLASH。它还是比较有前途的。FLASH和JS在运行的时候占用CPU应该是JS相对较高吧?FLASH图表还是有一些很不错的。比如open flash chart,就是一个开源的FLASH图片控件。

不过,标题是JS的,我当然还是把CB原文贴过来喽:http://www.cnbeta.com/articles/79418.htm

原文如下:

新闻来源:woork.blogspot.com
jQuery, MooTools, Prototype 等优秀的 JavaScript 框架拥有各种强大的功能,包括绘制 Web 图表,使用这些框架以及相应插件,我们可以非常轻松地实现曲线图,圆饼图,柱状图等 Web 图表的绘制,而不必象以往那样通过复杂的 Flash 技术实现。本文介绍了9个优秀的基于 JavaScript 与 CSS  的 Web 图表框架。
jQuery, MooTools, Prototype 等优秀的 JavaScript 框架拥有各种强大的功能,包括绘制 Web 图表,使用这些框架以及相应插件,我们可以非常轻松地实现曲线图,圆饼图,柱状图等 Web 图表的绘制,而不必象以往那样通过复杂的 Flash 技术实现。本文介绍了9个优秀的基于 JavaScript 与 CSS 的 Web 图表框架。
1. Flot


Flot 是一个纯粹的 jQuery JavaScript 绘图库,可以在客户端即时生成图形,使用非常简单,支持放大缩小以及鼠标追踪等交互功能。该插件支持 IE6/7/8, Firefox 2.x+, Safari 3.0+, Opera 9.5+ 以及 Konqueror 4.x+。使用的是 Safari 最先引入的 Canvas 对象,目前所有主流浏览器都支持该对象,除了 IE, 因此在 IE中使用 JavaScript 进行模拟。这里有一些实例
2. JS Charts


JS Charts 是一个免费的基于 JavaScript 的图表生成器,表格绘制非常简单,几乎不需要编码,也不需要插件和服务器模块,使用XML 或 JavaScript 数组缓存数据。
3. TableToChart
TableToChart 是一个 MooTools 脚本,可以将 HTML Table 对象中存储的数据绘制成图表。你可以使用 table 标签生成图表,柱状图,曲线图,圆饼图等。
4. PlotKit
PlotKit 是一个 JavaScript 绘图库,支持 HTML Canvas 标签,也支持 SVG。
5. Yahoo UI Charts Control


YUI Charts Control 可以在网页上将表格数据转换为图表,支持柱状图,曲线图以及圆饼图。支持 DataSource 工具,可设置的轴,鼠标盘旋提示,图表组合,以及皮肤等功能。
6. ProtoChart


ProtoChart 是一个基于 Prototype 和 Canvas 标签的开源库,这个库深受 Flot, Flotr, Plotkit 等启发,支持曲线图,柱状图,圆饼图等,可以在同一个图表上显示多套数据,支持可定制的图例,网格,边界以及背景图。支持 IE6/7, Firefox 2/3 以及 Safari,甚至支持 iPhone.
7. EJSChart


EJSChart 支持鼠标追踪,鼠标事件,按键追踪与事件,缩放,滚动,交互等功能,将用户体验上升到一个新高度。支持曲线图,面积图,离散图,圆饼图,柱状图等形式,拥有完备文档的属性和方法可以帮助实现很好的定制。
8. fgCharting
fgCharting 是一个很出色的 jQuery 插件,支持多种图形。
9. Pure Css Data Chart


以往的数据展示往往通过 flash 实现,现在,我们可以通过纯粹的 CSS 实现类似的功能。CSSGlobe 有一个非常实用的教程帮你实现基于 CSS 的绘图,甚至不需要 JavaScript。

本文国际来源:http://woork.blogspot.com/2009/03/useful-scripts-to-plot-charts-in-web.html
中文翻译来源:COMSHARP CMS 官方网站

Tags: css, chart, framework

CSS背景

不多说啥了。在网上看到这篇文章,难得是有详细介绍的。。虽然这个功能我很多时候其实已经在用了,但。那都是直接拿来用的,并没有深刻的研究过。今天这里终于看到一个有注释的,就贴上来看看。

这种用法,是被YAHOO所推荐的。因为。这样的用法,降低了图片的下载量。而且并在一起,并不会给图片的大小增加很多。

原文:http://iruif.cn/swd/?p=25
这里只贴重要的内容。请原作者不要伤心。谢谢


图片文件为:

大小: 6.41 K
尺寸: 14 x 166
浏览: 1301 次
点击打开新窗口浏览全图

首先我们得控制好要应用小图标的对象的高度. 否则到时候这个图标就会显示异常了.

比如说我们要给 li 标签使用这个小东东, 那么我们就得写上这样的代码:

CSS代码
  1. li {   
  2. height12px/* 这个高度等于每个小图标的高度 */   
  3. line-height12px/* 这个同上. 但只是有些时候需要写这个而已. */   
  4. backgroundurl('icons.gif') 0 -12px/* 这里的 -12px 就是定义你要使用第几个图标. 如果每个图标的高度都是 12px 的话, 那么我要使用第 N 个图标的话就得写 n*12 . */   
  5. padding-top: 0; /* 这个要严格限定为 0 . 否则呢, 哼哼哈莉.. */   
  6. padding-bottom: 0; /* 这个也一样.. */   
  7. padding-left14px/* 这个肯定是要设定一个值的.. 否则小图标就会被文字覆盖掉.. padding-right 可以设定也可以不设定.. */   
  8. margin2px 0; /* 如果要设定每个 li 标签之间的距离话, 就要改这个了.. */   
  9. overflowhidden/* 在有些情况下需要写这个. 具体作用我就不多解释了. */   
  10. }  
显然, 把小图标都放到一个文件里的话会带来很多的问题. 比如要限定宽度和高度 [也就是内容会显示不完整] , 并且 padding 也将无法使用 [也就是会影响到 border 等属性的效果] .
当然也有解决办法. 那就是 — 把每个小图标的距离拉开, 或者干脆把他们都拆成单独的文件..


如果不明白可以问问原作者。。。

 

Tags: css, 背景色, position

好东西,不得不贴,继续上传两个文件

今天看到一个好东西,是jquery的API,这次的API不是象以前那样用XML的,也不是那种根据官方的数据简单的汉化而来的,这次。。。。阿健同学编译成了CHM文件(虽然以前的也是CHM文件),并且有索引和搜索功能哦。只是由于编译方式的问题吧?不支持中文搜索,不过也总比以前那种纯粹的一个页面来的爽。OH YEAH。。。

剩下一个嘛,就是传统的CSS手册了,这个手册估计只要是WEB开发人员就会人手一份,苏沈小雨同学实在是太让人尊敬了,估计国内开发人员提到CSS手册,都会说,哦,就是那个苏沈小雨的呀。。。

不多说,放上链接。黑黑
注意:jqueryApi文件打开后会生成一个chw的文件,如果你看不顺眼可以每次删掉

附件: jqueryapi_chm.chm (210.1 K, 下载次数:5165)

附件: cascading style sheet 2.0 中文手册.chm (258.56 K, 下载次数:2056)

Tags: chm, css, style, jquery, api

Records:15123