iT邦幫忙

鐵人檔案

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

CSS甜點烘焙店 系列

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

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

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

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

2022-09-26 ‧ 由 Isha Wang 分享
DAY 12

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

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

2022-09-27 ‧ 由 Isha Wang 分享
DAY 13

【草莓塔】你知道background就可以做塔杯嗎?

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

2022-09-28 ‧ 由 Isha Wang 分享
DAY 14

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

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

2022-09-29 ‧ 由 Isha Wang 分享
DAY 15

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

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

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

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

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

2022-10-01 ‧ 由 Isha Wang 分享
DAY 17

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

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

2022-10-02 ‧ 由 Isha Wang 分享
DAY 18

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

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

2022-10-03 ‧ 由 Isha Wang 分享
DAY 19

店面的靈魂之【窗】,框、板、反光,2層搞定!

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

2022-10-04 ‧ 由 Isha Wang 分享
DAY 20

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

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

2022-10-05 ‧ 由 Isha Wang 分享