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

0 Like 0 留言 1263 瀏覽

技術 Tailwind 實作筆記- Theming Tailwind with CSS Variables(影片筆記)

前言最近想學如何用 tailwinds 變更主題顏色，剛好看到了 Theming Tailwind with CSS VariablesTailwind La...

kaochihyu ‧ 2022-06-08

1 Like 0 留言 1263 瀏覽

鐵人賽自我挑戰組 DAY 17

網頁學習雜記系列第 17 篇

技術 Day 17 | 就是不保持安全社交距離 - inline-block 空白

今天就來整理，如何消除使用 inline-block 時，那個惱人的安全社交距離吧（痾不是啦，是空白間距）。怕有人不理解我在講什麼，我先上範例檔讓大家知道是什...

Zombie@Dump ‧ 2020-10-02

5 Like 0 留言 1262 瀏覽

鐵人賽 Modern Web DAY 5

防禦性 CSS - 建立「防患未然」的匠人心態系列第 5 篇

技術【Day05】內容長度 - 類別標籤

情境如下圖，網站中有這樣一塊又一塊的圖形設計，稱之為「卡片」。近年來卡片式設計在網站上越來越常見。矩形的卡片設計能夠順利的與不同視窗大小做搭配，因此無論...

Taiming ‧ 2022-09-19 ‧團隊光明頂

0 Like 0 留言 1260 瀏覽

鐵人賽 Modern Web DAY 20

CSS 讓你的網頁動起來系列第 20 篇

技術 CSS微動畫 - 動起來番外篇！談談Animation的Step

Q: 今天是教師節呢，怎麼沒有放假？A: 認真上課黑！本篇是可能實用，但更可能殺光腦細胞的steps阿！上一篇在做倒數計時的圓餅圖時，針對animatio...

粒粒 ‧ 2021-09-28 ‧團隊神龍特攻隊 - it 宏的逆襲

0 Like 0 留言 1260 瀏覽

鐵人賽 Modern Web DAY 16

1995到2021，php到react網站開發歷程系列第 16 篇

技術 DAY16-Style Components

前言：今天我們要來介紹React裡很強大的一個工具！沒錯就是Style Components！廢話不多說，我們直接開始吧！這是什麼鬼東東： Style C...

Cooksuhr ‧ 2021-09-28 ‧團隊Obit0 Studio

3 Like 0 留言 1257 瀏覽

鐵人賽 Modern Web DAY 20

重新認識 CSS 系列第 20 篇

技術重新認識 CSS - Visual formatting model：Box generation (inline)

前言「重新認識 CSS」這個系列名稱的由來就如其名，我想要重新認識它。雖然以前就有學過 CSS，但這次想從 CSS Spec 中學到最原始的定義和內容，更加...

Titangene ‧ 2019-10-05 ‧團隊好想工作室 v3.0

0 Like 0 留言 1256 瀏覽

鐵人賽 Modern Web DAY 21

挑戰 CSS 30 天系列第 21 篇

技術 day21_繼承

在一個 HTML 文件中，標籤之間有所謂的親子關係。舉例來說，title 這個標籤一定都是在 head 這個標籤之內，所以我們就說 title 是 head...

小斑 ‧ 2017-12-24

1 Like 0 留言 1247 瀏覽

鐵人賽 Modern Web DAY 29

CSS 讓你的網頁動起來系列第 29 篇

技術 CSS微動畫 - Transform不一定是位移的最佳選擇

Q: 效能跟效果之間怎麼取捨？A: 如果效果不複雜，用一些渲染成本比較高的寫法也無妨新屬性搭配動畫來點新效果本篇介紹一個新的屬性-webkit-back...

粒粒 ‧ 2021-10-07 ‧團隊神龍特攻隊 - it 宏的逆襲

0 Like 0 留言 1245 瀏覽

鐵人賽 Modern Web DAY 22

從零開始手刻網站，30 天打造我的前端武器庫系列第 22 篇

技術 Day 22：鍵盤輸入事件實作

組件實作：Demo 一、前言鍵盤輸入監聽事件是一個很有用的功能，或許在瀏覽一般的網頁時，比較不常使用鍵盤控制。但如果是遊玩網頁遊戲，取得鍵盤的監聽就會變...

東尼先生 ‧ 2022-10-06

1 Like 0 留言 1244 瀏覽

鐵人賽自我挑戰組 DAY 4

WordPress 新手網站教學：學習永遠不會太遲系列第 4 篇

技術任務 04 | HTML、CSS 和自適應網站設計

響應式網頁設計響應式網頁設計（英語：Responsive web design，通常縮寫為 RWD），或稱自適應網頁設計、回應式網頁設計、對應式網頁設計。是...

Mack Chan ‧ 2019-09-05

0 Like 0 留言 1244 瀏覽

鐵人賽 Modern Web DAY 9

CSS Secrets 導讀系列第 9 篇

技術 Secret 7:（偽）隨機背景圖案

在自然界完美重複的圖案根本是不存在，即使是同一品種的花，一定會有少許差異，沒有二朵花是完全一模一樣。再看一下前面我們做的練習，一模一樣的圖案有規律的重複，不管...

yowlonglee ‧ 2018-10-24

0 Like 0 留言 1243 瀏覽

鐵人賽 Modern Web DAY 21

這個網站也太嗨！30 個網頁動態提案系列第 23 篇

技術 #20-有看到我的貓嗎？用offsetPath讓貓貓滾起來！(SVG)

偶爾會看到，往下滾，球就會跟著滾動的幅度以拋物線移動。今天就來使用SVG的Path做做看！其實是我做好的第二個版本，第一個是使用GSAP & Scro...

Global Rachel ‧ 2021-10-06 ‧團隊寫 code 需要講幹話

1 Like 0 留言 1242 瀏覽

鐵人賽自我挑戰組 DAY 23

前端新手進化史系列第 23 篇

技術 flex 1

文章將陸續整理並更新至個人部落格。前言先前介紹格式化上下文(formatting context)時，曾說到 container box 會為其內容...

yachen ‧ 2019-10-08 ‧團隊好想工作室 v3.0

2 Like 0 留言 1241 瀏覽

鐵人賽 Modern Web DAY 6

喪屍黑白切系列第 6 篇

技術 Day 06 | 就是那麼有層次 - 多重背景

今天要來講金魚都能懂的這個網頁畫面怎麼切: No.001 - 圖文滿版區塊未來的程式碼範例，前面都會有一個 css reset * { margin:...

Zombie@Dump ‧ 2020-09-21

1 Like 0 留言 1240 瀏覽

鐵人賽 Modern Web DAY 19

初階 Rails 工程師的養成系列第 19 篇

技術 Day19. 後端工程師需要具備的前端常識

請問你只會<br /> 跟&nbsp; 嗎 ? 如果你只會這些的話，這篇會對你的幫助很大後端寫樣式，要有後端的樣子。我們雖然沒辦法像前端那...

漢漢老師 ‧ 2021-09-19

0 Like 0 留言 1240 瀏覽

鐵人賽自我挑戰組 DAY 10

從零開始前端學習筆記(HTML、CSS、JavaScript) 系列第 10 篇

技術 Day 10 CSS <元素顯示模式>

1. 什麼是元素顯示模式元素顯示模式就是元素(標籤)以什麼方式進行顯示作用 : 網頁的標籤非常多，了解他們的特點可以更方便的布局網頁 ex : <di...

a0265392 ‧ 2021-09-10

0 Like 0 留言 1239 瀏覽

鐵人賽 Modern Web DAY 5

CSS Secrets 導讀系列第 5 篇

技術 Secret 3: 靈活的背景定位

背景裡如果有單一圖片或是標誌時，我們常常會要固定放在背景的某個角落，此時需要用到background-position 去指定背景圖的位置。 backgroun...

yowlonglee ‧ 2018-10-20

3 Like 0 留言 1238 瀏覽

鐵人賽 Modern Web DAY 18

防禦性 CSS - 建立「防患未然」的匠人心態系列第 18 篇

技術【Day18】盒子模型 - 邊距重疊

情境 CSS Box Model 盒子模型是 CSS 的基礎。我們可以簡單的理解為， html 元素在 CSS 裡面，都可以視為一個一個的盒子(Box)。如下...

Taiming ‧ 2022-10-02 ‧團隊光明頂

0 Like 0 留言 1235 瀏覽

鐵人賽 Modern Web DAY 27

挑戰 CSS 30 天系列第 27 篇

技術 day27_css3 box-shadow

CSS3 中的 box-shadow 屬性適用於盒子陰影，也可用來創建卡片。範例： <!DOCTYPE html> <html>...

小斑 ‧ 2017-12-30

1 Like 1 留言 1231 瀏覽

鐵人賽 Modern Web DAY 30

Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯系列第 31 篇

技術 #29 CSS 立體字、霓虹字、外框字、漸層字：text-shadow、-webkit-text-stroke、-webkit-background-clip

↓ 今日學習重點 ↓ 了解 CSS 的 text-shadow 與其應用了解製作文字外框的方法了解如何製作 CSS 文字遮罩之前我們...

Eva Chen ‧ 2023-10-15

0 Like 0 留言 1230 瀏覽

鐵人賽自我挑戰組 DAY 25

2020 iT邦幫忙鐵人賽網頁前端-刻意練習系列第 25 篇

技術 Day25 網頁前端-刻意練習(RWD#1)

Day25 六角 RWD #1 簡單小語一開始看到覺得應該不難，結果RWD直接卡住不知道Table該怎麼排，後來發現參考樣板的方式，利用dataset的方式...

TerryYu ‧ 2020-09-25

3 Like 0 留言 1230 瀏覽

技術 JS30 Day 2 - CSS + JS Clock 學習筆記

以下為原始檔 https://github.com/87JoJo/02---JS-and-CSS-Clock 這次的練習，是要做一個小時鐘，而重點在於CSS的撰...

no027843 ‧ 2020-04-23

0 Like 0 留言 1229 瀏覽

鐵人賽 Modern Web DAY 28

CSS Secrets 導讀系列第 28 篇

技術 Secret 22: 斑馬條紋

幾年前當我們開始可以用:nth-child()/:nth-of-type()這類的CSS虛擬類別（pseudo-class）時，最常用來做「斑馬條紋的table...

yowlonglee ‧ 2018-11-12

0 Like 0 留言 1229 瀏覽

鐵人賽 Modern Web DAY 16

30天學會HTML＋CSS，製作精美網站系列第 16 篇

技術混合模式-30天學會HTML＋CSS，製作精美網站

「混合模式」是什麼呢？有用過photoshop的設計師對圖片混合模式肯定不陌生，是元素重疊部分的顏色、飽和度、亮度進行混合變成新的顏色。混合模式相關屬性： b...

原來可以這樣做 | Sunny ‧ 2021-10-01

4 Like 0 留言 1228 瀏覽

技術 [快速入門前端 31] 進階樣式屬性 (1)：Shadow 陰影和 Opacity 不透明度

陰影 Shadow 盒子元素陰影 Box Shadow 屬性名：box-shadow屬性值：複合屬性，屬性值分別有 offset-x (水平偏移)、offset...

Doris ‧ 2023-06-19

0 Like 0 留言 1228 瀏覽

技術 CSS-製造捲軸

最高為100px時出現捲軸 .content{ max-height: 100px; overflow: auto; } codepen

Ci_Yao_Yan ‧ 2019-08-23

2 Like 1 留言 1228 瀏覽

鐵人賽自我挑戰組 DAY 19

前端新手進化史系列第 19 篇

技術視覺格式化模型 - 行內格式化上下文(IFC)

文章將陸續整理並更新至個人部落格。前言所有元素(element)都可以生成盒子(box)，什麼類型的元素，生成什麼類型的盒子，盒子可以裝盒子，整個版...

yachen ‧ 2019-10-04 ‧團隊好想工作室 v3.0

2 Like 0 留言 1224 瀏覽

鐵人賽自我挑戰組 DAY 27

網頁學習雜記系列第 27 篇

技術 Day 27 | CSS Image Block Reveal Hover Effects

今天想要分享的是這個，記得我當時看到這個效果的時候覺得真的是炫炮過頭了，馬上整個影片看完做練習，做一做還邊想可以用什麼不一樣的方式做，結果我老師建議我可以用 b...

Zombie@Dump ‧ 2020-10-12

1 Like 1 留言 1223 瀏覽

鐵人賽 Modern Web DAY 9

CSS 讓你的網頁動起來系列第 9 篇

技術 CSS微動畫 - 彈出來的選單 Part.2

Q: 是不是來點icon比較知道這是幹嘛的？A: 不複雜的可以用css畫，複雜的可以考慮出圖或是svg！繼上一篇已經做出一個置底的彈出式選單，但看著總覺得...

粒粒 ‧ 2021-09-17 ‧團隊神龍特攻隊 - it 宏的逆襲

0 Like 0 留言 1221 瀏覽

鐵人賽 Modern Web DAY 8

30天打造品牌特色電商網站系列第 8 篇

技術 30天打造品牌特色電商網站 Day.8 CSS基礎

了解HTML以後，CSS也一定要熟悉一下！CSS用來定義文件的樣式、佈局，甚至可以做出簡單的動畫。今天就來認識幾個基本常用的語法。基本架構先來解說CSS的...

atain880625 ‧ 2021-09-22