實戰演練 - Day5 我們昨天練習了景點列表，學到圖片放大或圓角外層要加上 overflow-hidden，圖片固定高度加上 object-cover 避免...
肉鬆
‧
2022-10-11
今天要實作的按鈕為～剛好看到有這麼炫砲的按鈕可以學習，就分享上來給大家～ 首先，就影片作者而言，今天示範的方法只是其中一種，使用 blur 的方式達成此種按鈕...
實戰演練 - Day4 我們昨天練習了搜尋功能，學到如何使用漸變效果、將 select 預設箭頭移除改用圖片顯示並取消點擊事件。今天練習部分是卡片元件，那麼開...
肉鬆
‧
2022-10-10
實戰演練 - Day3 我們昨天練習了類別選單，學到 grid 改變選單按鈕的數量、grayscale 讓圖片以灰階呈現。今天練習區塊是搜尋功能，那麼開始今天...
肉鬆
‧
2022-10-09
實戰演練 - Day2 我們昨天練習了 header 區塊，今天開始進入 main 的區塊，網頁大致分為 header、main、footer 三大區塊，而網...
肉鬆
‧
2022-10-08
上一篇我們講到了 transition，但 transition 只是簡單的給予簡易的動畫，實際上能調整的只有整體動畫秒數，但如果我們想要將動畫切分成關鍵影格的...
實戰演練 - Day1 首先恭喜各位看到這邊。（灑花相信各位對於 Tailwind CSS 也有一定的認識，接下來我們將進行實戰演練，每天練習一個區塊，為期6...
肉鬆
‧
2022-10-07
套件 先前我們都是透過 codepen 講解 Tailwind CSS，實際開發會使用編輯器。套件輔助不但開發更加便利，甚至提升開發效率。接著介紹搭配 Tai...
肉鬆
‧
2022-10-06
元件化 什麼是元件化？簡單來說就是將重複的東西包成元件反覆使用，在 Day01 - 什麼是 Tailwind CSS？ 我們有提到 Tailwind CSS...
肉鬆
‧
2022-10-05
什麼是響應式設計？ 我們時常聽到的 RWD 全名為 Responsive Web Design，代表網頁根據不同裝置的寬度改變排版與顯示內容。 響應式設計 T...
肉鬆
‧
2022-10-04
(1) push 程式碼到 gitHub(2) Import 華國美學畫廊(image gallery app) 到 Vercel(3) 3-1 環境變數(En...
Transition 什麼是 Transition？顧名思義就是為了改變兩個外觀間轉換的屬性，加上 transition 可以補足兩個外觀間轉換的補間動畫，使...
肉鬆
‧
2022-10-03
更改網頁的 title，建立 Meta 元件：(1)更改網頁 title 及其他 meta 資料(2)更改 Contact Us 網頁 title(3)更改個別...
偽元素 昨日我們介紹了偽類，與偽類不同的偽元素則是以兩個冒號 :: 作為前綴詞宣告使用，後面接偽元素名稱。 ::before 與 ::after 藉由 ::b...
肉鬆
‧
2022-10-02
偽類 以一個冒號 ： 作為前綴詞宣告使用，後面接偽類名稱。 :hover 藉由 hover: 滑鼠停留在元素時變更樣式，舉個例子： <div class...
肉鬆
‧
2022-10-01
繼續加其他文字資料到圖卡上，增加圖片 title 到圖卡上。在 /components/ImageCard.js 加上下列指令。 <div classNa...
將 Supabase 資料秀在螢幕上從 Supabase 成功讀取資料後，要秀出這些資料在螢幕上，需要兩個動作。每一個影像(image)需要一個圖片卡來放圖片及...
變換（Transforms） 透過 transform 屬性藉此變換元素。 Scale（縮放） scale-0 scale-50 scale-75 scal...
肉鬆
‧
2022-09-30
讀取 Supabase 資料首先安裝 supabase-js： npm i @supabase/supabase-js 接著，在根目錄，建立 client.j...
今天來帶大家操作 background-image 以及 background-gradient～ 在使用 background-image 時，筆者常用以下...
網格 什麼是網格？網格的概念是，類似一套層級系統，同時給你豐富的多樣性，網格完全沒變，變得是網格裡面的東西，早期螢幕寬度約為1024，還需要扣除瀏覽器的 Sc...
肉鬆
‧
2022-09-29
以邊界 borders 來說，常用的筆者在此分為三大類 border、outline、ring，讓我們開始吧！ 一、Border Border Widthb...
新增 Navbar 至每個網頁頂端：利用 Next 的 Layout 元件，來建立每個網頁都可以看到的 Navbar。新增 components/Layout....
在介紹 flex box 與 grid 之後，今天要來帶大家將兩者合用並實作瀑布流排版囉！ 一、觀念講解 在將 flexbox 與 grid 混用之前，筆者先...
效果 網頁元素增添許多效果產生不同的視覺變化，效果的輔助讓元件更有多樣性。 陰影（Box Shadow） shadow-sm shadow shadow-m...
肉鬆
‧
2022-09-27
格線系統終於來了，起初在學習 tailwind 的時候還不曉得有格線系統，在 bootstrap 5(bs5) 用過格線系統後就來找找 tailwind 的格線...
間距 間距在網頁中是不可或缺的，間距不僅能使版面看起來更舒服，也豐富了網頁版面的多樣性。 間距單位 p/m-0 ⇒ 0px p/m-1 ⇒ 0.25rem...
肉鬆
‧
2022-09-25
這個 app 將從 supabase 讀取資料，在透過自製 Tailwind CSS 元件，呈現類似 netflix，hulu 的影像畫廊(image gall...
前一天講完了 container 容器，必不可少要來我們的排版神器，flex box！ 本篇對於 flex box 的描述僅針對筆者使用過的功能進行實作哦，讓我...
在開發時，"容器"不可或缺且面對響應式設計 (RWD) 更需要有容器的概念才適合做出自適應的網頁，現在就讓我們來看看容器與 RWD 是如何在...
linlaose
tjabi
iThome鐵人賽
看影片追技術