渐变已经流行了一段时间,他们最初以背景和图像的传统方式卷土重来。Spotify通过在照片中应用双色调渐变作为其品牌在其活动和微型网站中的特征元素,再次使它们变得流行。你可以教程。
Spotify微型网站2015,双色调图像与渐变映射。
今年我们已经看到了各种各样的彩色渐变色,带有鲜艳的调色板和不规则的形状,带有模糊和失真效果。渐变目前正在以多种方式使用,但就趋势而言,最具特色的是它们的使用被扩展到合成中的次要元素,例如悬停,标题,3D元素,图标等。
悬停效果的渐变
iphone x代表2018年趋势的范例。在其着陆页,广告和促销活动中的许多元素中,各种色调的渐变用于标题,文本甚至ISO系统中。然而,在背景中,尤其是在iPhone X的主屏幕上的设计中,渐变不像传统的线性或径向渐变那样是均匀的,而是具有不规则混合的多色。
主屏幕,iPhone X中的多色渐变
3D中的渐变
谈论3D中的渐变似乎是显而易见的,因为场景的照明在物体的表面上产生了渐变的光,但是这种趋势固有的恰恰是使用渐变作为物体的纹理,有时模仿顶点颜色和色彩映射渐变技术。这两种技术不仅仅用于纯粹的装饰功能,因为它们用于表示数据或映射3D对象。
三维渐变映射
梯度的类型
我们可以通过多种方式混合颜色,最常见的是线性或径向渐变,具有不同的参数,如半径,方向,不透明度或色点。正如我们在iPhoneX中看到的那样,现在时尚的是使用渐变网格或其他技术的非均匀混合。使用渐变的表面以生成自由形状。我们可以找到许多类型的渐变,如单调,双色调,多色,渐变斜坡等,如下图所示。
CSS渐变的有用工具
要在CSS中重新创建这些效果,可以使用大量工具通过可视化编辑器创建它们,只需复制并粘贴CSS代码,如下所示:Webgradients , Khroma AI,Color Space,UI Gradients,Grabient,Coolhue,简化CSS中的渐变。
Funletu鉴赏系列
一如既往,我们已经选择了SOTD和被提名者,以便您可以看到这些效果在使用中,我们希望您能在从中找到一些灵感。
Usa Today Redesign GradientsInGradient Gradients
Julie Bonnemoy PortfolioInTrendy Gradients
WebGL 3D modelInWebGL
Elje-group GradientsInGradient Gradients
Keyboard interactionInHovers, Cursors and Cute Interactions
Gradient transition color menuInMenus Inspiration
Playup Vector Elements GradientsInGradient Gradients