標籤: 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 來讓東西疊在一起都可以。

教學

CSS3 的 Grid Layout 介紹與使用範例

CSS 的 grid layout 其實滿有趣的,不同於以往的排版方式是一排排完後接著往下繼續安排內容,grid layout 可以讓你把區塊分配完後,直接把內容填入就好了。

教學

CSS3 的濾鏡效果- filter

CSS3 在有了 filter 這個屬性後,我們就可以很簡單地透過設定來替圖片加上濾鏡效果,也就是不用每次都仰賴像 photoshop 這樣的影像繪圖軟體了。

教學

CSS 的穿透屬性- pointer-events

pointer-events CSS 屬性指定在什麼情况下 (如果有) 某個特定的圖形元素可以成為滑鼠事件。

教學

把 CSS 效能優化- will-change

css3 有一個屬性 will-change,是用來增加 CSS 變化時的效能的,但須注意不要過度使用,可以搭配 js 在適當的時刻使用這個屬性。

教學

CSS3 的區塊填滿設定- object-fit 與 object-position

因為圖片大小不一致的關係,以往要做整齊的 UI 排版都不是很方便,要不就是把圖裁切過後存到server,再不就是依據比例計算圖片的長寬後再用 js 調整,而 css3 有了 object-fit 後,就可以直接幫忙處理這個問題。

好網站

用 Hover.css 幫你的網頁元素增加一點互動

Hover.css 是一個幫你寫好了很多 css 效果的 library,只要套一下他們寫好的樣式,就能讓你的網頁元素多了生動的互動效果。