段落文字彩条效果

發表於   |   分類於

程序媛and程序猿，兄弟姐妹们，大家周末好，我们今天来研读一下利用纯css实现段落文字的彩条效果。有朋友就说了，不就是css3的渐变吗，最多加上webkit内核的-webkit-background-clip，嗯，远不止哟，进来一坐了解详情……

##案例欣赏
这里写图片描述
这里写图片描述
代码我同样放到了codepen，大家可以-在线研究-，或-下载收藏-。

##知识解析
实现本案例您需要：

  • css3渐变
  • -webkit-background-clip: text和-webkit-text-fill-color: transparent
  • sass的function的内涵和自定义
  • 伪对象的使用

我们接下来品味实现过程，强烈建议大家根据上面的原理自行实现，有实现的兄弟欢迎通过评论提交佳作哟。

##实现情况
我们的html文件同样使用了haml，貌似下面代码这样。

1
2
3
4
.container
  - 6.times do |i|
    %section{class: "lh"}
      %p 前端开发whqet，王海庆的技术博客，关注前端开发，分享相关资源，希望可以对您有所帮助。csdn专家博客http://blog.csdn.net/whqet和个人独立博客http://whqet.github.io同步更新，希望可以得到您的支持与肯定，您的支持是我最大的动力！王海庆，浙江邮电职业技术学院软件技术青椒一枚，其貌不扬、其名不翔，关心技术、热爱生活，我爱怒放的生命。

然后我们设置下页面布局和全局css设置，为了简化问题，本案例使用了sass的scss语法、css reset和-prefix-free。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/*全局变量的设置，行高和彩条颜色*/
$lh:1.8em;
$colors: #9588DD #DD88C8 #D3DD88 #88B0DD #FFD86F #B4DB6C #0090FB #00965E;
/*布局和全局设置*/
.container{
  counter-reset:counterA;
}
.container section{
  counter-increment:counterA;
  position: relative;
  padding:10vh 20vw;
  background:#2B293D;
  border-bottom:1px dashed rgba(255,255,255,.1);
  &::before{
    content:counter(counterA);
    position: absolute;
    left:0;
    top:0;
    font-size:20vw;
    color:rgba(255,255,255,.05);
 }
 p{
   text-indent: 2em;
   line-height: $lh;
   color:#fff;
 }
}

###彩条效果
案例创意来自Chris Coyier’s Pen One line of Text Dif Color，案例效果如下
这里写图片描述
我们在实现这个效果时，手动设置渐变的颜色，需要把握的核心在于设置渐变点与段落文字的行高吻合。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/*第一个，彩色条纹，手动指定颜色*/
section:nth-of-type(1) {
  p {
    /*本案例仅仅兼容webkit内核浏览器*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /*繁琐的渐变颜色设置*/
    background-image: linear-gradient(
      to bottom,
      #9588DD,
      #9588DD $lh,
      #DD88C8 $lh,
      #DD88C8 $lh*2,
      #D3DD88 $lh*2,
      #D3DD88 $lh*3,
      #88B0DD $lh*3,
      #88B0DD $lh*4,
      #FFD86F $lh*4,
      #FFD86F $lh*5,
      #B4DB6C $lh*5,
      #B4DB6C $lh*6,
      #0090FB $lh*6,
      #0090FB $lh*7,
      #00965E $lh*7,
      #00965E
    );
  }
}

###函数实现彩条效果
由上面彩条效果实现过程可知，渐变颜色的设置是整个案例实现的关键，但是比较不幸的是，这个过程太过danteng，这个煎熬的过程是程序猿都顶不住，于是穷则思变，使用scss的自定义函数来代替繁琐的人工设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/*第二个，彩色条纹，mixins方式读取预设值*/
/**
 * $colors, 渐变颜色序列
 * $lh, 段落的行高
 *************************************************/
@function makestripes($colors,$lh){
  $stripes: 'to bottom,';
  $i: 1;
  $l: length($colors);
  @each $color in $colors{
    $stripes: 
      $stripes + 
      $color + ' ' + ($lh * ($i - 1)) 
      + ',' + 
      $color + ' ' + ($lh * ($i * 1))
    ;
    @if ($i < $l){
      $stripes: $stripes + ',';
    }
    $i: $i + 1;
  }
  @return unquote('repeating-linear-gradient(' + $stripes + ')');
}
section:nth-of-type(2) {
  p {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /*你体会到愉快了吗？*/
    background-image: makestripes($colors,$lh);
  }
}

###淡出效果
彩条效果多少有点炫技，属于前端er的玩儿弄，实际应用场合有待探索，但是下面的这个淡出效果应该应用挺广，比如用在日志摘要以增加设计的优雅。
这里写图片描述
本效果的实现，我们同样从手动设置渐变颜色出发，然后研究sass的函数设置，然后研究兼容firefox的实现方式，参见3.3-3.6.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*第三个，淡出效果，手动方式指定*/
section:nth-of-type(3) {
  p {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(
      to top,
      rgba(white, 0.2),
      rgba(white, 0.2) $lh,
      rgba(white, 0.4) $lh,
      rgba(white, 0.4) $lh*2,
      rgba(white, 0.6) $lh*2,
      rgba(white, 0.6) $lh*3,
      rgba(white, 0.8) $lh*3,
      rgba(white, 0.8));
    background-position: bottom center;
  }
}

###函数实现淡入淡出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/*第四个，淡出效果，mixins*/
/**
 * $color, 渐变颜色
 * $lh, 段落的行高
 * $dir, 渐变方向，可接受参数：'to top'表示淡出，'to bottom'表示淡入
 * $n, 渐变的快慢，渐变完成的行数，默认为3行
 *************************************************/
@function makesFade($color:white,$lh:1.5em,$dir:'to top',$n:3){
  $stripes:$dir+", ";
  @for $i from 1 through $n{
    $stripes: 
      $stripes + 
      rgba($color,$i/$n) + ' ' + ($lh * ($i - 1)) 
      + ',' + 
      rgba($color,$i/$n) + ' ' + ($lh * ($i * 1));
    @if ($i < $n){
      $stripes: $stripes + ',';
    }
  }
  @return unquote('linear-gradient(' + $stripes + ')');
}
section:nth-of-type(4) {
  p {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: makesFade(white,$lh,'to top',4);
  }
}

###兼容firefox的淡出方式
我们知道上面的案例因为使用webkit内核的background-clip，text-fill-color，因此只兼容webkit内核的浏览器，这不公平。firefox会叫屈不平，所以我们得做点什么。我们把颜色渐变添加在::after伪对象上覆盖文字，注意这时，渐变颜色跟背景颜色一样，透明度从1到0。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/*第五个，兼容其他浏览器*/
section:nth-of-type(5) {
  p{
    position: relative;
  }
  p::after{
    content:"";
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    bottom:0;
    background-image: linear-gradient(
      to top,
      rgba(#2B293D, 1),
      rgba(#2B293D, 1) $lh,
      rgba(#2B293D, 0.8) $lh,
      rgba(#2B293D, 0.8) $lh*2,
      rgba(#2B293D, 0.6) $lh*2,
      rgba(#2B293D, 0.6) $lh*3,
      rgba(#2B293D, 0.4) $lh*3,
      rgba(#2B293D, 0.4) $lh*4,
      rgba(#2B293D, 0.2)
    );
    background-position: bottom center;
  }
}

###兼容firefox的函数实现淡入淡出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/*第六个，兼容其他浏览器的mixins*/
/**
 * $color, 渐变颜色，这里就是背景色。
 * $lh, 段落的行高
 * $dir, 渐变方向，可接受参数：'to top'表示淡出，'to bottom'表示淡入
 * $n, 渐变的快慢，渐变完成的行数，默认为3行
 *************************************************/
@function makesFadeOther($color:white,$lh:1.5em,$dir:'to top',$n:3){
  $stripes:$dir+", ";
  @for $i from 1 through $n{
    $stripes: 
      $stripes + 
      rgba($color,1-$i/$n) + ' ' + ($lh * ($i - 1)) 
      + ',' + 
      rgba($color,1-$i/$n) + ' ' + ($lh * ($i * 1));
    @if ($i < $n){
      $stripes: $stripes + ',';
    }
  }
  @return unquote('linear-gradient(' + $stripes + ')');
}
section:nth-of-type(6) {
  p{
    position: relative;
  }
  p::after {
    content:"";
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    bottom:0;
    background-image: makesFadeOther(#2B293D,$lh,'to top',4);
  }
}

##相关阅读

##版权说明
前端开发whqet，关注前端开发，分享相关资源。csdn专家博客，王海庆希望能对您有所帮助。
本文欢迎转载，转载请注明，保留原文链接。
本文原文链接，http://whqet.github.io/2015/02/07/段落文字彩条效果/
欢迎大家访问我的博客，http://blog.csdn.net/whqet/