漸層色按鈕hover效果

漸層色按鈕 Hover 效果

本篇大綱:本篇要解決的問題、寫code前的原理思考、實作程式碼部份。今天在看Google AMP的文件時,看見他們頁面上的按鈕,就是非漸色轉到漸層色,並且還能帶有transition的過渡。看了一下他們的寫法,發現原理很簡單,就寫了一個在CodePen上,方便以後取用。

0
一個簡單的卡片樣式 simple card ui

一個簡單的卡片樣式 Simple Card UI

從Google Material Design問世以後,愈來愈多網站設計出了卡片的ui。卡片樣式大同小異,大部份包含:頭(大圖)、身體(內文)、尾巴(連結)。今天設計了一個簡單造形的卡片,歡迎大家取用。以下講一下設計上的思考,跟一些最近常用的方法。

0
medium 漸進式圖片

像 Medium 的漸近式圖片加載

本篇大綱:圖片延遲載入的3種方式、Medium漸進式載入的3個步驟、Medium漸進式載入,實作程式碼部份、實測頁面讀取時間。實際把頁面用pindom去測試後,頁面讀取時間真的加快了。下面這張是一般直接讀取圖片的數據,4.57秒,下面這張是用了延遲載入後的數據,降到2.02秒。

2
Google Analytics 加上 AI

Google Analytics 加上 AI

GA大概是全球網站資料分析工具中市佔率最高的,所以AI提出的資訊會是大部份的網站都想知道的,像圖片中出現的Facebook來源狀況,跟網站的忠誠度,光看到標題就想點進去了。點進忠誠度這點,就看見以目前的網站數據,分析為什麼AI會覺得忠誠度降低的原因,並直接搭配圖表來說明。

0