CSS3 vs. Photoshop: Complex Backgrounds

本教程将介绍如何利用CSS3创建相对复杂的背景(background),过去这个工作要交给photoshop或其它图形软件切片来实现。

Gradient Backgrounds 渐变背景

过去,我们要用Photoshop来创建渐变背景,但有两个性能缺陷:

  • 1. 增加了图片的HTTP请求数,这对页面体验速度有影响
  • 2. 你只能repeat水平或重直方向的渐变切片,而对于斜渐变就必须用整张大背景图
  • 在Photoshop中,你曾经这样做:

    线性渐变:

    语法 -moz
    -moz-linear-gradient( [to <point> || <angle>,]? <color-stop>, <color-stop> [, <color-stop>]* )
    
    其中:
    <point> =[left | right] || [top | bottom]
    <color-stop> = <color> [ <percentage> | <length> ]?
    语法 -webkit
    -webkit-gradient(linear, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
    
    其中:
    <point> =[left | right] || [top | bottom] 或percentage
    left top,right top等同于0% 0%,100% 0%

    而CSS3中,渐变可被当作是background-image或border-image,list-style-image等

    例如:
    background-image:-moz-linear-gradient( 0deg, blue, green 40%, red ); 
    background-image:-webkit-gradient(linear, left top, right top, from(blue), color-stop(0.4,green),to(red));
    

    A gradient 0 deg, starting blue, being green after 40% and finishing red

    其它类型


    对应的CSS3代码如下:
    linear gradient
    angle gradient
    radial gradient
    stops gradients
    .linear_gradient{
     background-image:-moz-linear-gradient(top, #6f828b, #122938);
     background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#6f828b), to(#122938));
     }
     .angle_gradient{
     background:-moz-linear-gradient(right top 260deg, #ffe930, #ed9700);
     background:-webkit-gradient(linear, right top, left bottom, from(#ffe930), to(#ffa200));
     }
     .radial_gradient{
     background:-moz-radial-gradient(50% 50%, circle farthest-corner, #ff0000, #a00000);
     background:-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, from(#ff0000), to(#a00000));
     }
     .stops_gradients{
     background:-moz-linear-gradient(top, #676767 0%, #262626 50%, #1D1D1D 50%, #000000 100%);
     background:-webkit-gradient(linear, left top, left bottom, from(#676767), color-stop(0.5, #262626), color-stop(0.5, #1D1D1D), to(#000000));
     }
    

    Combining 组合合并

     background-image: w1, w2, w3,…, wM
     background-repeat: x1, x2, x3,…, xR
     background-size: y1, y2, y3,…, yS
     background-position: s1, s2, s3,…, sP
    
    查看DEMO

    应用

    复杂背景按钮生成器

    参考

    英文原址:
    http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/css3-vs-photoshop-complex-backgrounds/
    参考网址:
    https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
    https://www.webkit.org/blog/175/introducing-css-gradients/'