新ManBetX客户端

新ManBetX客户端

带你了解网络营销

【网站】甲方说:我想要一个闪瞎但不辣眼,高端还带渐变的......
2018-04-09 14:26来源:网络作者:小卓卓网址:http://www.zc-kj.com浏览数:26 


渐变是最近大热的设计趋势之一,最初渐变主要运用于背景和图片中的色彩叠加。如今在品牌和网站中大量的双色调设计,引领了双色调的新潮流。你看下我们公司制作的网站就大量用了这个渐变,不妨跟着卓成科技的小卓卓一起来了解下。

网站渐变效果1.jpg


这些年我们看到了更加多样化的渐变设计,结合多种色调、不规则形状和模糊效果等等。渐变更多的是用于网页中的次要内容,比如悬停按钮、标题、3D元素、icon之类。

网站渐变效果2.jpg


iPhone X可以说是2018年渐变趋势的一个经典范例。在苹果的网站登陆页面和各种宣传广告中,都能看到多种色调的渐变元素被用于标题、文字和图形中。iPhone X的主屏幕采用的渐变不是传统的线性或径向渐变,而是多种颜色的不规则混合渐变。

网站渐变效果3.jpg


3D中的渐变应用

由于环境光照的强弱不同照射到物体表面,会呈现光线强度渐变的效果。可以通过3D中的顶点颜色和颜色映射技术,模拟这种渐变效果,表现物体材质和立体感。

网站渐变效果4.jpg


渐变的种类

渐变中最常见的是线性和径向渐变,采用不同的参数设置如角度、方向、不透明度等。而现在的流行渐变趋势,是像上面的iPhoneX案例那样,利用网格工具或其它方法来做出不规则的渐变样式,比如放射渐变、网格渐变、四色渐变、复合渐变等等。

网站渐变效果5.jpg


CSS渐变代码

为了在CSS中创造出这些渐变效果,下面给大家整理了一些在线配色工具,可以拷贝和粘贴CSS代码,也可以直接复制色值进行配色。

网站渐变效果6.jpg


网站渐变效果7.jpg


网站渐变效果8.jpg


渐变设计案例集合

下面搜集了一些今年主流的渐变设计案例,希望能带给你更多灵感。

网站渐变效果9.jpg


网站渐变效果10.jpg


网站渐变效果11.jpg


网站渐变效果12.jpg


看了这么多案例,不会再说渐变设计没灵感了吧?有了想法就要及时行动,利用在线配色网站和工具,多去尝试和练习吧。有不懂的,小卓卓欢迎您来“骚扰”。

<