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

1 Like 0 留言 886 瀏覽

鐵人賽自我挑戰組 DAY 28

CSS甜點烘焙店系列第 28 篇

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

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

Isha Wang ‧ 2022-10-13

0 Like 0 留言 879 瀏覽

技術格線系統(1) DAY43

這裡要先介紹為什麼要模組化格線系統?? 因為若因功能性命名區塊若命名為某個功能之後就不會運用在其他區塊模組化格線優點避免命名上的問題整體性高可用性高...

皮傑先生 ‧ 2020-10-27

0 Like 0 留言 864 瀏覽

技術 Sass/Css 設計模式(Smacss) DAY37

今天要來介紹 Sass/Css 設計模式啦~~首先我們先認識最好入門的 Smacss官網: http://smacss.com/ Smacss Base 首...

皮傑先生 ‧ 2020-10-21

0 Like 0 留言 856 瀏覽

鐵人賽自我挑戰組 DAY 23

30 天轉生到 bootstrap 5 的意識界系列第 23 篇

技術第 23 集：Bootstrap 客製化 Grid 格線系統

此篇會教學如何將 Bootstrap grid 格線系統，自幹一個出來。事前準備 Gird System 格線系統基礎觀念 RWD 響應式基礎觀念...

Kent ‧ 2021-10-08

0 Like 0 留言 849 瀏覽

技術 Sass 連接詞(&)基礎介紹 DAY32

在介紹今天的內容之前推薦一個不錯的東西那就是 CodePen啦https://codepen.io/your-work可以先上撰寫程式碼連 Sass也支援非常...

皮傑先生 ‧ 2020-10-16

0 Like 0 留言 848 瀏覽

鐵人賽 Modern Web DAY 3

使用SASS(SCSS)建立自己的CSS Library 系列第 3 篇

技術 [Day 03] 環境建置(二) - gulp、compiling SASS

今天要來安裝這次會用到的所有工具套件，並能順利將SASS編譯成CSS~ VS Code 套件我們這次需要使用到Live Server，可以到VS Code的延...

zhix6842 ‧ 2021-09-16

0 Like 0 留言 838 瀏覽

技術 7+1 Sass 設計模式 DAY42

7+1 Sass 設計模式: https://gist.github.com/rveitch/84cea9650092119527bc 這裡可以看到它創建了一...

皮傑先生 ‧ 2020-10-26

0 Like 0 留言 815 瀏覽

鐵人賽自我挑戰組 DAY 30

CSS甜點烘焙店系列第 30 篇

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

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

Isha Wang ‧ 2022-10-15

0 Like 0 留言 790 瀏覽

技術 BEM 基礎介紹 DAY41

BEMB: Block(區塊)E: Element(元素) __ 雙下底線M: Modifire(修飾符號) -- 雙中線官網:http://getbem.c...

皮傑先生 ‧ 2020-10-25

0 Like 0 留言 786 瀏覽

技術 OOCSS 基礎介紹 DAY39

OOCSS 也是一種設計模式它強調兩點結構與樣式分離容器與內容分離在我們介紹容器與內容分離之前我們時常在寫css的時候會 .header...

皮傑先生 ‧ 2020-10-23

0 Like 0 留言 779 瀏覽

鐵人賽自我挑戰組

CSS甜點烘焙店系列第 31 篇

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

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

Isha Wang ‧ 2022-11-10

1 Like 0 留言 751 瀏覽

鐵人賽自我挑戰組 DAY 1

CSS甜點烘焙店系列第 1 篇

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

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

Isha Wang ‧ 2022-09-16

0 Like 0 留言 748 瀏覽

鐵人賽 Modern Web DAY 5

使用SASS(SCSS)建立自己的CSS Library 系列第 5 篇

技術 [Day 05] Sass - Variables

Variables 在Sass中，開發者可以使用變數，例如可以將常用的顏色、寬度設定成變數，這樣未來如果顏色或寬度要改變時，只需要改掉變數的值，而不用像一般CS...

zhix6842 ‧ 2021-09-18

0 Like 0 留言 744 瀏覽

技術格線系統(2) DAY44

今天要先來介紹 Sass @each 與 map Sass map-get 這裡要先宣告變數(有點類似js宣告物件) $themes:( //key...

皮傑先生 ‧ 2020-10-28

0 Like 1 留言 717 瀏覽

鐵人賽自我挑戰組 DAY 3

CSS甜點烘焙店系列第 3 篇

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

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

Isha Wang ‧ 2022-09-18

0 Like 0 留言 694 瀏覽

鐵人賽自我挑戰組 DAY 30

JavaScript基礎30天系列第 30 篇

技術總結 DAY30 耶成功啦~~

第一次參加鐵人賽非常的開心又緊張啊(害怕自己寫錯哈哈)不過總覺得每日發文會上癮雖然可能沒人會看但重點在於自己是否有成長只要有那就值得啦~~~ 雖然30天說...

皮傑先生 ‧ 2020-10-15

0 Like 0 留言 692 瀏覽

鐵人賽自我挑戰組 DAY 24

CSS甜點烘焙店系列第 24 篇

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

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

Isha Wang ‧ 2022-10-09

0 Like 0 留言 666 瀏覽

鐵人賽自我挑戰組 DAY 7

CSS甜點烘焙店系列第 7 篇

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

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

Isha Wang ‧ 2022-09-22

0 Like 0 留言 656 瀏覽

鐵人賽自我挑戰組 DAY 23

CSS甜點烘焙店系列第 23 篇

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

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

Isha Wang ‧ 2022-10-08

0 Like 0 留言 639 瀏覽

鐵人賽 Modern Web DAY 6

使用SASS(SCSS)建立自己的CSS Library 系列第 6 篇

技術 [Day 06] Sass - Partials

這篇文章會講解如何將Sass分成多個檔案模組化管理，並於編譯時只會編譯到同一個css檔案內首先，我們在專案的sass資料夾內先建立一個variables.sc...

zhix6842 ‧ 2021-09-19

0 Like 0 留言 629 瀏覽

鐵人賽自我挑戰組 DAY 27

CSS甜點烘焙店系列第 27 篇

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

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

Isha Wang ‧ 2022-10-12

0 Like 0 留言 624 瀏覽

技術 Sass @mixin DAY35

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

皮傑先生 ‧ 2020-10-19

0 Like 0 留言 611 瀏覽

鐵人賽自我挑戰組 DAY 29

CSS甜點烘焙店系列第 29 篇

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

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

Isha Wang ‧ 2022-10-14

0 Like 1 留言 610 瀏覽

鐵人賽自我挑戰組 DAY 18

CSS甜點烘焙店系列第 18 篇

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

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

Isha Wang ‧ 2022-10-03

0 Like 0 留言 606 瀏覽

鐵人賽自我挑戰組 DAY 14

CSS甜點烘焙店系列第 14 篇

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

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

Isha Wang ‧ 2022-09-29

1 Like 0 留言 602 瀏覽

鐵人賽自我挑戰組 DAY 16

CSS甜點烘焙店系列第 16 篇

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

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

Isha Wang ‧ 2022-10-01

1 Like 0 留言 592 瀏覽

鐵人賽自我挑戰組 DAY 8

CSS甜點烘焙店系列第 8 篇

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

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

Isha Wang ‧ 2022-09-23

0 Like 0 留言 592 瀏覽

技術 Sass

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

Karlo ‧ 2022-06-13

0 Like 0 留言 583 瀏覽

鐵人賽 Modern Web DAY 11

你 React 了嗎? 30 天解鎖 React 技能系列第 11 篇

技術 [DAY 11] 設定樣式 CSS 與 Style，美化你的網站

［情境任務］解師傅：太好了，菜單該有的功能都有了，這麼一來就萬無一失了！小當家：恩…萬事俱備，只欠東風解師傅：欸？…還需要什麼東風？小當家：我一直很想說...

Lala Wang ‧ 2022-09-26

0 Like 0 留言 529 瀏覽

鐵人賽自我挑戰組 DAY 22

CSS甜點烘焙店系列第 22 篇

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

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

Isha Wang ‧ 2022-10-07

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

技術 格線系統(1) DAY43

技術 Sass/Css 設計模式(Smacss) DAY37

技術 第 23 集：Bootstrap 客製化 Grid 格線系統

技術 Sass 連接詞(&)基礎介紹 DAY32

技術 [Day 03] 環境建置(二) - gulp、compiling SASS

技術 7+1 Sass 設計模式 DAY42

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

技術 BEM 基礎介紹 DAY41

技術 OOCSS 基礎介紹 DAY39

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

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

技術 [Day 05] Sass - Variables

技術 格線系統(2) DAY44

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

技術 總結 DAY30 耶 成功啦~~

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

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