免費線上工具!Neumorphism.io 客製化 Soft UI 生產器,一鍵複製 CSS 程式碼

Neumorphism.io-design-hu-bg

歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略!Neumorphism.io 是一個能夠幫助使用者快速建立 Soft UI 的免費線上工具,版面簡潔易懂以拖拉方式即可完成編輯,並且能立即生成 CSS 程式碼,如果你是一位設計師或是前端工程師的話,Neumorphism.io 或許會是你工作上的好幫手,接下來就跟著我們的腳步一起看下去吧!

Neumorphism.io

Neumorphism 是什麼

首先我們先來了解 Neumorphism 是什麼,Neumorphism 是由「New Skeuomorphism」組合而成的新名詞,,中文稱作新擬態、同化,也就是新型態的擬物化風格設計的意思,也有設計師稱其為 Soft UI(軟UI)。

Neumorphism 風格源頭為烏克蘭的設計師 Alexander Plyuto,於 2019年底所發表的作品「Skeuomorph Mobile Banking」,也是 2020年最熱門的新風格,它透過燈光的原理,替圖形加上高光和陰影,賦予元件真實和立體感。

Neumorphism.io 是什麼

因此 Neumorphism.io 也就是一個基於 Neumorphism 的設計概念所發展出來的免費線上工具,透過 Neumorphism 使用者可以直接在線上以拖拉的方式設計且得到 CSS 程式碼,在 Neumorphism 上使用者可選擇燈光位置來源,以拖拉來調整顏色、尺寸、半徑、光影的距離、光影的強度、光影的模糊、形狀等,並且可一件複製 CSS 程式碼。

neumorphism-design-hu

Neumorphism.io 使用教學

第一步:開啟 Neumorphism.io 網站後,即可看到完整可編輯的版面。

第二步:編輯燈光位置、顏色、尺寸、半徑、光影的距離、光影的強度、光影的模糊、形狀等。

neumorphism step2 design hu

第三步:按下「Copy」即可複製 CSS 程式碼。

AI Irasutoya – AI 生成免費日式插圖!
https://www.design-hu.com.tw/webmaster-tools/ai-irasutoya.html
Soco-st 可商用的日式免費插圖素材,支援日、英文及多種檔案格式
https://www.design-hu.com.tw/webmaster-tools/soco-st.html

結語

若想要設計 Neumorphism 卻不會寫程式碼或是對設計沒有概念想要學習 Neumorphism 的使用者來說 Neumorphism.io 會是一個分長好的幫手,不僅版面簡潔易懂,以拖拉方式即可完成編輯外,還可以一件複製 CSS 程式碼。

那今天的分享就到這裡告一段落了,如果想了解最新網站知識,也可以到 鵠崙設計 官網看看,我們下次的教學見~

鵠學苑|訂閱電子報

鵠學苑|網頁設計 線上免費諮詢

架站資源相關文章:

網站資訊文章推薦

通用 Google Analytics 即將停止服務,快來確認資源有沒有影響!
CTRCPMCPCCPA是什麼?一次搞懂20個網路廣告用語!
行銷組合4P4C?擬定行銷策略前必須了解的消費者觀點!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

返回頂端