網頁設計中的時尚漸變

漸變已經流行了一段時間,他們最初以背景和圖像的傳統方式捲土重來。Spotify通過在照片中應用雙色調漸變作為其品牌在其活動和微型網站中的特徵元素,再次使它們變得流行。你可以教程。

Spotify微型網站2015,雙色調圖像與漸變映射。

今年我們已經看到了各種各樣的彩色漸變色,帶有鮮艷的調色板和不規則的形狀,帶有模糊和失真效果。漸變目前正在以多種方式使用,但就趨勢而言,最具特色的是它們的使用被擴展到合成中的次要元素,例如懸停,標題,3D元素,圖標等。

儒雅的數字漸變懸停和轉變轉變

懸停效果的漸變

iphone x代表2018年趨勢的範例。在其着陸頁,廣告和促銷活動中的許多元素中,各種色調的漸變用於標題,文本甚至ISO系統中。然而,在背景中,尤其是在iPhone X的主屏幕上的設計中,漸變不像傳統的線性或徑向漸變那樣是均勻的,而是具有不規則混合的多色

主屏幕,iPhone X中的多色漸變

3D中的漸變

談論3D中的漸變似乎是顯而易見的,因為場景的照明在物體的表面上產生了漸變的光,但是這種趨勢固有的恰恰是使用漸變作為物體的紋理,有時模仿頂點顏色色彩映射漸變技術。這兩種技術不僅僅用於純粹的裝飾功能,因為它們用於表示數據或映射3D對象。

三維漸變映射

不太可能時尚漸變中的Studio 3D映射

梯度的類型

我們可以通過多種方式混合顏色,最常見的是線性或徑向漸變,具有不同的參數,如半徑,方向,不透明度或色點。正如我們在iPhoneX中看到的那樣,現在時尚的是使用漸變網格或其他技術的非均勻混合。使用漸變的表面以生成自由形狀。我們可以找到許多類型的漸變,如單調,雙色調,多色,漸變斜坡等,如下圖所示。

CSS漸變的有用工具

要在CSS中重新創建這些效果,可以使用大量工具通過可視化編輯器創建它們,只需複製並粘貼CSS代碼,如下所示:Webgradients ,  Khroma AIColor SpaceUI GradientsGrabientCoolhue簡化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

 

給TA打賞
共{{data.count}}人
人已打賞
教程類

如何使用漸變映射在Photoshop中創建一個很酷的雙色調效果

2018-12-25 13:26:29

教程類

如何在Illustrator中創建彩色漸變球體

2018-12-26 23:20:04

0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
個人中心
今日簽到
有新私信 私信列表
搜索