Icon Font 是一種使用字體方式呈現向量圖示的網頁技術,使用 Icon Font 可以大幅減少網頁對於圖片載入的依賴,並可靈活的縮放各種圖示,這篇教學會介...
iOS 26 的液態玻璃(Liquid Glass)效果,今天我們來試試看網頁能不能做到。 這個效果的核心概念是「模糊背景」再加上「不規則扭曲」,就像透過一杯正...
前言 <Teleport> 是 Vue3 的內置組件,用以將 DOM 內容傳遞到指定的地方,而不受限於某個父元素底下,無法使用相關功能。 舉一個小...
在現代網頁設計中,文字已經不再侷限於單一色彩。透過 Color Font ( 彩色字型 ),開發者可以控制彩色文字的各種顏色色盤,增添視覺趣味與品牌識別度,這個...
以前我們介紹過用 CSS Media Queries 的 prefers-color-scheme 讓網頁打開時預設切換淺色/深色模式,但是居然沒有講到最基礎的...
你是不是也常常爲了文字上下多出來的神秘空白間距感到困擾,導致按鈕裡的文字、或是標題跟內文之間的距離怎麼調都感覺不太對勁? 在過去,每個字型本身都會包含一些內建的...
在中文中有所謂「孤字不成行,單行不成頁」的寫作排版概念,意思是說「一個字(不含標點號)不能成為一行,一句話不能成為一頁」,因為這樣除了很醜外,也容易讓人看不懂這...
在編排處理大量文字時,有時會使用「不同欄位」來讓版面更為簡潔,透過 CSS 的 columns、column-count、column-width、column...
CSS 的「生成內容 content」是相當特殊的樣式屬性,這兩個樣式只能套用在特定選擇器,也不會負責「樣式」,而是會產生額外元素的「內容」,這個單元會介紹生成...
通常在瀏覽網頁時,都是採用「水平」的文字書寫方向,然而文字的方向不僅會影響閱讀,還會影響到對齊的方式,這個單元會透過 CSS 的 writing-mode、te...
當 CSS 越寫越龐大,樣式一不小心就互相打架了,怎麼辦呢?今天,我們來學一個 CSS 的新功能:@scope,它就像是為你的 CSS 加上了結界,讓你能更精準...
透過網頁呈現文字時,常需要讓文字進行「對齊」,這個單元會介紹使用使用 CSS 的 text-align、text-align-last 和 vertical-a...
在寫 CSS 時,你是否也曾對 :nth-child 又愛又恨呢?它雖然強大,但有時在較複雜的 HTML 結構中,要選到對的東西,有時就只差那麼一點點… 為了解...
透過網頁顯示具有大量文字的文章時,通常都會設定文字的「行高」或「縮排」,這個單元會介紹「什麼是行高」,以及運用 line-height 和 text-inden...
上一篇我們學到了 ::before 與 ::after 的基本用法,像是輕鬆添加引號、點綴裝飾性內容、清除浮動,甚至是製作小圖示。 這次,讓我們來探索更進階的用...
網頁顯示文字時,預設會將連續的多個空白合併為單一空白,如果要顯示連續空白或使用 tab 定位,甚至是設定「強制不換行」的效果,就必須使用 CSS 的樣式屬性進行...
之前寫的文章,雖然有提到過,但是居然沒有好好地解釋過 CSS 的偽元素(Pseudo),也就是 ::before 與 ::after。這超級實用的,怎麼能沒有呢...
系列文章: 前端工程師的 Modern Web 實踐之道 - Day 6預計閱讀時間: 10 分鐘難度等級: ⭐⭐⭐☆☆ 🎯 今日目標 在前一篇文章中,我們...
進行網頁排版時,常會遇到「需要文字換行」或「不想要文字換行」的狀況,這個單元會介紹 CSS 裡控制換行的樣式屬性 word-break、line-break、o...
你一定看過那種很酷的網頁:當你向下滾動時,背景圖片移動得比前景文字慢,或者某個元素會隨著滾動淡入、旋轉、放大,創造出引人入勝的深度和故事感。 這種效果,我們稱之...
這個單元會介紹 CSS 裡的一些針對「特殊字型」或部分瀏覽器特有的樣式,例如 font-stretch、font-kerning、font-smooth、fon...
前言 先說! 我覺得版上已經有很多寫得非常好的 Tailwind 系列文章例如 排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!或 Ta...
除了常見的文字樣式,CSS 也有一些相當實用的文字樣式,例如 text-overflow、text-transform、text-combine-upright...
以前,要做出輪播的「滾動吸附」的效果,十之八九都需要依賴 JS 套件(像是 fullPage.js 、Swiper.js 或 Slick.js)。這些工具雖然強...
你有沒有遇過這種情況?網頁跳出一個對話框,你想滑動看看裡面的內容,結果才滑到底,整個後面的網頁竟然也跟著動了起來! 或是,你在手機上瀏覽一個很酷的 Web Ap...
一個吸引目光網頁設計除了視覺設計與配色,「文字樣式」也是非常重要的一部分,這個單元會介紹 CSS 裡常用的文字樣式,例如 color、font-style、fo...
上一篇我們提到 CSS 的 :target 的偽類,可以針對 HTML 元素是否為目標狀態而去調整樣式。所以,如果延伸想一想,有許多 UI 都是會有狀態的,其實...
這個單元會介紹 CSS 的樣式屬性:font-size,font-size 主要功能就是「設定文字尺寸」,透過絕對尺寸單位 ( px、pt、in 等 ) 與相對...
網頁是什麼? 學網頁設計的時候,常常會聽到三個名字:HTML、CSS、JavaScript。它們是構成網頁的三大元素: HTML 網頁的結構。 CSS 網...
除了使用系統預設字型,進行網頁設計時也常常會使用更多漂亮的「外部字型」,這個單元會介紹 Google Fonts 外部字型服務,也會示範透過 CSS link...