漸變已經流行了一段時間,他們最初以背景和圖像的傳統方式捲土重來。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