css3质感分析(5)径向渐变叠加纹理(圆心可变)

原创 2015年07月09日 16:18:13

css3质感系列会详细分析网上流行的css3的一些质感效果,

让大家不再恐惧Css3,最终可以见到一张图片就可以构思出他的css3实现!

三个原则:

渐变叠加的顺序
径向渐变的起点
background-position的运用

1.径向渐变默认的圆心在中心,也即 50% 50%处 注意这个数字!(很多人可能会认为是0% 0%)
如图所示我制造一个小圆,根据上一文的知识,只需要起点黄色-到达黄色边界-起点绿色-到达绿色边界-透明的写法即可。

background-image: -webkit-radial-gradient(50% 50% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0))


下面我们调整圆心Y轴到100%,很容易理解,图形的圆心会跑到最下边,X轴不变

background-image: -webkit-radial-gradient(50% 100% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0))


大家注意,这里有个非常重要的现象,下面残缺了一部分,出现了一个半圆。这就是半圆的画法,再次记住,下面是 残缺的
我们同样可以尝试 Y轴到100% x轴也到100% 那么现象应该是图形在右下角的1/4圆;


2 background-position是啥
注意 background-position 只改变的是图案整体的位置!不会破坏图案本身,最多会出现 “穿透”的现象,注意,这与圆心变化是截然不同的

div{width:100px;height:100px;margin-top:10px;border:1px solid #ddd;}
div{
background-color: #63773F;
background-image: -webkit-radial-gradient(50% 50% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0));
background-position:50px 0px;
background-size: 100px 100px;
}


大家注意,仍然是在中心的渐变,但是向右平移了50px,图案从左边穿透出来了!
一定不要跟圆心变化混淆!

3 渐变叠加性。我们可以尝试

div{width:100px;height:100px;margin-top:10px;border:1px solid #ddd;}
div{
background-color: #63773F;
background-image: -webkit-radial-gradient(50% 50% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),
-webkit-radial-gradient(50% 60% , circle , red 3%, black 4%, black 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0));
background-position:50px 0px;
background-size: 100px 100px;
}

注意上面的把下面的黑色圈子遮住了!!!
即,渐变写在上面的会遮住下面的

3个重要的原则了解完毕后,我们开始做一个非常牛逼的效果。

第一次看到这图,很多人都有种 “吓尿了”的感觉。。其实我也是。。

为了降低难度,我们先分析一个“跬步” 在进行渐变重复。

根据渐变的叠加性,拆分一下

其实怎么拆分都可以,这只是我个人理解而已、

我们配合上面的文章分析一下图片的位置

1号图  中心渐变Y轴略靠下(因为图片无损,圆心在边缘)- position X在最右边(总宽度的一半)

2号图  中心渐变Y轴略靠上(因为图片无损,圆心在边缘)- position X在最右边(总宽度的一半)

上两张position最右最左都是一样的。

3号图  这张图可以有两个理解,一是position Y在最下面,圆心在边缘,之后圆心调整位置,Y轴略增大,靠下

或者是 直接position定位到最上面也可以。

4号图类似

5号跟六号我们已经讲过了,一个半圆,所以不需要调整background-position 只需要圆心X轴 100% 或0即可

7号跟八号也很明显,一个半圆,圆心X轴100%或者0 ,跟5号6号类似,之后用background-position X轴,Y轴各调整50px即可。

我们记录下刚才的分析,然后把顺序排列好,注意小圆写在大圆前面即可~

background-image: -webkit-radial-gradient(50% 59% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),//1号
-webkit-radial-gradient(50% 41% , circle , #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)),//2号
-webkit-radial-gradient(50% 59% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),//3号
-webkit-radial-gradient(50% 41% , circle , #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)),//4号
-webkit-radial-gradient(100% 50% , circle , #D2CAAB 16%, rgba(210, 202, 171, 0) 17%),//5号
-webkit-radial-gradient(0% 50% , circle , #364E27 16%, rgba(54, 78, 39, 0) 17%),//6号
-webkit-radial-gradient(100% 50% , circle , #D2CAAB 16%, rgba(210, 202, 171, 0) 17%), //7号
-webkit-radial-gradient(0% 50% , circle , #364E27 16%, rgba(54, 78, 39, 0) 17%);   //8号

之后写好位置(1-8)

background-position: 50px 0px,
px 0px,
px,
px,
%, 0 0%,
px 50px,
px 50px;

之后配好“跬步” 大小

background-size: 100px 100px;

完整代码

div{width:300px;height:300px;margin-top:10px;border:1px solid #ddd;}
div{
background-color: #63773F;
background-image: -webkit-radial-gradient(50% 59% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),
-webkit-radial-gradient(50% 41% , circle , #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)),
-webkit-radial-gradient(50% 59% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),
-webkit-radial-gradient(50% 41% , circle , #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)),
-webkit-radial-gradient(100% 50% , circle , #D2CAAB 16%, rgba(210, 202, 171, 0) 17%),
-webkit-radial-gradient(0% 50% , circle , #364E27 16%, rgba(54, 78, 39, 0) 17%),
-webkit-radial-gradient(100% 50% , circle , #D2CAAB 16%, rgba(210, 202, 171, 0) 17%),
-webkit-radial-gradient(0% 50% , circle , #364E27 16%, rgba(54, 78, 39, 0) 17%);
background-position: 50px 0px,
px 0px,
px,
px,
%, 0 0%,
px 50px,
px 50px;
background-size: 100px 100px;
}

最复杂的过去了,我们分析几个简单的例子~

我们一眼就可以看出来 重复的图像是

根据我们的分析,他有四个重复的1/4圆,这个时候先不要考虑渐变叠加1/4圆,虽然我们也可以很容易的写出来,但是代码较多

这明显是背景一个大圆+ 一个大圆,上移一个半径,左移一个半径,之后上面跟左边都冲开了背景而已。

因此我们的核心代码只有两句

background-position: 0 0px, 40px 40px;
background-size: 80px 80px;

至于渐变的写法,就不用说了。。。一个圆而已。。

另一个技巧  画线。这个还是蛮常用的,写法很简单 透明起点(像素)+ 线1px +透明 即可

background-image: -webkit-radial-gradient(50% 50%, circle, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px)

效果:

配合我们讲解的渐变叠加,大家可以考虑一下这个东西怎么做:


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

[html5入门-23]CSS3高级特性之径向渐变

一 语法 background-image:radial-gradient(position,shape size,start-color, color,.. 1 position 渐变中心位置 值...

CSS3 径向渐变 radial-gradient

代码: CSS3 径向渐变 *{margin:0;padding:0;} ul * { width:200px; height:200px; m...

radial-gradient CSS3的蛋疼的径向渐变

首先,咱来扯一下蛋。下面是扯蛋的代码 > div {   width:100px;height:100px;border-radius:50px;   background:radial-gr...

CSS3径向渐变(radial-gradient)

主要整理了下CSS3径向渐变在各大浏览器下的兼容写法,属性参数、各个圆心定位点渐变的使用用法以及多色渐变的简要写法!

css3 radial-gradient 径向渐变

css3 radial-gradient 径向渐变

详解CSS3渐变(线性和径向)

CSS3渐变分为线性渐变和径向渐变,先来说说比较简单的线性渐变。 CSS3的线性渐变和设计软件中的渐变工具没什么区别,都是指定一个渐变的方向,起始颜色,结束颜色,当然,起始颜色和结束颜色中间还可以添...

CSS3 Gradient 线性渐变/径向渐变

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用CSS3 Gra...

css3 线性渐变和径向渐变

在网页中,经常会用的背景渐变的效果。以前都是用背景图片去实现。但是css3很好的实现了这一效果。 渐变分为线性渐变和径向渐变两种。线性渐变又分为从上到下渐变,从左到右渐变,对角线渐变。 1、从上到...

[html5入门-24]深度分析css3高级特性中的线性渐变

在学习css3线性渐变的时,深感受其属性迷惑,为此摸索总结深扒出其特性,分享于下文。 主要内容: 1 线性渐变中渐变方向的角度问题; 2 渐变起始点、终点的精确定位; 3 与PS中渐变的异同; 3 渐...

CSS3技巧:利用css3径向渐变做一张优惠券

在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过。那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)