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

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

當 Elementor 賣起雲端架站平台：是自架 WordPress 網站的救星，還是高價陷阱？

當 WordPress 最受歡迎的頁面編輯器 Elementor Page Builder，自家推出主機服務，有特別好用嗎? 本文分享一下實測心得，探討 Elementor Hosting 服務，從企業級基礎架構、WordPress 功能限制、到價格效益分析。了解這個由網頁編輯器轉型的雲端架站平台，是否適合您的WordPress網站需求。...

繼續閱讀

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

#ai#cdn#cloudflare#css#dark+pattern#domain#editor#email#free#Https#linux#OpenSource#pagespeed#server#SMTP#ssl#webhosting#wordpress#網路開店#電商

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網頁中有額外的字體檔案，為網頁載入帶來延遲Google...

繼續閱讀

網頁設計軟體產品體驗

#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 網頁設計服務。一個網頁背後大概有內容策略、文案寫作、視覺設計、...

繼續閱讀

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

#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

下一頁

近期熱門 Hot Posts

最新發布 New Posts

    Contact Me

    E-Mail

    Open Email Client

    LINE 私訊
    此為 LINE 官方帳號，僅用於連絡，不會群發訊息

    加 LINE 好友

    FB Messenger/Instagram 私訊

    FB Messenger IG 小盒子

    Telegram 私訊

    傳訊息到 Telegram