iT邦幫忙

css3相關文章
共有 146 則文章
鐵人賽 Modern Web

技術 #34 CSS 讓圖片填滿容器的各種方法,以圓形大頭貼為例:object-fit 與 background-size,搭配 aspect-ratio

↓ 今日學習重點 ↓ 在 HTML 加入圖片 使用 object-fit 讓圖片填滿容器 使用 background 讓圖片填滿容器 在...

鐵人賽 Modern Web

技術 #33 CSS 切換淺色/深色模式:Media Queries 的 prefers-color-scheme 搭配 CSS 變數

↓ 今日學習重點 ↓ 使用 Media Queries 的 prefers-color-scheme 搭配 CSS 變數設定預設的淺色/深色模式 使...

鐵人賽 Modern Web

技術 #32 CSS currentcolor、accent-color 與混色的 color-mix() 讓規劃色彩系統好方便!

↓ 今日學習重點 ↓ 了解 currentcolor 及他的使用時機 了解 accent-color 了解 color-mix() 及如何使用...

鐵人賽 Modern Web

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

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

鐵人賽 Modern Web DAY 30

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

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

鐵人賽 Modern Web DAY 29

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

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

鐵人賽 影片教學 DAY 29

技術 一起來實作響應式網頁設計:探究Bootstrap Day29

影片教學 程式碼重點回顧 <!DOCTYPE html> <html lang="en"> <head&gt...

鐵人賽 Modern Web DAY 28

技術 #27 網頁載入字體、Icon Font 與 CSS font-family、font-weight

↓ 今日學習重點 ↓ 了解字體的基本知識 了解網頁如何載入字體 了解 CSS font-family、font-weight 了解如何使用...

鐵人賽 Modern Web DAY 27

技術 #26 CSS Container Queries 容器查詢:隨著自己變大變小變畫面

↓ 今日學習重點 ↓ 了解 Container Queries 的用法 了解 Container Queries 特有的單位 了解 Contai...

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 25

技術 #24 RWD & CSS Media Queries & iOS Safari 上的經驗談

↓ 今日學習重點 ↓ 了解 RWD 的概念與常見螢幕尺寸斷點 了解 Media Queries 的使用方法 了解開發 iOS Safari 的注...

鐵人賽 Modern Web DAY 24

技術 #23 CSS 邏輯屬性 Logical properties 與 Writing modes

↓ 今日學習重點 ↓ 了解 CSS 邏輯屬性的使用情境 了解 CSS 邏輯屬性的語法 CSS 新推出了另外一種排版邏輯,叫作邏輯屬性(Logi...

鐵人賽 Modern Web DAY 23

技術 #22 CSS display: contents:讓你變成小透明,製作 JS Components 時的好東西!

↓ 今日學習重點 ↓ 了解 display: contents; 是什麼? 了解 display: contents; 的運用時機 了解 dis...

鐵人賽 Modern Web DAY 22

技術 #21 CSS Position:relative、absolute、fixed、sticky 找到適合的定位

↓ 今日學習重點 ↓ 了解 5 種 CSS Position 定位方式 了解 z-index CSS Position 屬性可以用來設定元素在...

鐵人賽 Modern Web DAY 21

技術 #20 CSS 內部尺寸 (Intrinsic Sizing):min-content、max-content、fit-content

↓ 今日學習重點 ↓ 了解 3 個 CSS 內部尺寸與實際應用:min-content、max-content 和 fit-content 今天來點...

鐵人賽 Modern Web DAY 20

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

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

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 Modern Web DAY 18

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

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

鐵人賽 Modern Web DAY 17

技術 #16 CSS 數學函式 calc()、max()、min()、clamp()

↓ 今日學習重點 ↓ 了解四個實用的 CSS 數學函式:calc()、max()、min()、和 clamp() CSS 的數值可以做簡單的運算,今...

鐵人賽 Modern Web DAY 16

技術 #15 網頁使用的單位大解析:px、rem、em、%、vw、vh (dvh, lvh, svh)、vmin、vmax

↓ 今日學習重點 ↓ 了解好用的 CSS 單位並使用它們 在網頁設計中,我們會使用到各種單位來調整尺寸和排版,而單位分成絕對單位和相對單位。以下是各種...

鐵人賽 Modern Web DAY 15

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

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

鐵人賽 Modern Web DAY 14

技術 #13 CSS 盒子模型 (Box Model):border-box & content-box

↓ 今日學習重點 ↓ 了解網頁上,構成一個 Box 盒子的內容 了解 CSS border-box & content-box 有何不同...

鐵人賽 Modern Web DAY 13

技術 #12 CSS 設計方法與命名建議:OOCSS、SMACSS、BEM、RSCSS

↓ 今日學習重點 ↓ 了解 CSS 命名建議:OOCSS、SMACSS、BEM、RSCSS 上篇我們了解了寫 Code 的三大方向,主要都是為了更簡單...

鐵人賽 影片教學 DAY 11

技術 一起來實作響應式網頁設計:Box Model Day11

影片教學 重點回顧 padding:content 與 border之間的距離 margin:元素間的距離 border:框出元素的範圍 以上是今天的教...

鐵人賽 Modern Web DAY 11

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

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

鐵人賽 影片教學 DAY 10

技術 一起來實作響應式網頁設計:CSS外觀屬性 Day10

影片教學 重點回顧 color: 色彩名稱 | rgb(rr,gg,bb) | #rrggbb | rgba(rr,gg,bb,alpha) opacity...

鐵人賽 Modern Web DAY 10

技術 #09 原生的 CSS 變數,基本與進階應用

↓ 今日學習重點 ↓ 了解如何設定 CSS 變數,並且使用它們 CSS 變數(CSS Variables)可以讓人在整個網站的樣式中輕鬆重複使用相同的...

鐵人賽 Modern Web DAY 9

技術 #08 CSS 選擇器總整理!id、class、:nth-child(n)、:not、:where、:is、:has 都難不倒我

↓ 今日學習重點 ↓ 了解 CSS 各種實用的選擇器 本篇會用實例與註解說明各種實用的 CSS 選取器,由於很多所以可以先存起來,之後要用到時再查詢。...

鐵人賽 Vue.js DAY 8
Vue3歡樂套件箱耶 系列 第 8

技術 開箱8:RWD斷點設計大公開~TailwindCSS設定範例

本篇開箱是TailwindCSS預覽工具以及針對Tailwind CSS斷點設定擋調整 由於前兩篇是介紹WindowResize時要抓取的一些行為,這需求都...