• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
TechMoon 科技月球

TechMoon 科技月球

免費工具、WordPress、虛擬主機、 科技前端

  • 科技新知
  • 月球精選
  • 線上工具
  • 虛擬主機
    • Bluehost 主機
    • A2 Hosting 主機
    • SiteGround 主機
  • WordPress
    • WordPress 教學
    • WordPress 主題
    • WordPress 外掛
  • 免費資源
  • 優惠資訊
  • 自我提升
    • Excel 教學
    • 網路行銷
  • Udemy 免費課程
  • 虛擬主機總覽
目前位置: 首頁 / 免費資源 / Neumorphism CSS Generator – 新擬態風格圖形樣式產生器,線上客製化最新軟 UI 風格與產生 CSS 程式碼
Neumorphism CSS Generator - 新擬態風格圖形樣式產生器,線上客製化最新軟 UI 風格與產生 CSS 程式碼

Neumorphism CSS Generator – 新擬態風格圖形樣式產生器,線上客製化最新軟 UI 風格與產生 CSS 程式碼

Last Updated on 2021-02-28 By Sliven Leave a Comment

Bluehost 虛擬主機 4 折 60% OFF 優惠折扣
A2 Hosting Coupon
1 分鐘閱讀

Neumorphism CSS Generator 是一款能夠提供前端設計師快速線上建立 Soft UI 的一項免費工具,他目前能夠讓你調整圖型的大小、邊框半徑、陰影的距離、陰影凸起或凹陷、光源角度、以及整體主題的顏色。

Neumorphism 也有人稱之為 Soft UI,近似的翻譯可以理解為「新擬態」、「軟 UI」,也有的人將這個最新趨勢的前端設計風格稱為「新擬物風格」。這種風格大約起源於 2019 年底,並且在 iOS 13 的系統更新中,就可以看到大量的 Neumorphism 風格。

新擬態設計風格通常會應用於按鈕或卡片的元素,並且通常只有一個光源的照射,比較特別的點在於,按鈕的狀態會呈現突出與凹陷,兩種不同的效果,分別表示按鈕是否點選。簡單來說,新擬態設計風格是一種圖形樣式,目的是為了賦予 UI 介面更加真實的視覺感。

網站名稱:Toolbox – Neumorphism Generator
網站網址:http://santhoshsivan.com/neu.html

目錄
  1. 1. Neumorphism CSS Generator 簡介教學
  2. 2. 你可能有興趣
  3. 3. 更多相關文章

Neumorphism CSS Generator 簡介教學

Step 1

進入頁面後,你可以透過左側的工具進行外觀樣式的調整。目前提供的功能有:

  • Size:整個區塊的大小
  • Radius:圓角半徑
  • Distance:陰影的距離範圍
  • Light Source Direction:光源的照射角度
  • Color Theme:整體的顏色
透過側邊欄功能調整外觀樣式
透過側邊欄功能調整外觀樣式
Step 2

調整完後,點選左側最下方的「Generate CSS」按鈕,他就能產生 CSS 程式碼。複製後你就可以貼至你的專案中,應用你剛剛所設計的新擬態風格的元素。

產生與複製 CSS 程式碼
產生與複製 CSS 程式碼
Neumorphism CSS Generator - 新擬態風格圖形樣式產生器,線上客製化最新軟 UI 風格與產生 CSS 程式碼

Neumorphism CSS Generator 評價推薦優點

  • 線上客製化新擬態風格 UI 元素
  • 免費產生 CSS 程式碼
  • 可設定凸起與凹陷樣式

你可能有興趣

  • CSS Background Patterns – 21+ 免費線上背景 CSS 樣式,可即時預覽與設定顏色間距及透明度並一鍵複製
  • Koofr – 免費 10 GB 雲端儲存空間,可連結同步 Google Drive、Dropbox 與OneDrive 實現聚合管理功能
  • Mirrored.to – 整合多款免費雲端空間上傳服務,只需上傳一次即可批次將檔案上傳至多個鏡像免空
  • ProductShot – 免費上圖片局部放大產生器,幫助你凸顯圖片中的重點區塊並支援複製上傳下載功能
  • Whyp.it – 免費音樂雲端上傳空間,免註冊即可上傳音樂並即時線上高音質播放
  • Upload.cc – 老牌免費圖片上傳雲端空間,上限 5 MB 無需註冊永不刪檔支援批量圖片上傳功能
  • Blobs – 線上免費產生 Blobs 圖形,可調整大小形狀、漸變顏色並產生 SVG 格式與支援 Flutter 程式匯入
  • BackgroundCut – 最佳免費線上去背工具,採用 AI 技術處理刪除複雜背景並產生高解析度去背後圖片
  • CSS Gradient – 線上產生線性漸變背景,提供 5 種漸變模式與可客製化顏色與色段區間並產生 CSS 程式碼
  • Cool Backgrounds – 免費背景線上產生器,快速建立三角抽象、多線條、漸變與渲染的豐富背景
  • Trianglify.io – 線上多邊形圖片背景產生器,可客製化圖片的大小顏色與多邊形樣式並免費下載
  • Ray.so – 免費程式碼轉換圖片線上工具,將代碼製作成精美的色彩圖片可自由客製化圖片外觀

更多相關文章

  • CSS Gradient - 線上產生線性漸變背景,提供 5 種漸變模式與可客製化顏色與色段區間並產生 CSS 程式碼
  • SVG Favicon Maker - 線上製作網站 LOGO 圖標工具,可添加文字與 Emoji 並下載 SVG 與 PNG 檔案
  • [快速] 一行指令暫時隱藏 Mac 桌面檔案 - 讓你凌亂的桌面不會被看見
  • Blobs - 線上免費產生 Blobs 圖形,可調整大小形狀、漸變顏色並產生 SVG 格式與支援 Flutter 程式匯入
  • LineIcons - 超過 2000+ 個線形圖標庫,專為設計師與開發人員設計的圖標 Icons 免費下載
  • 【WordPress 付費主題免費下載】DONA - Creative Multi-Purpose Parallax WordPress Theme
  • Color Palette Generator - 免費線上調色盤產生器,一鍵自動產生 5 種搭配套色,並提供顏色代碼與一鍵複製顏色色碼!
  • 【WordPress 付費主題免費下載】Vihan | Personal & Travel WordPress Blog Theme
  • SVGOMG - 可複製貼上 SVG HTML 程式碼,壓縮優化 SVG 檔案大小與下載 SVG 檔案
  • 如何快速在 WordPress 中啟用 GZIP 資料壓縮功能
  • Octicons - GitHub 官方開源 Icons 免費圖示下載,支援 Ruby, Rails, Jekyll 適合開發者使用
  • 如何在 WordPress 中自定義滾動條?兩個方法教你快速設定!

如果你喜歡這篇文章,請幫我們將這篇文章分享出去。你也可以在 Facebook 與 Instagram 上按讚追蹤我們,也歡迎加入 Facebook 粉絲團和我們一同交流!

所屬分類: 免費資源, 線上工具 標籤: CSS, Neumorphism, Neumorphism CSS Generator, 新擬態, 新擬態風格, 軟 UI

關於 Sliven

每日分享科技新知、免費資源以及 WordPress、虛擬主機相關主題,任何問題歡迎在科技月球下方留言,或是發送 Email 至 [email protected] 與我聯繫。

讀者互動

發佈留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Primary Sidebar

追蹤我們

站內搜尋

最新文章

  • Videvo – 線上海量影片素材免費下載,Royalty-Free 免版稅可商用提供各種動態圖形、音樂曲目與音效素材
  • Koofr – 免費 10 GB 雲端儲存空間,可連結同步 Google Drive、Dropbox 與OneDrive 實現聚合管理功能
  • Mirrored.to – 整合多款免費雲端空間上傳服務,只需上傳一次即可批次將檔案上傳至多個鏡像免空
  • ProductShot – 免費上圖片局部放大產生器,幫助你凸顯圖片中的重點區塊並支援複製上傳下載功能
  • Whyp.it – 免費音樂雲端上傳空間,免註冊即可上傳音樂並即時線上高音質播放
  • 【WordPress 付費主題免費下載】Bethlehem – Church WordPress Theme
  • 【WordPress 付費主題免費下載】Anada – Data Science & Analytics Saas WordPress Theme
  • 【WordPress 付費主題免費下載】Yoome – Modern WooCommerce WordPress Theme
  • 【WordPress 付費主題免費下載】Cindy – Accessible Local Government WordPress Theme
  • Upload.cc – 老牌免費圖片上傳雲端空間,上限 5 MB 無需註冊永不刪檔支援批量圖片上傳功能
Bluehost best deal from TechMoon $2.95/月
Bluehost 獨家優惠
現在透過 TechMoon 專屬優惠折價券購買 Bluehost 主機,享有每月 $2.95 美元的獨家超低優惠價格,要搶要快!
自動套用優惠
立即購買!

熱門內容

  • Heroicons.dev - 線上開源 176+ 個免費圖示,一鍵複製 SVG 格式程式碼直接貼上顯示圖標!
  • 如何優化 WordPress 網站,提升網站速度?初學者也能自己優化網站的 4 個方法
  • Color Palette Generator - 免費線上調色盤產生器,一鍵自動產生 5 種搭配套色,並提供顏色代碼與一鍵複製顏色色碼!
  • CSS Gradient - 線上產生線性漸變背景,提供 5 種漸變模式與可客製化顏色與色段區間並產生 CSS 程式碼
  • 思源黑體 Noto Sans TC - 由 Google 提供的免費線上 Web Font,讓你免費就能擁有好看的中文字型
  • WordPress vs Blogger 哪一個比較好?
  • Unicons Solid - 3300+ icons 免費線上圖標庫,多達 27 種類別與 3 種樣式免費開源下載
  • LOADING.IO - 免費線上 Loading 載入動畫、文字、背景產生器,大量提供各種前端素材免費資源
  • CSS box-shadow examples by CSS Scan - 免費提供 82 種 Box-shadow CSS 陰影樣式,隨點擊複製使用 CSS 程式碼
  • Tailwind Ink - 線上 AI 顏色調色盤產生器,指定色碼後自動產生 100 個相關的顏色並直接提供色碼

相關文章

  • (2021 年 4 月)Udemy 免費課程優惠碼 – 付費課程限時折扣 0 元免費線上學習
  • ExpressVPN 評價 – 最佳 VPN 推薦工具 5 折優惠取得完整教學!
  • Payoneer 派安盈 – 海外/網路收款 1.2% 手續費比 PayPal 還低,額外 $25 美元獎勵免費註冊圖文教學
  • 奶牛快傳 – 4 GB 線上免費檔案傳輸分享服務,不僅快速連廣告都讓你覺得美與舒服
  • BackgroundCut – 最佳免費線上去背工具,採用 AI 技術處理刪除複雜背景並產生高解析度去背後圖片
  • Hippopx 線上免費圖庫 – CC0 可商用無需署名,多尺寸高畫質解析度免費下載
  • AI Image Upscaler – 免費線上圖片放大工具,採用 AI 技術可快速將小圖無損放大 2、4 倍
  • Lens – Mac 免費開源圖片格式轉換工具,可批次處理大量圖片支援 JPG、PNG 與 GIF 格式
  • 【WordPress 付費主題免費下載】Teoro – CV Resume WordPress Theme
  • Surfshark VPN – 超過 65+ 個國家與 3200+ 個伺服器,支援無限制裝置綁定及高速網路的首選 VPN 翻牆工具
Bluehost 虛擬主機 4 折 60% OFF 優惠折扣
A2 Hosting Coupon
TechMoon 科技月球 © 2021.
Theme by StudioPress
DMCA.com Protection Status
  • 免責聲明