標籤: CSS 頁1

教學

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

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

教學

水平線 hr 標籤的樣式化方法

hr 是 html 裡面用來製作水平線的標籤,我們也可以用 css 來樣式化,不過有點特別的是想要樣式化的話只要直接修改 border 就可以了。

教學

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

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

教學

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

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

教學

避免讀取 CSS 時因為外部檔案而造成讀取阻塞的現象,加速網頁開啟

解決讀取外部 css 檔案時造成堵塞(render-blocking)的狀況。

教學

透過 parcel 使用並修改 bootstrap 的 css

我們可以透過 scss 來幫助我們修改 bootstrap 的一些設定值,這邊就說明一下使用 parcel.js 來建構的方法。

教學

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] 設定 dark mode 下的 CSS 樣式

Mac 在近年推出了 Dark Mode,讓一些喜歡暗色系的使用者可以享受深色底的視窗環境,而這個 Dark Mode 也可以直接在 CSS 的 media query 設定,就能讓你的網頁在 Dark Mode 之下能長得不一樣喔。

教學

解決手機上 safari, chrome 瀏覽器 100vh 無法剛好一整頁的問題

如果我們想要把內容鎖定在一個頁面的高度,在電腦版很自然會想到用 100vh 去設定,但在 safari 會遇到一個問題就是你預期他高度是一個螢幕高,但 header 跟底下的 nav 會把螢幕蓋掉,這樣就會發有一部分被遮掉了。

教學

[CSS] 使用 scroll-behavior 達成免用 js 的平滑滾動效果

常常在做一頁式的頁面時,會做到點了某的按鈕會滑動到指定地方的效果,這個傳統來說是先利用 id 設定錨點,點擊後再根據錨點算出移動的距離後移動過去,現在我們可以用純 CSS 的 scroll-behavior 就幫我們達成這個功能了。

教學

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

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

教學

tailwindcss 安裝教學

介紹一下該怎麼使用 parcel.js 來幫助我們安裝 tailwindcss 的環境。

教學

輕量的前端打包工具 parcel.js 安裝教學

近年前端在開發的時候往往都需要使用一些打包工具,方便我們在使用新的開發方式後可以在瀏覽器正常運作,其中最熱門的就是 webpack,但 webpack 本身很大也很複雜,如果想要感受打包工具威力的話,這邊我們可以先使用 parcel.js 這隻打包工具來幫助我們專案的開發。