文章列表 頁1

教學

[CSS] CSS 原生變數(CSS Variables)使用技巧與說明

在還沒有原生的 CSS 變數之前,很多人應該在使用 SCSS 等工具在撰寫的時候感受到變數的方便,而 CSS 在近年也有了原生的變數可以使用,搭配好還是可以在撰寫純 CSS 的時候讓 code 變得更好維護。

教學

自訂網頁卷軸(scrollbar)樣式

以前要設定網頁捲軸顏色的時候曾經有段時間可以使用 -ms-scrollbar-base-color,不過這過當出只存在舊版 ie,現在這個屬性已經沒有用了,如果還有想要在網頁上自訂卷軸樣式的話,可以使用 ::-webkit-scrollbar 的屬性。

教學

[Three.js] 在空間裡畫線

說明如何使用 Three.js 畫線。

教學

GSAP3 教學- stagger 製作依序執行的動畫

要使用 GSAP 製作依序執行的動畫也很簡單,首先我們準備一些 html 都把它加上一樣的 class,當然如果是一樣的長相也可以,GSAP 的方便就是只要你希望某些東西是依序執行的,我們可以透過加上一樣的 class 來設定。

教學

GSAP3 教學- 動態回饋效果 easing

在 GSAP 裡我們可以很輕鬆的設定動態回饋的效果,只要到 GSAP 文件的 easing 部分,透過下面這個工具就可以幫我們預覽以及產生簡單的程式碼。

教學

[Vue.js] 建置 Vue-cli 開發環境

為了要快速開發 vue 的專案,我們常常會搭配 Vue-cli,這邊介紹一下該怎麼設定 vue-cli 的環境。

教學

[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 是一個很方便用來架站的套裝軟體,如果自己會一些程式的話,也可以利用它來方便客製化一些網站的頁面,如果我們想要在網站新增一個新的樣板可以這麼做。

教學

[SVG] 影響圖形大小的 viewport 與 viewbox

在 svg 裡的 viewport 跟 viewbox 算是滿重要的觀念,可以影響圖形的大小,這邊也來做一下說明。

教學

GSAP3 教學- tweens 補間動畫

最近發現 GSAP 更新到 3.x 版了,寫法也跟以往不一樣,覺得變簡單也更好懂了,這邊一樣做一下筆記。

教學

使用 CSS 製作等比例縮放區塊- aspect-ratio

在現在網頁開發都要求在個解析度下都能正常瀏覽的環境下,常常就會需要了解怎麼製作等比例縮放的區塊,這邊整理一些方法:

教學

使用 VSCode 快速生成 Vue 模板

應該用 VS Code 開發網頁的朋友不少,雖這邊來教一下大家怎麼使用 VS Code 快速建立 vue 的模板。

教學

TweenMax 教學- 序列動畫 Timeline

如果想要做序列動畫,可以使用 TimelineMax 來製作,使用方法首先 new 一個 TimelineMax 的物件,可以設定重複次數跟重複開始時間等,再對每個元素設定變化的值,就可以依序跑動畫了。

教學

TweenMax 教學- Special properties

介紹 TweenMax 中 Special properties 的用法。

教學

tailwindcss 安裝教學

介紹一下該怎麼使用 parcel.js 來幫助我們安裝 tailwindcss 的環境。