元件化 什麼是元件化？簡單來說就是將重複的東西包成元件反覆使用，在 Day01 - 什麼是 Tailwind CSS？ 我們有提到 Tailwind CSS...
肉鬆
‧
2022-10-05
今天要實作的按鈕為～剛好看到有這麼炫砲的按鈕可以學習，就分享上來給大家～ 首先，就影片作者而言，今天示範的方法只是其中一種，使用 blur 的方式達成此種按鈕...
實戰演練 - Day6 我們昨天練習了 footer 區塊，學到元素內部間距用 padding，元素外部間距用 margin。瞭解元素標籤不要只使用 div，...
肉鬆
‧
2022-10-12
Button Ripple Effect（原生JS版） CodePen Link: https://codepen.io/zyrxdkoz/pen/yLXgxO...
實戰演練 - Day4 我們昨天練習了搜尋功能，學到如何使用漸變效果、將 select 預設箭頭移除改用圖片顯示並取消點擊事件。今天練習部分是卡片元件，那麼開...
肉鬆
‧
2022-10-10
什麼是響應式設計？ 我們時常聽到的 RWD 全名為 Responsive Web Design，代表網頁根據不同裝置的寬度改變排版與顯示內容。 響應式設計 T...
肉鬆
‧
2022-10-04
心得感想 首先想跟自己說聲：辛苦了。這是我第一次參加鐵人賽，很高興自己堅持到最後。第一次參加有些東西可能詮釋沒有這麼到位，不過也算是訓練自己的表達與寫作能力。...
肉鬆
‧
2022-10-13
網格 什麼是網格？網格的概念是，類似一套層級系統，同時給你豐富的多樣性，網格完全沒變，變得是網格裡面的東西，早期螢幕寬度約為1024，還需要扣除瀏覽器的 Sc...
肉鬆
‧
2022-09-29
這個 app 將從 supabase 讀取資料，在透過自製 Tailwind CSS 元件，呈現類似 netflix，hulu 的影像畫廊(image gall...
商業應用程式不同於網頁，具有相當多樣且細緻的互動設計，而且頁面的內容配置亦相對複雜，並且需要支援各種頁面上資料的同步呈現操作，例如訂單處理介面，就必須切割介面，...
昨天把整個專案架起來了今天我們就可以開始來刻畫面了 這邊也要提一下之前我們其實是直接開寫 先從會員登入註冊開始然後慢慢想到什麼做什麼畫面也超亂的 因為第一次寫r...
變換（Transforms） 透過 transform 屬性藉此變換元素。 Scale（縮放） scale-0 scale-50 scale-75 scal...
肉鬆
‧
2022-09-30
今天來實作Navite Camp的Nav，看官們可以點網址去看他的效果，因為沒有時間，滑鼠移動到各tab時下面橘色border會滑順的移動，這個暫時沒時間去實作...
TailwindCSS 與 Headless UI 就像用原型食物去做烹煮，而不是經過非常多製程的加工食品。當我們使用它們時，我們得到的是最基本、最純粹的成分，...
實戰演練 - Day5 我們昨天練習了景點列表，學到圖片放大或圓角外層要加上 overflow-hidden，圖片固定高度加上 object-cover 避免...
肉鬆
‧
2022-10-11
實戰演練 - Day1 首先恭喜各位看到這邊。（灑花相信各位對於 Tailwind CSS 也有一定的認識，接下來我們將進行實戰演練，每天練習一個區塊，為期6...
肉鬆
‧
2022-10-07
間距 間距在網頁中是不可或缺的，間距不僅能使版面看起來更舒服，也豐富了網頁版面的多樣性。 間距單位 p/m-0 ⇒ 0px p/m-1 ⇒ 0.25rem...
肉鬆
‧
2022-09-25
讀取 Supabase 資料首先安裝 supabase-js： npm i @supabase/supabase-js 接著，在根目錄，建立 client.j...
效果 網頁元素增添許多效果產生不同的視覺變化，效果的輔助讓元件更有多樣性。 陰影（Box Shadow） shadow-sm shadow shadow-m...
肉鬆
‧
2022-09-27
今天會帶大家實作一個主要效果：placeholder go up on focus，這是 google 登入畫面會使用的效果 首先建立基本架構，今天只以一個...
如果真的有一步一步看過這個系列的教學文章，可以發現在 tailwindcss 的世界中，雖然可以很清楚的了解每一個元件的命名以及異議，例如：w-32 就表示寬度...
實戰演練 - Day3 我們昨天練習了類別選單，學到 grid 改變選單按鈕的數量、grayscale 讓圖片以灰階呈現。今天練習區塊是搜尋功能，那麼開始今天...
肉鬆
‧
2022-10-09
更改網頁的 title，建立 Meta 元件：(1)更改網頁 title 及其他 meta 資料(2)更改 Contact Us 網頁 title(3)更改個別...
「開發的時候多想想，可以走捷徑時絕對不會繞遠路」 本篇要來介紹一款前端CSS框架「Tailwind CSS」 Tailwind CSS 是什麼? 官方網站：ht...
偽類 以一個冒號 ： 作為前綴詞宣告使用，後面接偽類名稱。 :hover 藉由 hover: 滑鼠停留在元素時變更樣式，舉個例子： <div class...
肉鬆
‧
2022-10-01
樣式 從 codepen 的 CSS Base 可以看到有兩種清除 CSS 樣式的方法，Reset 與 Normalize，Reset 會將大部分標籤的樣式全...
肉鬆
‧
2022-09-22
將 Supabase 資料秀在螢幕上從 Supabase 成功讀取資料後，要秀出這些資料在螢幕上，需要兩個動作。每一個影像(image)需要一個圖片卡來放圖片及...
Prepare 開始準備前端的工作，之前跑hello tauri的時候，我們用cargo tauri dev，這個會自己watch，所以我們不用寫cargo w...
本篇開箱是TailwindCSS預覽工具以及針對Tailwind CSS斷點設定擋調整 由於前兩篇是介紹WindowResize時要抓取的一些行為，這需求都...
這個單元將接續上一個單元製作的卡片排版來延伸。 一般來說使用卡片排版，會有好幾個卡片同時出現，接下來就繼續討論如何放入多個卡片排版。 一開始宣告最上層的 div...
linlaose
SingYo
tjabi
shrine90459
Moscle.dev
ysl0628
Mr. JK
peterlu
hello world
切版姐姐
iThome鐵人賽
看影片追技術