开发者

Uber cool Linear Gradients in CSS3

Is it possible to create (without images), re开发者_C百科ally cool looking linear gradients like the ones you see in the Ribbon menu controls?

Uber cool Linear Gradients in CSS3

Does anyone know of any tutorials, articles resources or samples that demonstrate/show off this kinda gradient?


http://www.colorzilla.com/gradient-editor/

I've used this in the past. It is nice because it makes a number of flavors of the gradient, since exact syntax isn't well defined yet.


Background Gradient:

background: -moz-linear-gradient(center top , #ededed, #ededed) repeat scroll 0 0 transparent;
border: 1px solid #e1e1e1;
/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ededed));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #ededed, #ededed);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ededed, endColorstr=#ededed);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ededed, endColorstr=#ededed)";

Text Shadow Effect:

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜