Category 前端

用 CSS 統一控制 SVG 樣式

這篇文章將帶你了解 SVG 圖片與 CSS 的強大結合，學習如何透過 CSS 來操控 SVG 圖形的樣式，賦予你的網頁設計更多彈性和創意。

在 Vue 3 中，自製 plugin 是一種擴充 Vue 功能的方式。透過自製 plugin，我們可以向 Vue 添加新的全局方法、屬性或指令。在本篇文章中，我們將介紹如何自製一個 $ 方法。

網頁前端上傳圖片預覽是提升使用者體驗的重要功能之一，在檔案上傳的情境中，很常是要上傳圖片檔案，本篇文章將來實作圖片上傳後產生該圖片的預覽圖。使用者上傳圖片，透過 File API 讀取該檔案，並轉換成 DataURL，接著將該 URL 設定為圖片元素的 src 屬性，即可實現即時預覽。

製作網頁上傳區域，結合拖曳及點擊選擇檔案功能，提升使用者體驗。透過直覺的拖曳動作或傳統的點擊方式，輕鬆選取檔案，使整個上傳流程更為靈活且方便，凸顯網頁互動設計的創新與便利性。

ScrollTrigger 是 GSAP 的一個擴充套件，用來製作滑鼠滾動觸發動畫。GSAP ScrollTrigger 提供強大的滾動控制，讓網頁動畫輕鬆實現。透過簡單的 API，你能精確掌握動畫觸發點、速度和方向，呈現更流暢、自然的視覺效果。

GSAP Timeline 是 Tween 或者其他 Timeline 的容器，讓我們可以更簡單的製作複雜的動畫。舉例來說，如果沒有 Timeline 我們就只能用 Tween 上的 delay 屬性來決定動畫的先後，但透過 Timeline，我們就可以直接指定動畫的先後順序

在 GSAP 中，可以將 Tween 視為一個 css 屬性設定器，我們可以在指定元素上，賦予起始屬性或終止屬性，隨後 GSAP 就會幫我們把動畫產生出來。

在撰寫網頁樣式時，我們調整畫面樣式需要透過 css 選擇器去找到 html 中的元素，再對其下對應的 css 屬性，本篇文章將描述各種網頁開發常見的 css 選擇器

本文章講解如何在 astro 專案中安裝 tailwindcss 套件，以及使用 prettier 來做 tailwindcss class 的自動排版。