Eva Chen | 網頁設計師下班後

Archive (58)

#47 一次搞懂 CSS 各種混合模式：mix-blend-mode/ background-blend-mode

Oct 3, 2024 ·  Eva Chen

#46 CSS 濾鏡 filter/ backdrop-filter：模糊、透明圖陰影、調色與毛玻璃效果

Sep 26, 2024 ·  Eva Chen

#45 CSS 中的半透明遮罩 mask，實現各種模糊邊緣特效

Sep 26, 2024 ·  Eva Chen

#44 CSS 邊框 border 與各種花式邊框的小技巧：borde-image、outline、box-shadow

Sep 25, 2024 ·  Eva Chen

#43 用 CSS clip-path 剪裁各種形狀的色塊/圖片/影片

Sep 23, 2024 ·  Eva Chen

#42 用 CSS border 繪製三角形箭頭 (等腰/直角三角形)

Sep 22, 2024 ·  Eva Chen

#41 用 CSS border-radius 畫圓角與圓圓的形狀：圓、圓柱、橢圓、蛋型、鐘型、葉子 (眼睛)、花瓣 (水滴/心形)、牛角 (彎月)

Sep 21, 2024 ·  Eva Chen

#40 使用 CSS filter blur 製作簡易的任意形狀漸層 (流動/暈染背景)

Sep 20, 2024 ·  Eva Chen

#39 CSS 幾何背景：條紋、格子、點點、棋盤格子背景 (CSS background)

Sep 19, 2024 ·  Eva Chen

#38 CSS background 組合技：多重背景、背景位置、簡易視差滾動 (iOS 不支援)

Sep 18, 2024 ·  Eva Chen

#37 CSS 基本漸層：線性/放射/圓錐漸層 (CSS linear-gradient, radial-gradient, conic-gradient)

Sep 16, 2024 ·  Eva Chen

#36 HTML <video> 用影片當背景，使用 iframe 嵌入 Youtube自動播放/ IG/ TikTok/ X (Twitter) 影片

Sep 15, 2024 ·  Eva Chen

#35 圖片的 1x, 2x, 3x 是什麼？關於網頁上圖片解析度的處理：HTML <img> srcset、CSS image-set() 與 @media resolution

Jan 17, 2024 ·  Eva Chen

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

Jan 11, 2024 ·  Eva Chen

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

Dec 1, 2023 ·  Eva Chen

#32 CSS 顏色變數 currentcolor、checkbox/radio 顏色、input placeholder、閃動的光標顏色、文字反白的顏色、與混色的 color-mix() 製作色彩系統

Nov 9, 2023 ·  Eva Chen

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

Oct 25, 2023 ·  Eva Chen

#30 iT 鐵人賽心路歷程 & 我的寫作方法

Oct 16, 2023 ·  Eva Chen

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

Oct 15, 2023 ·  Eva Chen

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

Oct 14, 2023 ·  Eva Chen

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

Oct 13, 2023 ·  Eva Chen

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

Oct 12, 2023 ·  Eva Chen

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

Oct 10, 2023 ·  Eva Chen

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

Oct 9, 2023 ·  Eva Chen

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

Oct 8, 2023 ·  Eva Chen