我希望能够在网页中动态创建任何颜色的漂亮按钮,而无需提前为每种颜色定义单独的 CSS 类。
使用带有 alpha 通道的 CSS3 渐变似乎是最好的方法,低不透明度渐变覆盖在纯色背景色之上。
但是,我对 CSS 的了解还不够,甚至无法判断这是否可能,更不用说实际实现它了。
我在网上找到了一些看起来很有帮助的资源:
有更多 CSS 经验的人可以告诉我这是否可能,并可能将我指向其他资源以使其更容易实现吗?
我希望能够在网页中动态创建任何颜色的漂亮按钮,而无需提前为每种颜色定义单独的 CSS 类。
使用带有 alpha 通道的 CSS3 渐变似乎是最好的方法,低不透明度渐变覆盖在纯色背景色之上。
但是,我对 CSS 的了解还不够,甚至无法判断这是否可能,更不用说实际实现它了。
我在网上找到了一些看起来很有帮助的资源:
有更多 CSS 经验的人可以告诉我这是否可能,并可能将我指向其他资源以使其更容易实现吗?
使用LESS或SASS之类的东西,这很容易合法地做到。像这样创建一个 mixin(健壮的版本):
.auto-gradient(@color) {
/* Use any of the built in functions like saturate() or spin() */
@topcolor: lighten(@color, 20);
@bottomcolor: darken(@color, 20);
background: @color;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(@topcolor), to(@bottomcolor));
background: -webkit-linear-gradient(@topcolor, @bottomcolor);
background: -moz-linear-gradient(@topcolor, @bottomcolor);
background: -ms-linear-gradient(@topcolor, @bottomcolor);
background: -o-linear-gradient(@topcolor, @bottomcolor);
background: linear-gradient(@topcolor, @bottomcolor);
/* If using PIE.htc for IE */
-pie-background: linear-gradient(@topcolor, @bottomcolor);
behavior: url(pie.htc);
}
用法:
.my-button {
.auto-gradient(darkviolet);
}
这将编译为有效的 CSS(3),它应该是这样的:
.my-button {
background:darkviolet;
background:-webkit-gradient(linear,0 0,0 bottom,from(#c43aff),to(#4c006d));
background:-webkit-linear-gradient(#c43aff,#4c006d);
background:-moz-linear-gradient(#c43aff,#4c006d);
background:-ms-linear-gradient(#c43aff,#4c006d);
background:-o-linear-gradient(#c43aff,#4c006d);
background:linear-gradient(#c43aff,#4c006d);
}
注意:我自己使用lessphp,我现在使用的版本似乎会阻塞命名颜色,比如DarkViolet
传递给变亮/变暗,除非它们是小写的。
MrOBrian 对Ultimate CSS Gradient Generator的建议让这一切变得轻而易举。这是我最终采用的解决方案,它是一种相对简单的 CSS 样式,由前面提到的 Gradient Generator 和Cross-Browser CSS Gradient Button Guide拼凑而成。
以下代码在应用到指定了 background-color CSS 属性的元素时添加了漂亮、流畅的按钮外观。这将允许我为所有按钮使用通用样式,使用 background-color 属性指定它们的颜色。
谢谢大家的意见和建议!