alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2019-09-18
  • 发帖数2677
  • 经验487枚
  • 威望1点
  • 贡献值116点
  • 好评度82点
  • 社区居民
  • 最爱沙发
  • 忠实会员
阅读:6596回复:30

自定义progress line的颜色和透明度

楼主#
更多 发布于:2010-09-17 23:07
默认的颜色和透明度很不显眼,可以用下面的css自定义;
颜色分为三部分,由左开始在progress line上分三段渐变显示,跟在rgb值后面的是颜色的透明度。
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

.tab-progress > .progress-bar,#urlbar-progress > .progress-bar 
{background-image: -moz-linear-gradient(left, rgba(39,197,255,.5),
                                               rgba(39,197,255,.7),
                                               rgba(39,197,255,.95)) !important;}


更新一下,地址栏和标签的progress line分开单独设置,前面是标签上的,后面是地址栏的;
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

.tab-progress > .progress-bar
{background-image: -moz-linear-gradient(left, rgba(39,197,255,.5),
                                               rgba(39,197,255,.7),
                                               rgba(39,197,255,.95)) !important;}

#urlbar-progress > .progress-bar
{background-image: -moz-linear-gradient(left, rgba(127,255,0,.3),
                                               rgba(127,255,0,.6),
                                               rgba(127,255,0,.85)) !important;}


效果图:
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2019-09-18
  • 发帖数2677
  • 经验487枚
  • 威望1点
  • 贡献值116点
  • 好评度82点
  • 社区居民
  • 最爱沙发
  • 忠实会员
1楼#
发布于:2010-09-17 23:07
ie哪里的颜色?
带有调色板的程序都可以看见颜色的rgb值。
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2019-09-18
  • 发帖数2677
  • 经验487枚
  • 威望1点
  • 贡献值116点
  • 好评度82点
  • 社区居民
  • 最爱沙发
  • 忠实会员
2楼#
发布于:2010-09-17 23:07
SASCSI:画笔行么?在啥地方?我图画白痴回到原帖

xp下画图程序,颜色-编辑颜色-规定自定义颜色;
就可以看见了,那个红绿蓝分别代表rgb。
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2019-09-18
  • 发帖数2677
  • 经验487枚
  • 威望1点
  • 贡献值116点
  • 好评度82点
  • 社区居民
  • 最爱沙发
  • 忠实会员
3楼#
发布于:2010-09-17 23:07
ryanhp:这些css信息都是哪里找到的啊?回到原帖

firefox里自带的用来定义progress line的代码,我把它提取出来。


楼上是个好同学。
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2019-09-18
  • 发帖数2677
  • 经验487枚
  • 威望1点
  • 贡献值116点
  • 好评度82点
  • 社区居民
  • 最爱沙发
  • 忠实会员
4楼#
发布于:2010-09-17 23:07
抱歉,多发了。
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2019-09-18
  • 发帖数2677
  • 经验487枚
  • 威望1点
  • 贡献值116点
  • 好评度82点
  • 社区居民
  • 最爱沙发
  • 忠实会员
5楼#
发布于:2010-09-17 23:07
dxq83

"firefox里自带的用来定义progress line的代码",progress line的代码在哪里呢,在fx源代码里吗?还是在fx某个文件里?  
回到原帖

见图:
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2019-09-18
  • 发帖数2677
  • 经验487枚
  • 威望1点
  • 贡献值116点
  • 好评度82点
  • 社区居民
  • 最爱沙发
  • 忠实会员
6楼#
发布于:2010-09-17 23:07
hoolooday:这个是不是在当前标签,显示地址栏的进度条
而其它标签打开,并且不激活时,用标签栏上的进度条呢?
能不能修改为都在标签上显示,或者都在地址栏显示呢?
回到原帖

这个功能是b7的新功能,这里只提供修改样式的方法,移到标签上css做不到;
[quote="fireman"]确实,能不能设置都在标签上显示呢,地址栏那条实在太不明显。因为一般情况下都是盯着标签上的线,切换到当前标签就又变成地址栏那条,非常累眼。或者圆饼回归就更好了。[/quote]
不明显可以设置个醒目的颜色或者把透明度调高。
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2019-09-18
  • 发帖数2677
  • 经验487枚
  • 威望1点
  • 贡献值116点
  • 好评度82点
  • 社区居民
  • 最爱沙发
  • 忠实会员
7楼#
发布于:2010-09-17 23:07
openicq:结合alanfly和mattmonkey的想法
我现在自己用的代码
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

.tab-progress > .progress-bar
{background-image: -moz-linear-gradient(left, rgba(0,255,0,.5),
                                               rgba(0,255,0,.7),
                                               rgba(0,255,0,.95)) !important;}

#urlbar-progress > .progress-bar
{background-image: -moz-linear-gradient(left, rgba(255,0,255,.95),
                                               rgba(255,255,0,.95),
                                               rgba(0,255,0,.95)) !important;}

地址栏的progress line根据载入的进度依次变色 红->黄->绿 跟红绿灯似的 呵呵
标签栏的progress line因为长度比较短所以就不搞几种颜色了 只用绿色 透明度根据载入的进度渐变
回到原帖

干脆再多加几种颜色,凑成七色彩虹。
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2019-09-18
  • 发帖数2677
  • 经验487枚
  • 威望1点
  • 贡献值116点
  • 好评度82点
  • 社区居民
  • 最爱沙发
  • 忠实会员
8楼#
发布于:2010-09-17 23:07
racca

那个其实是opacity, 不透明度
回到原帖

谢谢指正。
游客

返回顶部