要改的地方太多了，那就改天吧

目前正在瀏覽文章標籤：css3

Apple Vision Pro 內的 Safari 前端與 UI 設計雷區大公開

2024 年 1 月底 2 月初，蘋果的空間運算設備 Apple Vision Pro 終於媒體解禁與美國開賣，這個禮拜的社群到處都是戴著滑雪鏡般外型的機體，徜徉虛擬實境世界的短影片。 目前已經知道很重要的 3 點: 現階段還沒有中文輸入法，而且下載 app 需要準備美區的 Apple 帳號。 有些系統 UI 介面只有停止的時候才會顯示，沒辦法邊走邊用，視窗會「留在原地」，需要用手捏著視窗才能把視窗帶著走，但走動的時候，捏著的視窗會變半透明的，移...

繼續閱讀

使用者介面網頁設計視覺設計

#apple#css#css3#HTML5#ios#RWD#UI

測試瀏覽器原生 CSS Nesting 能不能完全做到 SCSS Nesting 的功能

巢狀CSS (CSS nesting)終於從 Chrome 版本號 120 開始支援，去年(2023/8左右) Firefox 就支援 CSS nesting 了，以前寫 SCSS 的老人們可以放心直接寫，不用再編譯嗎? 並沒有，本文就來做一些實測。 巢狀結構寫法，有時候可以提升 CSS 樣式碼的易讀性和可維護性，如下圖所示， 左邊是 SCSS，右邊是編譯出來給瀏覽器看的 CSS。 人類也可以直接寫出右邊的 code，但是要多打了一大堆重複的部份， 反觀左邊的看起來輕便不少。 如果是用...

繼續閱讀

網頁設計

#css#css3

使用這些漸層產生器和 Figma 套件，避免做出中間髒髒的漸層色

前陣子在社群看到一個平面印刷設計類的討論，大致一個透明漸層與黑色底色疊起來之後，中間看起來霧霧濁濁髒髒的，要怎麼解決? 原圖比較複雜，我另外做了一張示意圖 這是一個牽涉用 Adobe illustrator 做平面設計、CMYK油墨印刷、紙張材質的問題， 好像每隔一陣子就會出現一次， 這次的可能情況比較單純(底色是黑色K100。而不是其他顏色)，修改與示範相對容易，所以討論比較熱烈。 但就算用了一些方法把濁濁的顏色變鮮豔， 還是有...

繼續閱讀

使用者介面網頁設計視覺設計軟體產品體驗

#css#css3#UI

套版網頁設計的末日? 試玩 10 幾種 AI 網頁設計與架站工具

在 2023/3/15 的 GPT-4 Developer Livestream 直播發佈會中，OpenAI 為了展現 GPT-4 的多模態(multimodal)功能，在影片 16 分左右開始弄了一個把手繪稿轉成網頁的範例。 時間又過了好幾個月，GPT-4 辨認圖片的功能還是沒開放(更新:2023年底開放 gpt-4-vision-preview 模型，Tier1 的 OpenAI API 帳號可以使用)，但是這個腦洞大開的 demo 也讓市場上多了不少號稱 AI 網頁設計服務。 一個網頁大概有內容策略、文案寫作、視覺設計、...

繼續閱讀

使用者介面數位行銷科技科技新聞解析網頁設計視覺設計軟體產品體驗

#css#css3#domain#google#SEO#UI#ux

CSS mix-blend-mode 與 Photoshop 圖層混合功能對照

前幾天把一份別人的 Photoshop 設計稿做成網站，發現裡面用了不少 PS 圖層混合模式，例如下圖兩個簡易 wireframe 範例 圖左有一組清單，標題跟內文各有背景色，清單上面有一些透明圖案，會跟標題和內文的背景色混合。 只是把圖存成 PNG 蓋在上面肯定是不可行的，因為要跟底下其他區域混合後，才會是正確的顏色。 也無法把圖案墊在最下面，會被標題跟內文的背景圖蓋住，當然顏色也會不對。 用 RWD 的思考邏輯，肯定無法把圖案切開...

繼續閱讀

網頁設計視覺設計

#css#css3#ios#iphone#js

一篇前端討論區抱怨文讓大家 Tailwind 功力更上一層(附上 Bootstrap 比較)

前幾天才看到一篇文章You Don’t Need A UI Framework，一位需要在一個產品一再重複打磨的 in-house 外國工程師，出來講說大家做產品不應該用 Bootstrap, Material UI, Ant Design 之類的 UI Framework，讀了之後有點夏蟲語冰之感，工作型態百百種，就像一個不愁吃穿做興趣的私廚出來分析說早餐店不該用料理包、組合肉、現成化工調味料，不該用水果茶粉/奶茶粉來泡飲料、所有食材要當天採買的，要為客人的健康和餐飲業的未來發展著...

繼續閱讀

網頁設計

#bootstrap#css#css3#UI#ux

IE退役了又怎樣? 10 個 Safari 或 Firefox 的網頁瀏覽器相容性問題

微軟正式宣布 Internet Explorer (簡稱 IE 瀏覽器)將於 2022/6/15 停止支援，(the Internet Explorer 11 desktop application will be retired and go out of support on June 15, 2022, for certain versions of Windows 10)，但不確定到了那天會發生什麼事，會像 Flash Player 一樣完全無法使用? 網頁設計人員似乎對此都歡欣鼓舞，覺得以前不能用的 CSS 寫法，以前不能用的 JS 寫法、以前不能用的 HTML 元素像 detail&summary，...

繼續閱讀

網頁設計

#css#css3#ios#js

什麼! 寫 CSS 也要編譯?

畢竟正常的軟體公司不是用程式碼行數來算薪水跟 KPI 的，所以得找一些輕鬆的法子，有時候遇到只會寫 CSS 的人辛苦的寫樣式，但用一下新工具其實可以做得更輕鬆，但又很難三言兩語說明新工具的好，於是整理了這份資料。 學 SASS/SCSS/LESS/STYLUS之前，要先學 CSS 嗎? 當然要哇! 本質上還是 CSS，最後編譯出來的檔案還是 CSS，只是在過程中多了一些東西讓你更方便的寫 CSS。 跟這類似的問題: 學 HTML5 之前要先學 HTML4 嗎? 看哈利...

繼續閱讀

網頁設計軟體產品體驗

#css#css3

用 css 解決產品列表清單掉一格的情況

我們上網時偶爾會看到上圖左這種情況， 應該是一塊一塊排好的內容，卻出現異樣的空白? 有時候這個是設計風格，為了體現品牌的自由風氣，並特意強調那兩個落單區塊的獨特性，並且為了視覺上的平衡美感所做的處理，甚至還經過 A/B test 與各種 UX 實驗，除了可以達到最佳的轉換率，還可以引起討論話題… 但我想此例純粹就是個小失誤而已。(ps.上圖案例網頁不是我做的，只是上網時剛好逛到而已。) 在上圖右我們把每個塊狀元素的區域...

繼續閱讀

網頁設計

#css#css3#RWD

行動版網頁不就是把網頁縮小而已嗎?

這篇不講 coding 技巧，不講用 SASS 要怎麼寫，不講 Bootstrap 要怎麼用，不講各種 framework 怎樣達成 RWD 的原理。只是一份講行動版網站與做一般網站有何差異的概覽。 看不到資料的話請點此 行動版網頁不就是把網頁縮小而已嗎? //Speaker Deck 本簡報適合瀏覽對象: – 覺得行動版網頁只是把網頁縮小而已，沒什麼的人 – 為了學 RWD 還花錢跑去上課的人 – 不知道設計行動版網站有什麼眉角的初學者 – 被指派做行動...

繼續閱讀

使用者介面網頁設計

#css3#flash#HTML5#mediaquery#mobile#RWD#table#viewport#Web

近期熱門 Hot Posts

最新發布 New Posts
    Open Email Client