09/10
2015

##一些css的实践

  1. 文章仅仅涉及一些CSS属性的使用,并不考虑IE兼容问题。
  2. 属性可以从https://developer.mozilla.org/en-US/docs/Web/CSS/Reference查找,查看详细。
  3. 浏览器兼容查看移步至http://caniuse.com
  4. 可以在http://www.css3maker.com/上面做一些css3的尝试。

###Multi Columns: columns, 多列显示

columns是css3中设置内容的多列显示,效果如下:

生于忧患,死于安乐

舜发于畎亩之中,傅说举于版筑之间,胶鬲举于鱼盐之中,管夷吾举于士,孙叔敖举于海,百里奚举于市。

故天将降大任于是人也,必先苦其心志,劳其筋骨,饿其体肤,空乏其身,行拂乱其所为,所以动心忍性,曾益其所不能。

人恒过,然后能改;困于心,衡于虑,而后作;征于色,发于声,而后喻。入则无法家拂士,出则无敌国外患者,国恒亡。

然后知生于忧患,而死于安乐也。

html代码:

<div class="t-columns">
    <h4>生于忧患,死于安乐</h4>
    <p>舜发于畎亩之中,傅说举于版筑之间,胶鬲举于鱼盐之中,管夷吾举于士,孙叔敖举于海,百里奚举于市。</p>
    <p>故天将降大任于是人也,必先苦其心志,劳其筋骨,饿其体肤,空乏其身,行拂乱其所为,所以动心忍性,曾益其所不能。</p>
    <p>人恒过,然后能改;困于心,衡于虑,而后作;征于色,发于声,而后喻。入则无法家拂士,出则无敌国外患者,国恒亡。</p>
    <p>然后知生于忧患,而死于安乐也。</p>
</div>

css代码:

.t-columns{
    -moz-column-width: auto;
    -moz-column-count: 2;
    /*设置每一列的内容高度是否相同*/
    -moz-column-fill: balance;
    /*设置间隔的宽度*/
    -moz-column-gap: 2em;
    /*设置间隔之间的边线*/
    -moz-column-rule: 2px solid #ccc;

    -webkit-column-width: auto;
    -webkit-column-count: 2;
    -webkit-column-fill: balance;
    -webkit-column-gap: 2em;
    -webkit-column-rule: 2px solid #ccc;
}

.t-columns h4{
    text-align: center;
    /*跨越多列,仅仅webkit支持*/
    column-span: all;
    -moz-column-span: all;
    -webkit-column-span: all;
}

.t-columns p{
    text-indent: 2em;
}

###filter: 滤镜

css实验属性,css3 filter支持的效果有:

  1. blur:模糊
  2. grayscale:灰度
  3. brightness:亮度
  4. contrast:对比度
  5. drop-shadow:阴影,通box-shaodow
  6. hue-rotate:色相旋转
  7. invert:反色
  8. opacity:透明度
  9. saturate:饱和度
  10. sepia:褐色

也可以使用一下方式,引入外部滤镜效果:

filter: url(commonfilters.xml#large-blur);

下面的图片:第一个是原图,依次效果按上面的列表,最后是blur和grayscale的重合效果。

###gradient:渐变色

http://www.w3.org/TR/css3-images/里面规定一些css3中关于渐变的一些实现,在webkit中经历了从-webkit-gradient-webkit-***-gradient的转变。

linear-gradient

css代码:

.t-linear-gradient{
    height: 40px;
    background-image: linear-gradient(0deg, red, orange, yellow, green, blue, indigo, violet);
    background-image: -moz-linear-gradient(0deg, red, orange, yellow, green, blue, indigo, violet);
    background-image: -webkit-linear-gradient(0deg, red, orange, yellow, green, blue, indigo, violet);
}

radial-gradient

注意:可以在最后使用一个完全透明的颜色,作为最后的延伸。整个最后外围的颜色都是最后一个颜色。

demo1:

css代码:

.t-radial-gradient1{
    height: 100px;
    /*参数依次为:类型、约束、中心点的位置(同transform-origin)、颜色点~*/
    background-image: radial-gradient(circle closest-side at center, red, orange, yellow, green, blue, indigo, violet, rgba(0,0,0,0));
}

demo2:

css代码:

.t-radial-gradient2{
    height: 100px;
    /*参数依次为:类型、约束、中心点的位置(同transform-origin)、颜色点~*/
    background-image: radial-gradient(circle closest-side at center, red, orange, yellow, green, blue, indigo, violet, rgba(0,0,0,0));
}

repeating-linear-gradient

css代码:

.t-repeating-linear-gradient{
    height: 100px;
    background-image: repeating-linear-gradient(45deg, red 0px, red 20px, orange 20px, orange 40px, yellow 40px, yellow 60px, green 60px, green 80px, blue 80px, blue 100px, indigo 100px, indigo 120px, violet 120px, violet 140px);
}

repeating-radial-gradient

css代码:

.t-repeating-radial-gradient{
    height: 100px;
    /*background-image: repeating-radial-gradient(circle, red 0px, red 20px, orange 20px, orange 40px, yellow 40px, yellow 60px, green 60px, green 80px, blue 80px, blue 100px, indigo 100px, indigo 120px, violet 120px, violet 140px);*/
    background-image: repeating-radial-gradient(circle closest-side at center, red, orange, yellow, green, blue, indigo, violet);
}

###css3:counter,计数器

  1. counter()、counters()和attr()返回一个字符串。

    counter()、counters()仅仅适用于content,而attr()可以用到任何css属性上。

  2. counter-reset:重置或新建一个counter。参数:[<user-ident> <integer>?]+ | none
  3. counter-increment: 增加counter的值。参数:[<user-ident> <integer>?]+ | none
  4. counter(counterName, style):返回一个计数的值,style同list-style-type,默认是demical。
  5. counters(counterName, str, style):返回关于counterName的迭代字符串,str为两两之间添加的间隔串。

  1. 一个counter的作用域是定义它的标签的所有子标签和所有兄弟标签。
  2. 如图所示,这里讲解一下counter的作用域,a1标签:counter-reset:x y;定义了xy两个counter。此时xy两个counter的作用域就是作用域1
  3. a2标签的子标签b1counter-reset:y z;,这里在作用域2中定义了两个新counteryz,其中y是新建的,并不和父标签a1->y定义的counter冲突。
  4. a3counter-reset:y;,这里的ycounter是指a1中定义的。

  1. item
  2. item
    1. item
    2. item
    3. item
      1. item
      2. item
      1. item
      2. item
      3. item
    4. item
  3. item
  4. item
  1. item
  2. item

html代码:

<div class="t-counter">
    <ol>
        <li>item</li>          <!-- 1     -->
        <li>item              <!-- 2     -->
            <ol>
                <li>item</li>      <!-- 2.1   -->
                <li>item</li>      <!-- 2.2   -->
                <li>item           <!-- 2.3   -->
                    <ol>
                        <li>item</li>  <!-- 2.3.1 -->
                        <li>item</li>  <!-- 2.3.2 -->
                    </ol>
                    <ol>
                        <li>item</li>  <!-- 2.3.1 -->
                        <li>item</li>  <!-- 2.3.2 -->
                        <li>item</li>  <!-- 2.3.3 -->
                    </ol>
                </li>
                <li>item</li>      <!-- 2.4   -->
            </ol>
        </li>
        <li>item</li>          <!-- 3     -->
        <li>item</li>          <!-- 4     -->
    </ol>
    <ol>
        <li>item</li>          <!-- 1     -->
        <li>item</li>          <!-- 2     -->
    </ol>
</div>

css代码:

.t-counter ol{
    counter-reset: section;
    list-style-type: none;
}
.t-counter ol li:before{
    counter-increment: section;
    content: counters(section, ".") " ";
}

###css3多重背景:multiple backgrounds

  1. background: background1, background 2, ..., backgroundN;,css的多重背景,background1在最顶层top,backgroundN在最底层。
  2. 可以在background属性中,一次把所有的属性都定义完。也可以利用子属性如background-imagebackground-originbackground-repeatbackround-sizebackground-position使用list的值分别对应.

css代码:

.t-multi-background{
    height: 200px;
    background: linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), url(/images/somecss/monkey.jpg) no-repeat;
    background-size: 100%, 100% 100%;
}
作者:teazean 文章地址: