iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
自我挑戰組

CSS甜點烘焙店 系列

一日一甜點,CSS不是只有排版,它有更多的無限可能,熱愛CSS的你,跟著我畫出好吃的甜點吧!

鐵人鍊成 | 共 31 篇文章 | 11 人訂閱 訂閱系列文 RSS系列文
DAY 1

CSS甜點烘焙店-30天內容介紹

Hi,大家好 我是Isha 這次藉由iT鐵人賽,想開一間甜點烘焙店,讓CSS不只是程式碼,而是可以帶著你發揮創意、實現夢想的藍圖。 30天的內容大致分為以下幾個...

2022-09-16 ‧ 由 Isha Wang 分享
DAY 2

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

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

2022-09-17 ‧ 由 Isha Wang 分享
DAY 3

【貝果】這是...?!好啦~這次最滿意的應該是芝麻的部份惹

您好,歡迎光臨CSS甜點烘焙店 今天上架的是貝果 主要分成2部份,麵包體和上方的黑白芝麻Html架構如下: .bagel .black-sesame .wh...

2022-09-18 ‧ 由 Isha Wang 分享
DAY 4

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

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

2022-09-19 ‧ 由 Isha Wang 分享
DAY 5

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

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

2022-09-20 ‧ 由 Isha Wang 分享
DAY 6

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

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

2022-09-21 ‧ 由 Isha Wang 分享
DAY 7

【蜂蜜奶油鬆餅】猜猜看奶油的3面透視如何做的?

您好,歡迎光臨CSS甜點烘焙店 今天上架的是蜂蜜奶油鬆餅 蛋糕主要分成4個部份,上層奶油、蛋糕體、蜂蜜,以及盤子Html結構如下: .pancake .but...

2022-09-22 ‧ 由 Isha Wang 分享
DAY 8

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

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

2022-09-23 ‧ 由 Isha Wang 分享
DAY 9

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

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

2022-09-24 ‧ 由 Isha Wang 分享
DAY 10

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

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

2022-09-25 ‧ 由 Isha Wang 分享