iT邦幫忙

css相關文章
共有 1576 則文章
鐵人賽 Modern Web

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

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

技術 [React][jsx] 隨畫面滾動淡入淡出

程式碼分享加小紀錄,如果能幫到你的話就太好了 codeSandBox 透過滾動才出現的box,會淡入,當畫面滾動到看不見該box,他就會在看不到的地方悄悄淡出。...

鐵人賽 Modern Web

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

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

技術 好想工作室 Web Camp 第 15 梯招生

我是 Chris,從 2017 年起在好想工作室擔任 Web Camp Mentor 至今,培訓許多屆的 Web Camp 學員,這次我們要招收 Web Ca...

鐵人賽 Modern Web

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

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

技術 ㊙️千萬不要轉職前端工程師 ! ?

嗨,大家好,我是前端工程師(小宇) 我身邊的朋友常常問我說,成為前端工程師學歷是不是一定要有相關的資訊背景才會被公司錄取?我可以肯定的說不用,我面試多家公司的經...

技術 CSS 特殊形狀怎麼切?

我是圖片:https://drive.google.com/file/d/1j8EyVDr5OfNZdq4niRz_nZQnTJzMITQB/view?usp=...

鐵人賽 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 30

技術 Day30 完賽感想與系列目錄

當開始擬大綱,回顧決定轉跑道所做的努力和歷程,從打開技術書就像看天書,頭疼不已的狀態,到寫技術文分享,而這過程,除了技術,有太多收穫了,當回想如何學習的並持續深...

鐵人賽 Modern Web DAY 29

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

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

鐵人賽 Modern Web DAY 29

技術 Day29 網格佈局 Grid Layout

隨著技術的不斷發展,能夠實現更複雜和美觀的設計,引領潮流的技術是網格佈局(Grid Layout)是種用於排列網頁內容的靈,更易於地實現多欄、多行的佈局。 基本...

鐵人賽 SideProject30 DAY 29

技術 關於CSS,我想說的是… part2

Hi,昨天說到了 CSS 的使用,今天接續昨天的內容,我們要使用 SCSS 的機制現有的 CSS 架構進行調整,那麼讓我們開始吧 SCSS 是什麼呢? 昨天有稍...

鐵人賽 Modern Web DAY 28

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

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

鐵人賽 Modern Web DAY 28

技術 Day28 FlexBox 彈性盒子

基本概念 主軸和交叉軸 Flexbox 容器有兩個重要的軸,即主軸和交叉軸。主軸是 Flexbox 排列元素的主要方向,而交叉軸是與主軸垂直的方向。 主軸對齊...

鐵人賽 Modern Web DAY 27

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

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

鐵人賽 Modern Web DAY 27

技術 Day27 定位方案(Positioning Scheme)-Normal Flow、Float、Absolute Positioning

在Day11 Visual Formatting Model 淺談視覺格式化模型探討到,Positioning scheme 中有 normal flow、fl...

鐵人賽 自我挑戰組 DAY 27

技術 【Day27】ChatGPT請教教我:React進階(五)- Style管理!styled-components!

各位,從Day1至今為止,我們討論前端內容或React內容的時候幾乎沒有討論到要怎麼處理元件的樣式 (Style)只在Day6輕描淡寫的提到css檔引入,以及在...

鐵人賽 Modern Web DAY 26

技術 Day26 網頁性能優化:關於 CSS 的部分

雖然還沒碰過被要求效能 a 代誌,但在 Code-Review 中也會被問這有必要用嗎?例如:常用的無敵星星,在 reset 上很好用,以及謠傳權重不要選太層次...

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 25

技術 Day25 跨瀏覽器兼容性,切版與瀏覽器

身為前端就是跟『瀏覽器』有著萬縷千絲的關係,當然要跟『瀏覽器』大大好好相處,不同的瀏覽器,例如 Google Chrome、Mozilla Firefox、Mi...

鐵人賽 Modern Web DAY 25

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

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

鐵人賽 Modern Web DAY 25

技術 Day25 有料的 CSS 漢堡選單

我們今天要來做幾份漢堡選單。 原理和 Day14 今天我想來點… 純 CSS 的開關 一樣,都是用 input 的 checkbox 來儲存狀態好讓其他元素可...

鐵人賽 Modern Web DAY 24

技術 Day24 預處理器 SASS,我們是朋友嗎?

初次接觸 SASS(Syntactically Awesome Style Sheets)時,可能只有一頁設計稿,並且沒有特別感受到它的威力。相反地,花了很多時...

鐵人賽 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 23

技術 Day23 路上的朋友,UI Framework

UI Framework,(User Interface Framework),是為開發者提供了預設的 HTML、CSS 和 JavaScript 元件,以快速...

鐵人賽 Modern Web DAY 22

技術 Day22 媒體查詢 Media Queries

繼上篇介紹 RWD,這篇來看看媒體查詢Media Queries Level 4(2021/12)目前為 W3C Candidate Recommendatio...

鐵人賽 Modern Web DAY 22

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

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