
Neumorphism CSS Generator 是一款能夠提供前端設計師快速線上建立 Soft UI 的一項免費工具,他目前能夠讓你調整圖型的大小、邊框半徑、陰影的距離、陰影凸起或凹陷、光源角度、以及整體主題的顏色。
Neumorphism 也有人稱之為 Soft UI,近似的翻譯可以理解為「新擬態」、「軟 UI」,也有的人將這個最新趨勢的前端設計風格稱為「新擬物風格」。這種風格大約起源於 2019 年底,並且在 iOS 13 的系統更新中,就可以看到大量的 Neumorphism 風格。
新擬態設計風格通常會應用於按鈕或卡片的元素,並且通常只有一個光源的照射,比較特別的點在於,按鈕的狀態會呈現突出與凹陷,兩種不同的效果,分別表示按鈕是否點選。簡單來說,新擬態設計風格是一種圖形樣式,目的是為了賦予 UI 介面更加真實的視覺感。
網站名稱:Toolbox – Neumorphism Generator
網站網址:http://santhoshsivan.com/neu.html
Neumorphism CSS Generator 簡介教學
Step 1
進入頁面後,你可以透過左側的工具進行外觀樣式的調整。目前提供的功能有:
- Size:整個區塊的大小
- Radius:圓角半徑
- Distance:陰影的距離範圍
- Light Source Direction:光源的照射角度
- Color Theme:整體的顏色
Step 2
調整完後,點選左側最下方的「Generate CSS」按鈕,他就能產生 CSS 程式碼。複製後你就可以貼至你的專案中,應用你剛剛所設計的新擬態風格的元素。
Neumorphism CSS Generator 評價推薦優點
- 線上客製化新擬態風格 UI 元素
- 免費產生 CSS 程式碼
- 可設定凸起與凹陷樣式
相關文章
- Alwane 免費網站色碼分析工具,透過 HTML 與 CSS 抓取網站使用色系,並以視覺化方式分組呈現所有顏色
- CSS Background Patterns – 21+ 免費線上背景 CSS 樣式,可即時預覽與設定顏色間距及透明度並一鍵複製
- RipFrom 輸入網址即可免費下載 YouTube、Facebook、Vimeo 等熱門網站影片
- rDrop.link P2P 免費雲端檔案傳輸服務,無限制、不壓縮檔案大小,可持續上傳檔案與接收下載
- Snapsave.io 免費 YouTube 影片轉檔下載工具,透過瀏覽其即可下載 MP4/MP3 格式影音檔案
- SaveFrom 免費 YouTube 影片下載工具,支援 TikTok、IG、Facebook 各種熱門影音網站下載
- YT Cutter 線上 YouTube 影片下載工具,提供線上剪輯功能並可轉檔成各種影音格式
- Domcomp 網域名稱比價網站,快速尋找最便宜的網域註冊商完整教學(首購、續約、轉移)
- Converto 線上免費 YouTube 下載與轉檔,提供線上剪輯與 MP3/MP4 轉檔功能
- Clipdrop Text Remover 立即去除圖片中的文字!免註冊、免下載軟體,一鍵操作即可下載修飾過的圖片
- Freemake Video Downloader 線上免費下載 YouTube、Pornhub 網站影片並自動轉換成 MP4 或 MP3 格式
- ClipDrop Relight 線上重新調整圖片光源,可添加多個光源重新將圖片打光,不須註冊即可免費使用下載
發佈留言