iT邦幫忙

css教學相關文章
共有 403 則文章

技術 ( Day 46 ) CSS 影像混合模式 mix-blend-mode

CSS 的 backdrop-filter 是和 filter 影像濾鏡類似的樣式屬性,有別於 filter 是針對「元素」,backdrop-filter 是...

技術 ( Day 45 ) CSS backdrop-filter 背景濾鏡

CSS 的 backdrop-filter 是和 filter 影像濾鏡類似的樣式屬性,有別於 filter 是針對「元素」,backdrop-filter 是...

技術 ( Day 44 ) CSS filter 影像濾鏡

過去 CSS 要使用模糊、對比度、亮度等影像濾鏡函式時,需要加上「-webkit-」開頭識別名稱,隨著瀏覽器的進步,只要使用 filter 樣式屬性搭配 blu...

技術 ( Day 43 ) CSS 漸層色

CSS 除了可以使用「單一顏色」設定樣式,也能使用「漸層色」函式來產生線性漸層、放射漸層或重複漸層等色彩效果,這個單元會介紹「漸層色」相關的 CSS 函式,例如...

技術 ( Day 42 ) CSS 相對顏色

過去如果要根據現有顏色進行調整,往往需要依賴 CSS 預處理器 ( SASS、LESS ) 或手動管理大量的自訂顏色,但隨著 CSS 技術的發展,目前已經可以開...

技術 ( Day 41 ) CSS 函式 ( 色彩模型 )

CSS 除了可以利用十六進位色碼和顏色名稱設定顏色,也能使用許多「色彩模型」的函式來定義指定顏色,這個單元會介紹「色彩模型」相關的 CSS 函式,例如 rgb(...

技術 ( Day 40 ) CSS 顏色單位

由於 CSS 負責控制網頁的「樣式」,因此「設定頁面或元素的顏色」主要也是 CSS 負責處理,這個單元會介紹 CSS 最常使用的十六進位色碼的色彩單位,以及各種...

技術 ( Day 39 ) CSS 函式 ( 路徑 path )

除了「形狀」相關的 CSS 函式可以搭配 CSS 的動畫或裁切效果,也可以透過「路徑」相關 CSS 函式 path(),繪製類似 SVG 曲線的效果,讓裁切的形...

技術 ( Day 38 ) CSS 函式 ( 形狀與線段 )

進行 CSS 的動畫或裁切效果時,有時會用到「形狀」或「線段」相關 CSS 函式,這些函式有 circle()、rect()、ellipse()、ray()、i...

技術 ( Day 37 ) CSS 函式 ( 文字與清單計數 )

雖著 CSS 的版本演進,也陸續支援動態取得元素屬性等好用的功能,這個單元會介紹「文字與清單計數」相關的 CSS 函式,例如 attr()、url()、coun...

技術 ( Day 36 ) CSS 函式 ( 數學計算 )

CSS 雖然只是樣式語言,但也提供了一些好用的函式,讓使用者能更有彈性的設計畫面,這個單元會介紹「數學計算」相關的 CSS 函式,例如 calc()、min()...

鐵人賽 Modern Web

技術 CSS,依然讓我怦然心動!( 純純的連續 36 天完賽心得 )

終於「又」完成了連續三十天的「純純的」發文! 這個系列(不含第一天和今天)總共有 34 篇精選 CSS 效果,每天一篇,連續 34 天, 和以往不同的是,這次的...

技術 ( Day 35 ) CSS @font-face 定義字型

@font-face 是 CSS 裡「定義字型」的規則 ( 功能 ),除了可以自訂字型名稱,更能將指定的字型和樣式,綁定到自訂的字型名稱,讓字型的運用更佳方便彈...

鐵人賽 Modern Web

技術 ( Day 35 ) 純 CSS 碼表 ( 可計時 )

在小時候那個沒有手機的年代,最喜歡電子表的「碼表」功能,三不五時就會跟同學玩起「最接近一秒」的遊戲 ( 現在應該還是有人在玩 ),為了實現童年的回憶,我用純 C...

技術 ( Day 34 ) CSS @counter-style 定義計數規則

通常清單的計數器會按照預設格式產生對應的數值或符號,如果進一步透過「@counter-style」定義計數器規則,就能讓計數器產生更多變化,大幅增加計數器的彈性...

鐵人賽 Modern Web

技術 ( Day 34 ) 純 CSS 數字進度條 ( 會動呦 )

還記得那年 NASA 看到隕石即將撞上地球,科學家們努力計算著數據避免碰撞,這時突然出現了 Windows 更新的進度條 ... 天呀!看著進度條,心想不如用純...

鐵人賽 Modern Web

技術 ( Day 33 ) 純 CSS 點擊愛心圖案的放射效果

如果這都不算愛,我又什麼好悲哀,謝謝你的慷慨,是我自己活該,OH~NO~ 你喜歡那一版?張學友版本還是伍佰版本?我自己最喜歡純 CSS 的版本,就是那個用純 C...

技術 ( Day 33 ) CSS @scope 作用域

開發網頁時,隨著架構複雜度的增加,管理 CSS 樣式也變得更加困難。為了避免樣式互相污染和提升維護性,CSS 加入了 @scope 規則定義,透過「作用域」的概...

技術 ( Day 32 ) CSS @page 列印網頁

通常 CSS 都是設定用瀏覽器觀看的網頁樣式,不過當有列印網頁需求時,這些樣式往往會發生錯位等不如預期的狀況,因此如果有列印需求,除了使用 @media 進行媒...

鐵人賽 Modern Web

技術 ( Day 32 ) 純 CSS 點擊展開或收折的選單

還記得「包龍星」和「方唐鏡」在公堂之上的最後一戰,隨著方唐鏡跳了出去又跳了進來,我的滑鼠也跟著按了下去又放了開來,原來是純 CSS 做成「可以點擊展開,又點擊收...

技術 ( Day 31 ) CSS @import 匯入樣式

當 CSS 越寫越複雜,有時就需要將 CSS 根據特定功能拆分成獨立的檔案,如果要載入多個 CSS,除了使用 HTML 的方式載入,也可以透過 CSS 的 @i...

鐵人賽 Modern Web

技術 ( Day 31 ) 純 CSS 的多種按鈕 hover 效果

俗話說「江湖在走,義氣要有」,也有人說「社會在走,行情要有」,但網頁設計師卻說「滑鼠在走,hover 要有」,聽到這句話我恍然大悟,是時候用純 CSS 來設計按...

技術 ( Day 30 ) CSS @layer 分層優先順序

CSS 的 @layer 是一個可以利用類似「圖層」的方式,去調整「選擇器權重」的 At 規則,這個單元除了會介紹 @layer 的用法,還會用範例呈現 @la...

鐵人賽 Modern Web DAY 30

技術 ( Day 30 ) 純 CSS 故障文字效果

雖然阿諾很老了,但他的魔鬼終結者仍然是經典中的經典!每次想到他被液態金屬人插爆的當下,眼中竟然還是充滿著愛意,就讓我不禁想要用純純的 CSS 做出類似的效果.....

技術 ( Day 29 ) CSS @property 自訂屬性值

CSS 的 @property 可以讓使用者「自訂屬性值」的 At 規則,使用方式跟「CSS 變數」非常類似,可以當作是一種「新型態的 CSS 變數」,定義屬性...

鐵人賽 Modern Web DAY 29

技術 ( Day 29 ) 純 CSS ICON 圖示形狀變換

雖然變形金剛演了好幾部曲,但我只看到第二部曲 ( 還我梅根福克斯 ),看到變形金剛劈哩啪啦的變形,心想不如用純 CSS 做個 ICON 的變形好了!凡事起頭難,...

技術 ( Day 28 ) CSS @container 容器查詢

CSS 的 @container 容器查詢和 @media 媒體查詢類似,都可以在判斷出指定條件時,針對特定的元素套用特定的樣式,但有別於 @media 是根據...

鐵人賽 Modern Web DAY 28

技術 ( Day 28 ) 純 CSS hover 時左右傾斜的背景效果

某天經過公園看到小朋友在玩翹翹板,心血來潮也跑過去問說「可不可一起玩?」,他們問說「大哥哥 ( 羞 ) 為什麼想要一起玩?」我說「因為我想要用純 CSS 做出這...

鐵人賽 Modern Web DAY 27

技術 ( Day 27 ) 純 CSS 樓梯文字動態效果

在日月潭的文武廟前有一座年梯步道,步道階梯的每一階上刻著 365+1 天的日期以及當天出生的名人,當我氣喘吁吁爬著階梯時,心想不如用純 CSS 來處理這麼累人的...

技術 ( Day 27 ) CSS @media 媒體查詢

如果要在不同解析度的螢幕上瀏覽同一個網頁,常常會透過 CSS 的方式製作 RWD 響應式網頁,而 CSS 的 @media 媒體查詢可以定義判斷不同媒體的條件,...