创建渐变条纹linear-gradient以及一些感悟

58 0

渐变条纹linear-gradient一些感悟:

条纹背景其实用的还是比较少的,主要是因为色彩的调控,有点喧宾夺主,如果是只是简单的页面,非多内容的,其实也可以考虑用色彩比较淡一些的条纹做为背景,然后内容部分用颜色块去凸显主体,不过个人是没有这个调控能力,等以后有机会再试试吧!

先我们来讲讲linear-gradient的代码意思:

background: linear-gradient(#58a 50%,#999 70%);

这是一段常见的背景渐变,淡蓝色在上面,灰色在下面。如图:
-25
这里的50%和70%就需要特别说明一下,这个百分百并不是指颜色占据的高度或者宽度,而是颜色渐变的起始点、结束点,从50%开始渐变,到70%结束渐变!
-25
既然知道了这是起止点,那么我们再回顾一下渐变的一个定义:

当某个色标的位置值小于前面时,默认使用前面所有位置值最大的值!

也就说如果我们第一个值是50%,第二个值49%,这样系统会自动判断这个49%为50%,因为你渐变不可能还可以往回渐变的,这完全就是逻辑上的错误,这样其实也有一个好处,我们可以通过这个特性去创建条纹背景,你试想一下,当你的渐变的距离等于0的时候,你所得到的就是纯色的背景了。

注意:背景色他的叠加方式是,第一写的浮动在最上面,第二写的浮动下第一个下面,所以,如果你第二个颜色值的宽度小于第一个,第二个颜色是完全看不到的,被遮挡的。

于是乎:

background: linear-gradient(#58a 50%,#999 0);

-25
效果很符合我们的想象,那么我们再多加几个颜色,来创建条纹。

background:linear-gradient(#58a 25%,#999 0,#999 50%,blue 0,blue 75%,red 0);

-25
简单的条纹创建成功,但是我们这样只是设置的一整块的百分比,如果我们要让他每条宽度都是15px,而且只有这四个颜色,怎么弄,我们不可能知道一个网页他的高度,而且也不可能一条一条去写吧,这是不可能做到的,于是乎我们应该要想到backgroun-size,用size去控制渐变的高度,于是乎:

background:linear-gradient(#58a 25%,#999 0,#999 50%,blue 0,blue 75%,red 0);
background-size: 100% 60px;

-25

x轴我们让他宽度100%填满,y轴我们是只设置4个颜色,每个颜色15px,就是4*15=60px,加上背景默认是repeat的,一个条纹渐变完美制作完毕,你也可以自己调整不同的颜色宽度来达到自己喜欢的效果。

那么,简单的条纹我们已经制作完毕,我们下面来进阶:

如果我想让条纹倾斜,怎么办?
这时肯定有人会说,当然是在渐变里面添加角度就可以了啊,很简单的!
那么我们就按他所说的这么设置:

background:linear-gradient(45deg,#58a 25%,#999 0,#999 50%,blue 0,blue 75%,red 0);
background-size: 100% 60px;

-25
你会发现你得到的完全是一个撕裂的图片,并不是我们想要的倾斜45度的条纹,完全是错误的。

这里我们要先知道几个条件:

  1. 渐变里面的角度(deg)方向,他的颜色并不是从上到下了,而是从下到上,也就是第一个我们设置的是红色,那么设置了deg角度后,红色会出现在相反的方向,这点需要注意。
  2. linear-gradient最多支持两条渐变条纹倾斜,且倾斜角度只能是45deg、45+45+45...想要增加角度只能是加减45。
  3. 虽然说最大只支持两条,但是写的时候,你需要重复写一次,也就是一共是四条,只是重复了而已。
  4. backgroud-size必须是正方形,如30px 30px。

代码:

background:linear-gradient(45deg,#58a 25%,#666 0,#666 50%,#58a 0,#58a 75%,#666 0,#666 100%);
background-size: 30px 30px;

45deg:
-25
90deg:
-25
135deg:
-25

基本上就如上,还有一些角度就不一一展示了,自行测试即可。
上面的图你可以看到第一个颜色#58a一直是处于最底部的,所以,你要是想让他显示在顶部,就是要设置不同的角度,比如45deg就要改成135deg才对。

那么倾斜条纹我是是已经会了,但是有局限啊,只能45deg,不符合我们css进阶的需求,于是,下面我们介绍一些css3的渐变代码:repeating-linear-gradient

这个repeating-linear-gradient有什么特别的地方呢?

  1. 可以创建任意角度的条纹。
  2. 不需要设置background-size也能控制条纹宽度。
  3. 想设置几个颜色就设置几个颜色。

具体代码如下:

background:repeating-linear-gradient(45deg,#58a 0,#58a 5px,#666 0,#666 10px,blue 0,blue 15px,red 0,red 20px);

-25

十分简单,唯一需要注意的就是,从第一条颜色开始,他的渐变开始点就是要是0。

其次这个要注意就是ie11才支持,旧的ie版本是不支持的,opera mini不支持,现代浏览器都已经支持了,所以,为了兼容性,你还需要在前面加上一个兼容背景色:

background-color: #eee;
background:repeating-linear-gradient(45deg,#58a 0,#58a 5px,#666 0,#666 10px,blue 0,blue 15px,red 0,red 20px);

好了,讲了这么多我们来弄个实际例子,我们用条纹来模拟信封的边框吧!
-25
这张是我百度找的一张信封的图片,我们用css来模拟下这个效果!

我先是完全按照这个信封风格做:

.div1 {
    width: 800px;
    height: 400px;
    border: 10px solid transparent;
    background-color: #eee;
    background:linear-gradient(white,white) padding-box,
    repeating-linear-gradient(45deg,transparent 0,transparent 10px,#9c070d 0,#9c070d 20px,transparent 0,transparent 30px,#0032dd 0,#0032dd 40px) border-box;
}

效果图:
-50

发现效果不好,因为边角都透明了,实物是有底色的,所有他透明是没问题,而我们单纯照搬会出问题,所以我们把颜色的位置调整下!

repeating-linear-gradient(45deg,#9c070d 0,#9c070d 10px,transparent 0,transparent 20px,#0032dd 0,#0032dd 30px,transparent 0,transparent 40px) border-box;

效果图:
-50

这样看,还不错!

本期感悟到此结束,有兴趣也可以留言你自己的想法,哈哈...

0

评论(0)

相关文章

微信收款码
微信收款码