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

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

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

實測 Cloudflare Fonts 能讓網頁的雲端字型載入速度變得多快?

看到知名的網路佛堂 Cloudflare 在 2023/9 底推出了新服務Cloudflare Fonts: enhancing website font privacy and speed，現在許多網頁為了顯示漂亮好看、並且能被搜尋引擎輕易檢索的文字，常常都會掛上一些 webfont 服務，而免費的 Google Fonts 是目前市占率最高 的服務之一。 Cloudflare 特別做了一個服務，來解決網站使用 Google Fonts 當 webfont 的兩大痛點: Cloudflare Fonts 網頁中有額外的字體檔案，為網頁載入帶來延遲 ...

繼續閱讀

網頁設計軟體產品體驗

#cloudflare#css#webfont

使用這些漸層產生器和 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

Google Fonts 遭指用免費字型追蹤使用者? 研究各家 web font 的實作方式和隱私條款

我的中文Web Font 踩雷記事本已經多年沒更新了，想不到今天又遇上新題材。 大致就是吃飯滑手機時看到一篇報導 繞過 Cookie 限制！Google 遭指用免費字型追蹤使用者，除了 INSIDE 之外，國內幾家科技媒體如 Cool3C 之類的都有刊出。內容大致是引用外媒的報導，宣稱 Google 透過提供特定免費字型讓使用者下載安裝，藉此追蹤使用者藉由裝置上網時的瀏覽行為云云，使用者可以採取自保的手段就是使用瀏覽器的內建功能或額外安裝擴充套...

繼續閱讀

數位行銷科技看新聞會與事實脫節科技新聞解析網頁設計

#adobe#css#google#webfont

表格框線異常變粗之謎，調整了瀏覽器縮放比例是其中原因之一

以前會碰到一個惱人的網頁設計怪問題， 要重現問題很簡單，就是調整電腦瀏覽器縮放設定(用Ctrl+滾輪，或是從瀏覽器工具列裡面選)，或是調整 Windows 的縮放設定(例如顯示設定>變更文字、應用程式與其他項目的大小)，只要不是 100%，網頁就會顯示得怪怪的，例如表格/儲存格的框線會粗細不一，如以下範例: Windows，有一條橫線特別粗 macOS Monterey 接一般的 PC 螢幕，橫線跟直線都有幾條特別粗 macOS Ventura 的 Macbook Air，...

繼續閱讀

網頁設計

#css#RWD

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

下一頁

近期熱門 Hot Posts

最新發布 New Posts
    Open Email Client