文章列表 頁1
[CSS] CSS 原生變數(CSS Variables)使用技巧與說明
在還沒有原生的 CSS 變數之前，很多人應該在使用 SCSS 等工具在撰寫的時候感受到變數的方便，而 CSS 在近年也有了原生的變數可以使用，搭配好還是可以在撰寫純 CSS 的時候讓 code 變得更好維護。
自訂網頁卷軸(scrollbar)樣式
以前要設定網頁捲軸顏色的時候曾經有段時間可以使用 -ms-scrollbar-base-color，不過這過當出只存在舊版 ie，現在這個屬性已經沒有用了，如果還有想要在網頁上自訂卷軸樣式的話，可以使用 ::-webkit-scrollbar 的屬性。
GSAP3 教學- stagger 製作依序執行的動畫
要使用 GSAP 製作依序執行的動畫也很簡單，首先我們準備一些 html 都把它加上一樣的 class，當然如果是一樣的長相也可以，GSAP 的方便就是只要你希望某些東西是依序執行的，我們可以透過加上一樣的 class 來設定。
GSAP3 教學- 動態回饋效果 easing
在 GSAP 裡我們可以很輕鬆的設定動態回饋的效果，只要到 GSAP 文件的 easing 部分，透過下面這個工具就可以幫我們預覽以及產生簡單的程式碼。
[CSS] 設定 dark mode 下的 CSS 樣式
Mac 在近年推出了 Dark Mode，讓一些喜歡暗色系的使用者可以享受深色底的視窗環境，而這個 Dark Mode 也可以直接在 CSS 的 media query 設定，就能讓你的網頁在 Dark Mode 之下能長得不一樣喔。
在 Chrome 使用 Lighthouse 來檢查使用者體驗與 SEO
有在開發網站的人，應該都會關心自己網站的使用者體驗與 SEO，google 的 chrome 就推出了方便的檢查工具 Lighthouse，只要在 chrome 上安裝後，就可以輕鬆的檢查該網站的 SEO 以及使用者體驗囉。
解決手機上 safari, chrome 瀏覽器 100vh 無法剛好一整頁的問題
如果我們想要把內容鎖定在一個頁面的高度，在電腦版很自然會想到用 100vh 去設定，但在 safari 會遇到一個問題就是你預期他高度是一個螢幕高，但 header 跟底下的 nav 會把螢幕蓋掉，這樣就會發有一部分被遮掉了。
[CSS] 使用 scroll-behavior 達成免用 js 的平滑滾動效果
常常在做一頁式的頁面時，會做到點了某的按鈕會滑動到指定地方的效果，這個傳統來說是先利用 id 設定錨點，點擊後再根據錨點算出移動的距離後移動過去，現在我們可以用純 CSS 的 scroll-behavior 就幫我們達成這個功能了。
[WordPress] 自訂(客製化)樣板教學
WordPress 是一個很方便用來架站的套裝軟體，如果自己會一些程式的話，也可以利用它來方便客製化一些網站的頁面，如果我們想要在網站新增一個新的樣板可以這麼做。
TweenMax 教學- 序列動畫 Timeline
如果想要做序列動畫，可以使用 TimelineMax 來製作，使用方法首先 new 一個 TimelineMax 的物件，可以設定重複次數跟重複開始時間等，再對每個元素設定變化的值，就可以依序跑動畫了。
