標籤: CSS3 頁1

教學

[CSS] 當畫面捲動到超過畫面時讓元素固定在頁面某處- position: sticky

做網站有一個常見的需求是當我們把內容捲動到超過畫面時，希望讓某個區塊固定在畫面上某處，以往我們可以使用 js 偵測頁面捲動到元素時設定 position: fixed 來固定，不過這個畢竟是用 js 搭配 css，第一個會有可能有延遲的狀況，另一個則是需要再調整樣式，不過在 CSS3 後來有 position: sticky 之後，就方便多了。

教學

CSS 的列表樣式(list-style-type)設定與 ::marker

透過使用 ::marker 來調整列表的樣式。

教學

使用 CSS 的 mix-blend-mode 製作隨滑鼠移動改變樣式的效果

使用滑鼠移動與 CSS 的 mix-blend-mode 來製作隨滑鼠移動的變換樣式效果。

教學

CSS 的 :target 選擇器把你設定指定元素的樣式

:target 是一個虛擬類別（pseudo-class）選擇器，用途是讓我們可以去指定某個目標的樣式。

教學

[CSS] 設定 focus 後讓上層元素改變樣式的選擇器- :focus-within

:focus-within 是一個可以用來改變上層元素樣式的偽類選擇器，只要在你要套用的元素上面加上 :focus-within，這樣裡面只要有表單元素有被 focus，就會吃到該樣式。

教學

CSS 的角度單位

在 CSS 裡如果遇到跟角度有關的東西，可以設定的值有 deg, grad, rad, turn。

教學

使用 CSS 製作錐狀漸層- conic-gradient()

CSS 以往可以設定的漸層只有線性跟放射狀漸層，現在多了新的漸層填色方式 conic-gradient()，用中文翻大概就是錐狀漸層這樣吧。

教學

[CSS] CSS 原生變數(CSS Variables)使用技巧與說明

在還沒有原生的 CSS 變數之前，很多人應該在使用 SCSS 等工具在撰寫的時候感受到變數的方便，而 CSS 在近年也有了原生的變數可以使用，搭配好還是可以在撰寫純 CSS 的時候讓 code 變得更好維護。

教學

自訂網頁卷軸(scrollbar)樣式

以前要設定網頁捲軸顏色的時候曾經有段時間可以使用 -ms-scrollbar-base-color，不過這過當出只存在舊版 ie，現在這個屬性已經沒有用了，如果還有想要在網頁上自訂卷軸樣式的話，可以使用 ::-webkit-scrollbar 的屬性。

教學

使用 CSS 製作等比例縮放區塊- aspect-ratio

在現在網頁開發都要求在個解析度下都能正常瀏覽的環境下，常常就會需要了解怎麼製作等比例縮放的區塊，這邊整理一些方法：

教學

CSS 的背景濾鏡- backdrop-filter

CSS 可以使用一個叫 backdrop-filter 的屬性，用來設定只影響背景的濾鏡。

教學

CSS 的圖層混合效果- mix-blend-mode 與 background-blend-mode

會 photoshop 的朋友應該都知道我們可以利用圖層混合效果讓圖片疊加的時候更多變化，這個以往需要靠繪圖軟體才能完成的效果，現在利用 CSS3 的 mix-blend-mode 也可以做到囉，要使用這個效果前我們需要先讓東西可以疊在一起，可以使用 html 的巢狀結構或是利用 position 來讓東西疊在一起都可以。