✏️全部文章
如何用 CSS 的 box-shadow 來做 S 型圓角？
前端網頁動效-前言 前幾天看到這樣的卡片效果，覺得他圖片和下面文字部分銜接的樣子很特別，是一個 S 型的圓角。 研究之後發現它居然是用 box-shadow 做的！？ 往下看具體怎麼做吧！ HTML ＆ C...
前往如何用 CSS 的 box-shadow 來做 S 型圓角？文章Terminal 終端機文字特效
前端網頁動效-前陣子看到這個文字特效，在 hover 時文字會依序隨機變換，最後變回原本的字，有種產生亂碼的感覺，研究了一下，發現不會很複雜～ 今天就讓我們看看這究竟是怎麼做的吧～ 終端機文字特效 HTML ...
前往Terminal 終端機文字特效文章如何用原生 JS 和 CSS 做 3D carousel？
前端網頁動效-前陣子看到台灣服飾品牌 namesake 的網站，它們產品介紹的頁面是使用 3d carousel，覺得超酷 👇 研究一下之後其實不會很難，今天就帶你用原生 JS 和 CSS 做出一樣的特效！👇...
前往如何用原生 JS 和 CSS 做 3D carousel？文章網頁的流動背景怎麼做？讓你的網站背景不再死版
前端網頁動效-第一眼看到這個背景，以為是用 webGl 做的，研究之後發現其實很簡單。 原理是幾個 div 元素在後面跑，並對整個 container 做 blur。 讓我們先來看 HTML 架構 👇 流動...
前往網頁的流動背景怎麼做？讓你的網站背景不再死版文章深入解析 CSS z-index 和 stacking context 堆疊上下文
前端基礎-你有發生過設定 z-index: 999 的元素蓋不過 z-index: 0 的元素嗎，今天我通過這篇文，帶你清楚了解 z-index 以及瀏覽器的元素先後比較機制。 z-index 是什麼 z-...
前往深入解析 CSS z-index 和 stacking context 堆疊上下文文章"我刀槍不入" 讀後感想 - 如何掌握你的思想，跨出舒適圈
其它內容-"我，刀槍不入" 的作者，是如何逆轉自己的命運的？ 你是否曾因長期處於舒適區而感到罪惡感，渴望有人激勵你跨出舒適區，在事業或興趣上實現成長？ 若是如此，這本書將非常適合你。 作者大衛‧戈金斯，不僅...
前往"我刀槍不入" 讀後感想 - 如何掌握你的思想，跨出舒適圈文章HTML img 標籤的三個實用方法
前端基礎-限制圖片大小 如果我們用 width: 100%，圖片會跟著父元素的寬度，當父元素越大，圖片也會變大，如下👇 有時候我們希望圖片的大小不要超過原始尺寸，此時就可以用 max-width: 100...
前往HTML img 標籤的三個實用方法文章如何用 CSS 做 Accordion 手風琴？不再需要用 JS 計算高度
前端網頁動效-accordion 是前端非常常見的組件，他長這個樣子 👇 點擊時候展開顯示內容，再次點擊就關閉。 因為 css height 屬性如果從 0 到 auto 是吃不到 transition 效果...
前往如何用 CSS 做 Accordion 手風琴？不再需要用 JS 計算高度文章React Compiler 介紹 - 甚麼是 compiller？他有哪些好處？
前端框架-React 19 除了更新了很多有關表單和異步操作的 hook 以外，最令人興奮的還是 React Compiler 的消息。 那究竟 React Compiler 是甚麼？又為什麼讓人興奮？今天這...
前往React Compiler 介紹 - 甚麼是 compiller？他有哪些好處？文章JS 實現深拷貝的三種方法 - 面試必考的 DeepClone
前端進階-前言 深淺拷貝是面試很常問的問題，今天就來好好聊一聊在 JS 中的深淺拷貝，以及為甚麼要用深淺拷貝吧！ 為甚麼要用淺拷貝？ 對於一般的原始型別(Primitive Type)，像是 boolea...
前往JS 實現深拷貝的三種方法 - 面試必考的 DeepClone文章