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

1 Like 0 留言 1015 瀏覽

鐵人賽自我挑戰組 DAY 6

CSS甜點烘焙店系列第 6 篇

技術【千層年輪蛋糕】哇嗚，原來box-shadow還可以這樣用~

您好，歡迎光臨CSS甜點烘焙店今天上架的是千層年輪蛋糕蛋糕主要分成3個部份，上層年輪、中間空洞，以及蛋糕表皮Html結構如下： .baumkuchen ....

Isha Wang ‧ 2022-09-21

1 Like 0 留言 1010 瀏覽

鐵人賽自我挑戰組 DAY 16

CSS甜點烘焙店系列第 16 篇

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

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

Isha Wang ‧ 2022-10-01

0 Like 0 留言 1005 瀏覽

技術 Sass

主要管理CSS sass寫在.sass檔案中，但透過"編譯"的方式轉成.css檔案=>在html上還是用.css的檔名格式: Sas...

Karlo ‧ 2022-06-13

0 Like 0 留言 988 瀏覽

鐵人賽自我挑戰組 DAY 13

CSS甜點烘焙店系列第 13 篇

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

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

Isha Wang ‧ 2022-09-28

1 Like 0 留言 984 瀏覽

鐵人賽自我挑戰組 DAY 8

CSS甜點烘焙店系列第 8 篇

技術【芒果瑞士捲】製作透視好物！perspective + rotate真的很好用耶

您好，歡迎光臨CSS甜點烘焙店今天上架的是芒果瑞士捲瑞士捲主要分成3個部份，蛋糕體、蛋糕表皮，以及芒果鮮奶油內餡Html結構如下： .rollCake ....

Isha Wang ‧ 2022-09-23

0 Like 0 留言 903 瀏覽

鐵人賽自我挑戰組 DAY 25

CSS甜點烘焙店系列第 25 篇

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

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

Isha Wang ‧ 2022-10-10

0 Like 0 留言 883 瀏覽

技術 Sass @mixin DAY35

今天要來介紹 Sass Mixin那究竟什麼是 Mixin呢??簡單來說Mixin能幫你記住 css技巧讓你不用再因回想原理而去google(把它想像成一個包裝...

皮傑先生 ‧ 2020-10-19

0 Like 0 留言 882 瀏覽

鐵人賽自我挑戰組 DAY 21

CSS甜點烘焙店系列第 21 篇

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

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

Isha Wang ‧ 2022-10-06

0 Like 0 留言 877 瀏覽

鐵人賽自我挑戰組 DAY 20

CSS甜點烘焙店系列第 20 篇

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

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

Isha Wang ‧ 2022-10-05

0 Like 0 留言 875 瀏覽

鐵人賽 JavaScript DAY 4

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

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

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

carolcheng ‧ 2024-09-04

0 Like 0 留言 861 瀏覽

技術 css 多行限定行數

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

relife12345 ‧ 2024-12-03

0 Like 0 留言 841 瀏覽

鐵人賽自我挑戰組 DAY 11

CSS甜點烘焙店系列第 11 篇

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

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

Isha Wang ‧ 2022-09-26

0 Like 0 留言 839 瀏覽

鐵人賽自我挑戰組 DAY 2

CSS甜點烘焙店系列第 2 篇

技術【巧克力切片蛋糕】簡單好用的clip-path，直接畫出你想要的形狀

您好，歡迎光臨CSS甜點烘焙店今天上架的是巧克力切片蛋糕蛋糕主要分成3個部份，上層巧克力、下層蛋糕體，以及巧克力上方的奶油Html結構如下： .chocol...

Isha Wang ‧ 2022-09-17

1 Like 2 留言 839 瀏覽

鐵人賽自我挑戰組 DAY 5

CSS甜點烘焙店系列第 5 篇

技術【草莓奶油小蛋糕】不得不說box-shadow真的好用無極限

您好，歡迎光臨CSS甜點烘焙店今天上架的是草莓奶油小蛋糕蛋糕主要分成3個部份，上層草莓、中層蛋糕體，以及下層餅乾Html結構如下： .strawberryC...

Isha Wang ‧ 2022-09-20

0 Like 0 留言 793 瀏覽

鐵人賽自我挑戰組 DAY 9

CSS甜點烘焙店系列第 9 篇

技術【馬卡龍】什麼！3層架構就做出馬卡龍，還有flex排的簡單九宮格喔

您好，歡迎光臨CSS甜點烘焙店今天上架的是馬卡龍馬卡龍主要分成3個部份，上層外殼、下層外殼，以及中層夾餡Html結構如下： .macaron .to...

Isha Wang ‧ 2022-09-24

0 Like 0 留言 784 瀏覽

技術 Sass 基礎教學 DAY31

Sass 我們應該大部分的人都有聽過那它到底是什麼東西呢??我們先來介紹它到底是啥維基百科https://zh.wikipedia.org/wiki/Sass...

皮傑先生 ‧ 2020-10-15

0 Like 0 留言 756 瀏覽

鐵人賽自我挑戰組 DAY 26

CSS甜點烘焙店系列第 26 篇

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

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

Isha Wang ‧ 2022-10-11

0 Like 0 留言 753 瀏覽

鐵人賽自我挑戰組 DAY 4

CSS甜點烘焙店系列第 4 篇

技術【銅鑼燒】多啦A夢最愛的甜點，只用了3層架構就做完

您好，歡迎光臨CSS甜點烘焙店今天上架的是銅鑼燒銅鑼燒主要分成3個部份，上層麵皮、中層紅豆餡、下層麵皮，看似這麼多層的層次，其實只要2層架構就可以完成喔～不...

Isha Wang ‧ 2022-09-19

1 Like 1 留言 743 瀏覽

鐵人賽自我挑戰組 DAY 12

CSS甜點烘焙店系列第 12 篇

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

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

Isha Wang ‧ 2022-09-27

0 Like 0 留言 727 瀏覽

鐵人賽自我挑戰組 DAY 17

CSS甜點烘焙店系列第 17 篇

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

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

Isha Wang ‧ 2022-10-02

0 Like 0 留言 690 瀏覽

鐵人賽自我挑戰組 DAY 10

CSS甜點烘焙店系列第 10 篇

技術【焦糖布丁】這不是兔子耳朵啦~流動糖漿的眉眉角角

您好，歡迎光臨CSS甜點烘焙店今天上架的是焦糖布丁焦糖布丁分成以下幾個架構，頂層光暈、中層糖漿、布丁、下層糖漿，以及盤子Html結構如下： .pudding...

Isha Wang ‧ 2022-09-25

0 Like 0 留言 657 瀏覽

鐵人賽 JavaScript DAY 6

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

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

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

carolcheng ‧ 2024-09-06

0 Like 0 留言 618 瀏覽

鐵人賽 JavaScript DAY 13

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

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

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

carolcheng ‧ 2024-09-13

0 Like 0 留言 603 瀏覽

鐵人賽 JavaScript DAY 7

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

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

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

ivytien ‧ 2024-09-21

1 Like 0 留言 242 瀏覽

技術 Day 3 初探 SASS/SCSS

今天的重點是認識SASS/SCSS，這是一種讓CSS更好維護、更強大的工具。平常我們寫CSS，很容易遇到以下問題： 1.樣式很多，程式碼重複 2.修改顏色或字型...

32499522 ‧ 2025-09-18

技術 【千層年輪蛋糕】哇嗚，原來box-shadow還可以這樣用~

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

技術 Sass

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

技術 【芒果瑞士捲】製作透視好物！perspective + rotate真的很好用耶

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

技術 Sass @mixin DAY35

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

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

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

技術 css 多行限定行數

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

技術 【巧克力切片蛋糕】簡單好用的clip-path，直接畫出你想要的形狀

技術 【草莓奶油小蛋糕】不得不說box-shadow真的好用無極限

技術 【馬卡龍】什麼！3層架構就做出馬卡龍，還有flex排的簡單九宮格喔