實戰演練 - Day4 我們昨天練習了搜尋功能，學到如何使用漸變效果、將 select 預設箭頭移除改用圖片顯示並取消點擊事件。今天練習部分是卡片元件，那麼開...
肉鬆
‧
2022-10-10
今天要製作簡單的登入格式，其中會使用到偽類以及先前沒講到的 peer，大家一起來實作看看吧！ 今天挑選的範例是 tailwind form 首先先建立基本架...
環境搭建好之後，其實筆者在初次使用前有想到幾個問題，這些問題可以通過套件解決，本篇文章將會分享問題點，最後推薦套件給大家使用，可以幫助 tailwind 使用者...
用gem跟CDN不好嗎... 這麼簡單的事情也要分享?? 因為,沒常安裝就忘東忘西了... 認命做一篇筆記... 快速設定,預設模式全開,如需客制,請再至官...
什麼是響應式設計？ 我們時常聽到的 RWD 全名為 Responsive Web Design，代表網頁根據不同裝置的寬度改變排版與顯示內容。 響應式設計 T...
肉鬆
‧
2022-10-04
今天要實作的按鈕為～剛好看到有這麼炫砲的按鈕可以學習，就分享上來給大家～ 首先，就影片作者而言，今天示範的方法只是其中一種，使用 blur 的方式達成此種按鈕...
新增 Navbar 至每個網頁頂端：利用 Next 的 Layout 元件，來建立每個網頁都可以看到的 Navbar。新增 components/Layout....
前言 在開發前端頁面時我們有多種樣式開發的選擇，可以選擇傳統的CSS寫法、使用UI Framework或Utility-first Framework等，為了達...
實戰演練 - Day3 我們昨天練習了類別選單，學到 grid 改變選單按鈕的數量、grayscale 讓圖片以灰階呈現。今天練習區塊是搜尋功能，那麼開始今天...
肉鬆
‧
2022-10-09
此系列文章已改編成書，歡迎購買：https://www.tenlong.com.tw/products/9786267146460?list_name=i-...
元件化 什麼是元件化？簡單來說就是將重複的東西包成元件反覆使用，在 Day01 - 什麼是 Tailwind CSS？ 我們有提到 Tailwind CSS...
肉鬆
‧
2022-10-05
Button Ripple Effect（原生JS版） CodePen Link: https://codepen.io/zyrxdkoz/pen/yLXgxO...
此系列文章已改編成書，歡迎購買：https://www.tenlong.com.tw/products/9786267146460?list_name=i-...
Day13！上一篇我們用 TailwindCSS 切版出了還不錯看的部落格首頁，顯示文章列表。今天讓我們乘勝追擊，繼續切版文章內頁樣式。 文章內頁就比較有趣了，...
讀取 Supabase 資料首先安裝 supabase-js： npm i @supabase/supabase-js 接著，在根目錄，建立 client.j...
Prepare 開始準備前端的工作，之前跑hello tauri的時候，我們用cargo tauri dev，這個會自己watch，所以我們不用寫cargo w...
今天會帶大家實作一個主要效果：placeholder go up on focus，這是 google 登入畫面會使用的效果 首先建立基本架構，今天只以一個...
實戰演練 - Day1 首先恭喜各位看到這邊。（灑花相信各位對於 Tailwind CSS 也有一定的認識，接下來我們將進行實戰演練，每天練習一個區塊，為期6...
肉鬆
‧
2022-10-07
昨天把整個專案架起來了今天我們就可以開始來刻畫面了 這邊也要提一下之前我們其實是直接開寫 先從會員登入註冊開始然後慢慢想到什麼做什麼畫面也超亂的 因為第一次寫r...
這個單元將接續上一個單元製作的卡片排版來延伸。 一般來說使用卡片排版，會有好幾個卡片同時出現，接下來就繼續討論如何放入多個卡片排版。 一開始宣告最上層的 div...
今天加速一下🚀 Tailwind & shadcn Inline class 在 React 的世界，因為在 JSX 中寫 CSS 非常不方便，所以在...
商業應用程式不同於網頁，具有相當多樣且細緻的互動設計，而且頁面的內容配置亦相對複雜，並且需要支援各種頁面上資料的同步呈現操作，例如訂單處理介面，就必須切割介面，...
實戰演練 - Day6 我們昨天練習了 footer 區塊，學到元素內部間距用 padding，元素外部間距用 margin。瞭解元素標籤不要只使用 div，...
肉鬆
‧
2022-10-12
此系列文章已改編成書，歡迎購買：https://www.tenlong.com.tw/products/9786267146460?list_name=i-...
變換（Transforms） 透過 transform 屬性藉此變換元素。 Scale（縮放） scale-0 scale-50 scale-75 scal...
肉鬆
‧
2022-09-30
這個 app 將從 supabase 讀取資料，在透過自製 Tailwind CSS 元件，呈現類似 netflix，hulu 的影像畫廊(image gall...
樣式 從 codepen 的 CSS Base 可以看到有兩種清除 CSS 樣式的方法，Reset 與 Normalize，Reset 會將大部分標籤的樣式全...
肉鬆
‧
2022-09-22
心得感想 首先想跟自己說聲：辛苦了。這是我第一次參加鐵人賽，很高興自己堅持到最後。第一次參加有些東西可能詮釋沒有這麼到位，不過也算是訓練自己的表達與寫作能力。...
肉鬆
‧
2022-10-13
今天來實作Navite Camp的Nav，看官們可以點網址去看他的效果，因為沒有時間，滑鼠移動到各tab時下面橘色border會滑順的移動，這個暫時沒時間去實作...
在上一個單元完成了一個有圖片的卡片排版，接下來將這個卡片排版修改成圖片是用背景的方式呈現，最終的成果如： 首先，延續上一個單元所完成的宣告： <div...
linlaose
tjabi
Yihsuan
Tim Hsu
SingYo
EasonChang
hello world
shrine90459
JK 程式誌
Yin
Moscle.dev
iThome鐵人賽
看影片追技術