iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 331 瀏覽

技術 css 多行限定行數

常用於卡片結構中，保持每張卡片，避免內文段落有長有短，造成每張卡片高度不一致 .test { display: -webkit-box; /* 限制文本 *...

relife12345 ‧ 2024-12-03

0 Like 0 留言 193 瀏覽

鐵人賽 JavaScript DAY 7

歡迎參加我的原生JS畢業典禮系列第 7 篇

技術【Day6】輔修CSS預處理器—了解Sass/SCSS

經過這兩天的實作洗禮，發現自己卡在css上的時間遠比想像來的久。為了加速開發，今天我們來探討css預處理器—Sass，看看是否能幫我突破困境！什麼是CSS預處...

ivytien ‧ 2024-09-21

0 Like 0 留言 237 瀏覽

鐵人賽 JavaScript DAY 13

從PM到前端開發：我的React作品集之旅系列第 13 篇

技術 Day 13: 告別 Sass map-get，用 CSS 變數簡化主題管理

在上一篇文章中，我們介紹了如何使用 Sass 和 map-get 來管理多主題樣式。隨著應用規模的擴大，程式碼變得越來越難以維護。今天，我們將探討為什麼選擇 C...

carolcheng ‧ 2024-09-13

0 Like 0 留言 225 瀏覽

鐵人賽 JavaScript DAY 6

從PM到前端開發：我的React作品集之旅系列第 6 篇

技術 Day 6：基礎模組化設計優化 React 應用

在上一篇文章中，我們介紹了如何通過 SASS 和 react-i18next 結合，實現 React 應用的主題和語言切換功能，讓用戶可以自由切換語言和主題風格...

carolcheng ‧ 2024-09-06

0 Like 0 留言 243 瀏覽

鐵人賽 JavaScript DAY 5

從PM到前端開發：我的React作品集之旅系列第 5 篇

技術 Day 5：整合 i18n，打造多語言 React 應用

在上一篇文章中，我們展示了如何利用 SASS 與 CSS Modules 結合，實現 React 應用的主題切換功能，並提升樣式管理的靈活性與可維護性。隨著應用...

carolcheng ‧ 2024-09-05

0 Like 0 留言 296 瀏覽

鐵人賽 JavaScript DAY 4

從PM到前端開發：我的React作品集之旅系列第 4 篇

技術 Day 4 : 用 SASS 實現 React 主題切換

在之前的文章中，我們介紹了如何利用 CSS Modules 來提升 React 專案的樣式管理，使程式碼更加模組化且易於維護。本篇將更進一步，展示如何整合 SA...

carolcheng ‧ 2024-09-04

0 Like 0 留言 610 瀏覽

鐵人賽 Modern Web DAY 24

切版與CSS：打造工具箱與切版施工流程！系列第 24 篇

技術 Day24 預處理器 SASS，我們是朋友嗎？

初次接觸 SASS（Syntactically Awesome Style Sheets）時，可能只有一頁設計稿，並且沒有特別感受到它的威力。相反地，花了很多時...

Jessie ‧ 2023-10-09 ‧團隊好想工作室 v7.0

0 Like 0 留言 985 瀏覽

鐵人賽自我挑戰組

CSS甜點烘焙店系列第 31 篇

技術用 Pure CSS 開一間”甜點烘焙店”常用屬性介紹

甜點烘焙店使用過的屬性，為大家整理了前 5 名常用排行榜 ❶ box-shadow❷ liner-gradient❸ rotate❹ perspective❺...

Isha Wang ‧ 2022-11-10

0 Like 0 留言 1035 瀏覽

鐵人賽自我挑戰組 DAY 30

CSS甜點烘焙店系列第 30 篇

技術 skewX來做【抖抖森林】-30天完賽！解放喔耶~

您好，歡迎光臨CSS甜點烘焙店今天終於是第30天了，就讓最後的小動畫來完結這一切吧~ 一、抖抖森林(.forest) 首先看一下原本.forest的設定 po...

Isha Wang ‧ 2022-10-15

0 Like 0 留言 772 瀏覽

鐵人賽自我挑戰組 DAY 29

CSS甜點烘焙店系列第 29 篇

技術【甜點烘焙店】動起來！animation-delay幫你定好動畫出場順序

您好，歡迎光臨CSS甜點烘焙店一、店面出場(.store) 先設定好@keyframes，預設的效果是從天而降，以及有點彈跳的感覺，所以在rotateX做角度...

Isha Wang ‧ 2022-10-14

1 Like 0 留言 1156 瀏覽

鐵人賽自我挑戰組 DAY 28

CSS甜點烘焙店系列第 28 篇

技術 CSS Animation 你會用了嗎？【貓貓和樹懶】動給你看~

您好，歡迎光臨CSS甜點烘焙店今天要讓2隻吉祥物動起來~ 要使用到CSS Animation，做基礎的動畫的不複雜，只要有影格的觀念，不管過程要有幾格，甚至只...

Isha Wang ‧ 2022-10-13

0 Like 0 留言 776 瀏覽

鐵人賽自我挑戰組 DAY 27

CSS甜點烘焙店系列第 27 篇

技術超萌【樹懶先生】，什麼都懶懶der~

您好，歡迎光臨CSS甜點烘焙店店裡已經有鎮店貓貓，今天要再邀請一位神祕嘉賓沒錯！就是樹懶先生 Html如下 .sloth .limbs.right.fr...

Isha Wang ‧ 2022-10-12

0 Like 0 留言 495 瀏覽

鐵人賽自我挑戰組 DAY 26

CSS甜點烘焙店系列第 26 篇

技術喵喵~鎮店【店貓】來了

您好，歡迎光臨CSS甜點烘焙店今天邀請了一位貓咪，來當鎮店店貓 Html架構如下 .cat .ear .eye .mouth .body .tail...

Isha Wang ‧ 2022-10-11

0 Like 0 留言 584 瀏覽

鐵人賽自我挑戰組 DAY 25

CSS甜點烘焙店系列第 25 篇

技術 box-shadow用途廣，【雲朵】繪製多變化

您好，歡迎光臨CSS甜點烘焙店今天我們來加上幾朵飄飄雲 Html架構如下 .all .sky .cloud.left .cloud.right...

Isha Wang ‧ 2022-10-10

0 Like 0 留言 855 瀏覽

鐵人賽自我挑戰組 DAY 24

CSS甜點烘焙店系列第 24 篇

技術你的店面想開在哪裡？【冰棒森林】用perspective + rotateX就可以做到

您好，歡迎光臨CSS甜點烘焙店今天已經是挑戰第 24 天，話說從原本生一篇文章出來，就像便祕一樣的困難，到現在連續24天，天天都要擠一樣成果，雖然自己知道有些...

Isha Wang ‧ 2022-10-09

0 Like 0 留言 975 瀏覽

鐵人賽自我挑戰組 DAY 23

CSS甜點烘焙店系列第 23 篇

技術 skew()這樣用！左傾右傾來做【活動招牌架】

您好，歡迎光臨CSS甜點烘焙店有了店面和飲料攤，我們要再來做一個活動招牌架 Html架構如下 .signboardStand .front .back...

Isha Wang ‧ 2022-10-08

0 Like 0 留言 759 瀏覽

鐵人賽自我挑戰組 DAY 22

CSS甜點烘焙店系列第 22 篇

技術三角旗幟怎麼做？來看看【珍珠鮮奶茶】攤位擺設吧~

您好，歡迎光臨CSS甜點烘焙店今天繼續完成飲料攤的旗幟續上一集的架構 .beverageStore //略 .flag .arrow 我們要利用b...

Isha Wang ‧ 2022-10-07

0 Like 0 留言 613 瀏覽

鐵人賽自我挑戰組 DAY 21

CSS甜點烘焙店系列第 21 篇

技術是時候該擺一攤珍珠奶茶了，box-shadow用好用滿、簡單複製物件

您好，歡迎光臨CSS甜點烘焙店店面在昨天已經大致完成，旁邊不如再來一個飲料攤位吧~ Html如下 .beverageStore .mid Bubble Te...

Isha Wang ‧ 2022-10-06

0 Like 0 留言 678 瀏覽

鐵人賽自我挑戰組 DAY 20

CSS甜點烘焙店系列第 20 篇

技術新鮮出爐的甜點來囉~利用scale()快速將【櫥窗佈置】到位

您好，歡迎光臨CSS甜點烘焙店第2-15天畫的甜點們，終於要把它們擺上架了不過一次放進來的架構有點龐大，以下就以品項帶過，最後完成會釋出codepen讓大家參...

Isha Wang ‧ 2022-10-05

0 Like 0 留言 625 瀏覽

鐵人賽自我挑戰組 DAY 19

CSS甜點烘焙店系列第 19 篇

技術店面的靈魂之【窗】，框、板、反光，2層搞定！

您好，歡迎光臨CSS甜點烘焙店今天體力恢復的還不錯，除了還是有劇咳，沒力氣吼小孩之外，其它還算安好我們就來開始店面的展示櫥窗吧~ Html部份，繼續在.al...

Isha Wang ‧ 2022-10-04

0 Like 1 留言 801 瀏覽

鐵人賽自我挑戰組 DAY 18

CSS甜點烘焙店系列第 18 篇

技術可愛的【馬卡龍小招牌】，善用偽元素::before與::after

您好，歡迎光臨CSS甜點烘焙店是的！就在昨日我確診了，自己發燒、喉嚨痛、全身酸痛之外，還要顧2隻小屁孩外加打理3餐，只能找空檔來完成文章，還好前幾日就有預先畫...

Isha Wang ‧ 2022-10-03

0 Like 0 留言 510 瀏覽

鐵人賽自我挑戰組 DAY 17

CSS甜點烘焙店系列第 17 篇

技術可以遮風擋雨囉~【屋頂招牌及遮陽棚】，善用background來複製圓形

您好，歡迎光臨CSS甜點烘焙店今天要施作屋頂招牌及遮陽棚的部份續上一集的架構再往下新增 .all .store .awning .s...

Isha Wang ‧ 2022-10-02

1 Like 0 留言 782 瀏覽

鐵人賽自我挑戰組 DAY 16

CSS甜點烘焙店系列第 16 篇

技術終於要開店了~打造【外牆及大門】，box-shadow的inset與outset

您好，歡迎光臨CSS甜點烘焙店終於要開始打造我的甜點烘焙店了，前14天每日畫一甜點，都是上網搜尋各式點心，直接看著圖，用CSS把它畫出來。視覺上當然比不上手繪...

Isha Wang ‧ 2022-10-01

0 Like 0 留言 685 瀏覽

鐵人賽自我挑戰組 DAY 15

CSS甜點烘焙店系列第 15 篇

技術【珍珠鮮奶茶】不可不知的perspective透視技巧，畫完好想喝一口

您好，歡迎光臨CSS甜點烘焙店今天上架的是珍珠鮮奶茶珍珠鮮奶茶主要分成杯子、圓形標籤、珍珠及吸管Html結構如下： .bubbleTea .cup ....

Isha Wang ‧ 2022-09-30

1 Like 0 留言 6816 瀏覽

鐵人賽 Modern Web DAY 15

真的好想離開 Vue 3 新手村 feat. CompositionAPI 系列第 15 篇

技術 Day 15: 在 Vue 專案使用 Sass/SCSS +共用變數 (feat. Vite)

Outline 主要分成四個部份安裝 Sass 預處理器，在 SFC 檔使用 SCSS 撰寫 style 區域引入 SCSS 樣式或變數全域引入 SCSS...

安揪拉 ‧ 2022-09-30

0 Like 0 留言 1575 瀏覽

鐵人賽 Modern Web DAY 17

從零開始學 - Side Project專題開發及切版實作技巧系列第 17 篇

技術 Day 17 - 開發小知識(一) : Css reset、SASS/SCSS

Day 17 - 開發小知識(一) : Css reset、SASS/SCSS 每日一談嗨，大家好 ! 我是阿蘇今天是 Day17 ，來分享再正式開發我...

阿蘇蘇 ‧ 2022-10-02 ‧團隊死線衝鋒 Deadline Squad

0 Like 0 留言 815 瀏覽

鐵人賽自我挑戰組 DAY 14

CSS甜點烘焙店系列第 14 篇

技術【甜甜圈】如何活用border-radius + box-shadow，做出繽紛巧克力米~

您好，歡迎光臨CSS甜點烘焙店今天上架的是甜甜圈甜甜圈主要分成3個部份，上層彩色糖霜、甜甜圈主體及中間洞孔Html結構如下： .donut .mid ....

Isha Wang ‧ 2022-09-29

0 Like 0 留言 626 瀏覽

鐵人賽自我挑戰組 DAY 13

CSS甜點烘焙店系列第 13 篇

技術【草莓塔】你知道background就可以做塔杯嗎？

您好，歡迎光臨CSS甜點烘焙店今天上架的是草莓塔餅乾主要分成3個部份，塔、乳酪餡及草莓Html結構如下： .cream .main .berry...

Isha Wang ‧ 2022-09-28

1 Like 1 留言 488 瀏覽

鐵人賽自我挑戰組 DAY 12

CSS甜點烘焙店系列第 12 篇

技術【雙莓閃電泡芙】如何用2個圓做出藍莓？

您好，歡迎光臨CSS甜點烘焙店今天上架的是雙莓閃電泡芙這次的元素比較複雜，架構也相對多一些，Html結構如下： .eclair .main/*泡芙*/...

Isha Wang ‧ 2022-09-27

0 Like 0 留言 608 瀏覽

鐵人賽自我挑戰組 DAY 11

CSS甜點烘焙店系列第 11 篇

技術【草莓餡愛心餅乾】一次就上手的愛心，其實很簡單喔~

您好，歡迎光臨CSS甜點烘焙店今天上架的是草莓餡愛心餅乾餅乾主要分成3個部份，餅乾體、愛心果醬及果醬厚度Html結構如下： .cookie .mai...

Isha Wang ‧ 2022-09-26

技術 css 多行限定行數

技術 【Day6】輔修CSS預處理器—了解Sass/SCSS

技術 Day 13: 告別 Sass map-get，用 CSS 變數簡化主題管理

技術 Day 6：基礎模組化設計優化 React 應用

技術 Day 5：整合 i18n，打造多語言 React 應用

技術 Day 4 : 用 SASS 實現 React 主題切換

技術 Day24 預處理器 SASS，我們是朋友嗎？

技術 用 Pure CSS 開一間”甜點烘焙店”常用屬性介紹

技術 skewX來做【抖抖森林】-30天完賽！解放喔耶~

技術 【甜點烘焙店】動起來！animation-delay幫你定好動畫出場順序

技術 CSS Animation 你會用了嗎？【貓貓和樹懶】動給你看~

技術 超萌【樹懶先生】，什麼都懶懶der~

技術 喵喵~鎮店【店貓】來了

技術 box-shadow用途廣，【雲朵】繪製多變化

技術 你的店面想開在哪裡？【冰棒森林】用perspective + rotateX就可以做到

技術 skew()這樣用！左傾右傾來做【活動招牌架】

技術 三角旗幟怎麼做？來看看【珍珠鮮奶茶】攤位擺設吧~

技術 是時候該擺一攤珍珠奶茶了，box-shadow用好用滿、簡單複製物件

技術 新鮮出爐的甜點來囉~利用scale()快速將【櫥窗佈置】到位

技術 店面的靈魂之【窗】，框、板、反光，2層搞定！

技術 可愛的【馬卡龍小招牌】，善用偽元素::before與::after

技術 可以遮風擋雨囉~【屋頂招牌及遮陽棚】，善用background來複製圓形

技術 終於要開店了~打造【外牆及大門】，box-shadow的inset與outset

技術 【珍珠鮮奶茶】不可不知的perspective透視技巧，畫完好想喝一口