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

2 Like 0 留言 1312 瀏覽

鐵人賽開發技術 DAY 20

HTML5 & CSS3 系列第 20 篇

技術 30天分享(22) - CSS3 漸層

30天分享(22) - CSS3 漸層 CSS3 新增許多漸層，讓我們直接來看看使用方式 : background: linear-gradient(red,...

cretise0415 ‧ 2014-10-20

1 Like 0 留言 1279 瀏覽

技術 [鼠年全馬鐵人挑戰] Week12 - 超新手學習筆記：CSS 選擇器 - child

又過了一週啦~自從參加了切版直播班就更忙碌了這次的切版作業也學了很多以前沒學過的語法這週來記錄一下新學到的 CSS 選擇器吧~ 什麼是CSS選擇器相信初學者剛...

a841722 ‧ 2020-04-26

0 Like 0 留言 1277 瀏覽

鐵人賽開發技術 DAY 25

HTML5 & CSS3 系列第 25 篇

技術 30天分享(27) - CSS3 Can I Use?

設計 CSS3 網頁最麻煩的就是各家瀏覽器的支援度，如果在測試時沒跑出效果的話很可能是瀏覽器不支援，但 CSS3 這麼多功能，該如何知道我的瀏覽器支援那些呢...

cretise0415 ‧ 2014-10-27

0 Like 0 留言 1275 瀏覽

鐵人賽自我挑戰組 DAY 1

飛向前端宇宙，浩瀚無垠---自認沒有美感的網頁自學系列第 2 篇

技術「DAY02」關於自學的學習網站

啊!昨天被睡蟲給咬到，忘記發文了今天繼續再努力!!!以下是跟大家分享HTML跟CSS自學網站及影音：影音類： 1.Style Fancy Buttons...

洸(希望能在南部找前端工程師的工作) ‧ 2019-09-19

0 Like 0 留言 1240 瀏覽

鐵人賽開發技術 DAY 25

HTML5 & CSS3 系列第 28 篇

技術 30天分享(30) - CSS3 區塊設定

CSS3 可以對一個區塊更細微的設定，以下介紹三個功能 : resize box-sizing outline-offset 1. resize : 能設...

cretise0415 ‧ 2014-10-27

0 Like 0 留言 1233 瀏覽

鐵人賽 Modern Web DAY 27

挑戰 CSS 30 天系列第 27 篇

技術 day27_css3 box-shadow

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

小斑 ‧ 2017-12-30

1 Like 1 留言 1151 瀏覽

鐵人賽 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 留言 1135 瀏覽

鐵人賽開發技術 DAY 24

HTML5 & CSS3 系列第 24 篇

技術 30天分享(26) CSS3 RGBA 色彩

透明度除了最常用的 opacity 屬性之外，還可以用 rgba 的數值修改透明度，使用的方式如下 : background-color: rgba(255...

cretise0415 ‧ 2014-10-24

0 Like 0 留言 1130 瀏覽

鐵人賽 Modern Web DAY 2

Modern CSS 超詳細新手攻略系列第 2 篇

技術 [13th-鐵人賽]Day 2:Modern CSS 超詳細新手攻略 - 入門

WHO? WHAT? CSS到底是誰?CSS的全名為Cascading Style Sheets，其中的style是樣式，因此CSS就是用來描述網頁樣式的工具。...

veronica1130 ‧ 2021-09-07

1 Like 0 留言 1126 瀏覽

鐵人賽開發技術 DAY 22

HTML5 & CSS3 系列第 22 篇

技術 30天分享(24) - CSS3 字型

網頁字型在 CSS3 可以使用自訂的字型，但必須是以下三種檔案類型， TTF 、 OTF 、 WOFF 這些檔案類型主要瀏覽器都有支援，使用自訂自型的程式碼...

cretise0415 ‧ 2014-10-22

0 Like 0 留言 1120 瀏覽

鐵人賽 Modern Web DAY 6

轉職工程師前的技能學習！沒記起來就偷看筆記吧～系列第 6 篇

技術用 HTML, CSS, jQuery來做「動態進度條」

這次的有用到jQuery，讓進度條動起來！ HTML 有使用到data-寫法～ <div class="tool-chart" da...

Alice CH ‧ 2022-09-20

0 Like 0 留言 1083 瀏覽

鐵人賽開發技術 DAY 18

HTML5 & CSS3 系列第 18 篇

技術 30天分享(20) - CSS3 邊框樣式

CSS3 邊框多了圓角、陰影及邊框圖片，讓我們來看看使用方法，至於產生的效果，請大家貼以下的程式碼試試看 : 如要使用圓角 : div { border-...

cretise0415 ‧ 2014-10-18

0 Like 0 留言 1022 瀏覽

鐵人賽 Modern Web DAY 3

轉職工程師前的技能學習！沒記起來就偷看筆記吧～系列第 3 篇

技術用HTML與CSS製作出「下拉選單」！

input原本的下拉選單太過擁擠，想製作出好看的下拉選單可以參考這邊呦～ HTML 先製作選單input值，讓input內文字能夠顯示出所選選項。 <di...

Alice CH ‧ 2022-09-17

1 Like 0 留言 1003 瀏覽

鐵人賽開發技術 DAY 17

HTML5 & CSS3 系列第 17 篇

技術 30天分享(19) - CSS3 hack

30天分享(19) - CSS3 hack 由於 CSS3 在各家瀏覽器支援度不同，除了產生不同的樣式外，也可能會影響某些功能無法顯示，所以需要在 CSS 裡...

cretise0415 ‧ 2014-10-17

0 Like 0 留言 986 瀏覽

鐵人賽 Modern Web DAY 29

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

技術 #28 CSS 文字過長、行數過多顯示點點點、文字自動折行、強制換行：white-space、word-break、-webkit-line-clamp 的妙用

↓ 今日學習重點 ↓ 學會設定文字過長、行數過多顯示點點點（刪節號 ellipsis）了解如何讓文字強制換行學會如何讓文字依據 \r \n...

Eva Chen ‧ 2023-10-14

0 Like 0 留言 985 瀏覽

鐵人賽開發技術 DAY 21

HTML5 & CSS3 系列第 21 篇

技術 30天分享(23) - CSS3 文字

30天分享(23) - CSS3 文字 CSS3 文字部分新增了陰影及自動斷行功能等等，來看看新增以下那些功能 ----- 陰影使用方式 : text-sh...

cretise0415 ‧ 2014-10-21

0 Like 0 留言 928 瀏覽

鐵人賽 Modern Web

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

技術 #31 CSS 顏色設定：基本的 hex、rgb()、cmyk()、hsl()、hsb() 、hwb() 與明日之星的 lch()、oklch()

↓ 今日學習重點 ↓ 了解 hex、rgb()、cmyk()、hsl()、hsb() 了解廣色域是什麼了解 lch()、oklch() 與他們的...

Eva Chen ‧ 2023-10-25

0 Like 0 留言 905 瀏覽

鐵人賽 Modern Web DAY 4

轉職工程師前的技能學習！沒記起來就偷看筆記吧～系列第 4 篇

技術如何用HTML與CSS製作出「toggle開關鍵」

iphone常用的開關鍵，其實很簡單！ HTML 使用input的checkbox <input id="toggle" class=...

Alice CH ‧ 2022-09-18

0 Like 0 留言 887 瀏覽

鐵人賽自我挑戰組 DAY 22

【Tailwind】你聽過尾巴風嗎 ? CSS 框架 tailwind 的新手入門指南系列第 22 篇

技術 Day 22：客製我要的動畫【Tailwind – Animation 篇】

上一篇我們講到了 transition，但 transition 只是簡單的給予簡易的動畫，實際上能調整的只有整體動畫秒數，但如果我們想要將動畫切分成關鍵影格的...

linlaose ‧ 2022-10-07 ‧團隊死線衝鋒 Deadline Squad

0 Like 1 留言 848 瀏覽

鐵人賽 Modern Web DAY 20

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

技術 #19 CSS Grid、Subgrid：網頁排版的神奇格子，來排個照片牆與雞腿便當吧！

↓ 今日學習重點 ↓ 學習 Grid 容器的各種設定了解如何劃分 Grid 區域了解 Subgrid 學習 Grid 細節設定：Gap、...

Eva Chen ‧ 2023-10-05

0 Like 0 留言 821 瀏覽

鐵人賽 Modern Web DAY 5

Modern CSS 超詳細新手攻略系列第 5 篇

技術 [13th-鐵人賽]Day 5:Modern CSS 超詳細新手攻略 - Selector (一)

今天再來深度研究一下CSS的語法!我要介紹的是CSS中的選擇器，選擇器是最重要的語法之一，決定了要改變樣式的到底是哪些元素，先從基本選擇器開始! 基本選擇器...

veronica1130 ‧ 2021-09-10

0 Like 0 留言 805 瀏覽

鐵人賽 Modern Web DAY 11

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

技術 #10 原生的 CSS 巢狀 (CSS Nesting) 終於支援啦！

↓ 今日學習重點 ↓ 了解如何使用原生 CSS 巢狀 (CSS Nesting) 了解原生 CSS 巢狀的限制 (與 SCSS 比較) 以往...

Eva Chen ‧ 2023-09-26

1 Like 0 留言 803 瀏覽

鐵人賽 Modern Web DAY 1

Modern CSS 超詳細新手攻略系列第 1 篇

技術 [13th-鐵人賽]Day 1:Modern CSS 超詳細新手攻略 - 簡介

嗨大家，我是 Ronnie! 這是我第一次參加iT鐵人賽，在開始前先幫我自己訂一個小小目標，就是希望我可以順利完成這30天的鐵人賽，也請大家可以和我說聲加油，我...

veronica1130 ‧ 2021-09-06

0 Like 0 留言 765 瀏覽

鐵人賽 Modern Web DAY 19

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

技術 #18 CSS Flex 彈性盒子：網頁排版的超級寵兒

↓ 今日學習重點 ↓ 了解 Flex 的主軸線與交錯軸、flex-wrap（容器）了解 flex-grow、flex-shrink、flex-ba...

Eva Chen ‧ 2023-10-04

0 Like 0 留言 760 瀏覽

鐵人賽 Modern Web DAY 6

Modern CSS 超詳細新手攻略系列第 6 篇

技術 [13th-鐵人賽]Day 6:Modern CSS 超詳細新手攻略 - Selector (二)

介紹完基礎選擇器，再來介紹一下複合選擇器~ a b 選擇a元素裡的子元素 ab ab為同一元素但不同標籤 a, b 同時選擇a及b元素 a +...

veronica1130 ‧ 2021-09-11

0 Like 0 留言 752 瀏覽

鐵人賽 Modern Web DAY 26

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

技術 #25 CSS 列印的小技巧：@media print、break-before/after/inside、@page

↓ 今日學習重點 ↓ 了解如何設定列印樣式了解如何防止元素換頁時被截半了解如何處理列印頁面網頁需要列印的情況，通常是一些表單頁面（收...

Eva Chen ‧ 2023-10-11

0 Like 0 留言 733 瀏覽

鐵人賽自我挑戰組 DAY 23

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

技術 Day 23 CSS3 < 目標選擇器>

CSS3新增的目標選擇器類型: 1.屬性選擇器屬性選擇器可以根據元素特定屬性來選擇元素，這樣就可以不用藉助於類或者ID選擇器 MDN Web Docs 屬性選...

a0265392_lin ‧ 2021-10-03

0 Like 0 留言 731 瀏覽

鐵人賽自我挑戰組 DAY 24

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

技術 Day 24 CSS3 < 過渡 transition>

過渡 (transition) 是可以在不使用Flash動畫或JavaScript的情況下，當元素從一種樣式變換成另一種樣式時為元素添加效果，經常和 :hove...

a0265392_lin ‧ 2021-10-04

0 Like 0 留言 698 瀏覽

鐵人賽 Modern Web DAY 18

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

技術 #17 CSS block、inline、inline-block：網頁排版的御三家

↓ 今日學習重點 ↓ 了解網頁上三種常見的 display 屬性：block、inline、inline-block 在 CSS 中，display...

Eva Chen ‧ 2023-10-03

0 Like 0 留言 676 瀏覽

鐵人賽 Modern Web DAY 15

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

技術 #14 Reset CSS！變回你該有的樣子

↓ 今日學習重點 ↓ 了解 CSS 為什麼需要 Reset？了解 CSS 有哪些 Reset 的方法？ CSS 為什麼需要 Reset？不...

Eva Chen ‧ 2023-09-30