alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2019-08-25
  • 发帖数2675
  • 经验485枚
  • 威望1点
  • 贡献值116点
  • 好评度82点
  • 社区居民
  • 最爱沙发
  • 忠实会员
阅读:6559回复: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;}


效果图:
SASCSI
狐狸大王
狐狸大王
  • UID30822
  • 注册日期2009-10-24
  • 最后登录2013-07-09
  • 发帖数329
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
1楼#
发布于:2010-09-17 23:07
改成IE那种绿色颜色代码是啥?

这个色用啥软件可以知道代码?
个人Blog
http://sascsi.x10.bz/blog/

alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2019-08-25
  • 发帖数2675
  • 经验485枚
  • 威望1点
  • 贡献值116点
  • 好评度82点
  • 社区居民
  • 最爱沙发
  • 忠实会员
2楼#
发布于:2010-09-17 23:07
ie哪里的颜色?
带有调色板的程序都可以看见颜色的rgb值。
心清无痕
小狐狸
小狐狸
  • UID30666
  • 注册日期2009-10-11
  • 最后登录2019-07-20
  • 发帖数84
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
  • 社区居民
  • 忠实会员
3楼#
发布于:2010-09-17 23:07
试试这个,看着效果不错
SASCSI
狐狸大王
狐狸大王
  • UID30822
  • 注册日期2009-10-24
  • 最后登录2013-07-09
  • 发帖数329
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
4楼#
发布于:2010-09-17 23:07
画笔行么?在啥地方?我图画白痴
个人Blog
http://sascsi.x10.bz/blog/

alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2019-08-25
  • 发帖数2675
  • 经验485枚
  • 威望1点
  • 贡献值116点
  • 好评度82点
  • 社区居民
  • 最爱沙发
  • 忠实会员
5楼#
发布于:2010-09-17 23:07
SASCSI:画笔行么?在啥地方?我图画白痴回到原帖

xp下画图程序,颜色-编辑颜色-规定自定义颜色;
就可以看见了,那个红绿蓝分别代表rgb。
ryanhp
小狐狸
小狐狸
  • UID32939
  • 注册日期2010-05-29
  • 最后登录2014-03-29
  • 发帖数52
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
6楼#
发布于:2010-09-17 23:07
这些css信息都是哪里找到的啊?
openicq
狐狸大王
狐狸大王
  • UID5412
  • 注册日期2005-04-23
  • 最后登录2015-12-15
  • 发帖数353
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
  • 社区居民
7楼#
发布于:2010-09-17 23:07
赞哦~
不过蓝色在Win7下有点看不清楚
我换成酸橙色 醒目很多
@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(0,255,0,.5),
                                               rgba(0,255,0,.7),
                                               rgba(0,255,0,.95)) !important;}


想自己换颜色的同学可以参照附图
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2019-08-25
  • 发帖数2675
  • 经验485枚
  • 威望1点
  • 贡献值116点
  • 好评度82点
  • 社区居民
  • 最爱沙发
  • 忠实会员
8楼#
发布于:2010-09-17 23:07
ryanhp:这些css信息都是哪里找到的啊?回到原帖

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


楼上是个好同学。
RickyBoy
狐狸大王
狐狸大王
  • UID2683
  • 注册日期2005-02-01
  • 最后登录2019-08-09
  • 发帖数305
  • 经验15枚
  • 威望0点
  • 贡献值4点
  • 好评度0点
  • 社区居民
9楼#
发布于:2010-09-17 23:07
Show一下我的
kmc
kmc
管理员
管理员
  • UID165
  • 注册日期2004-11-25
  • 最后登录2019-08-24
  • 发帖数9153
  • 经验360枚
  • 威望1点
  • 贡献值114点
  • 好评度38点
  • 忠实会员
  • 终身成就
  • 社区居民
10楼#
发布于:2010-09-17 23:07
谢了,改了个纯黄,跟Tab Utilities的锁定颜色相符合。
Waterfox扬长而去
just4fun
千年狐狸
千年狐狸
  • UID30408
  • 注册日期2009-09-17
  • 最后登录2016-04-28
  • 发帖数1497
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度2点
11楼#
发布于:2010-09-17 23:07
不错,收了,有空试下
咪姆
非常火狐
非常火狐
  • UID2913
  • 注册日期2005-02-10
  • 最后登录2019-03-22
  • 发帖数951
  • 经验13枚
  • 威望0点
  • 贡献值0点
  • 好评度1点
  • 社区居民
  • 忠实会员
12楼#
发布于:2010-09-17 23:07
很实用,谢谢了


dxq83
火狐狸
火狐狸
  • UID25092
  • 注册日期2008-06-26
  • 最后登录2015-01-19
  • 发帖数202
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
13楼#
发布于:2010-09-17 23:07
alanfly
firefox里自带的用来定义progress line的代码,我把它提取出来。


楼上是个好同学。
回到原帖


"firefox里自带的用来定义progress line的代码",progress line的代码在哪里呢,在fx源代码里吗?还是在fx某个文件里?  
mattmonkey
火狐狸
火狐狸
  • UID33282
  • 注册日期2010-07-04
  • 最后登录2012-01-02
  • 发帖数196
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度1点
14楼#
发布于:2010-09-17 23:07
这个真方便。不错

我的...

.tab-progress > .progress-bar,#urlbar-progress > .progress-bar
{background-image: -moz-linear-gradient(left, yellow,
                                               orange,
                                               red) !important;}
上一页
游客

返回顶部