標籤: CSS 頁1

教學

[CSS] font-variant- 把小寫字母變大寫但縮小一點點

CSS 的 font-variant 可以把英文字的小寫全部都變大寫,但會比原本的大寫字小一點點,算是滿早就有的樣式。

教學

用純 CSS 製作 checkbox 的開關元件(toggle switch)

用純 CSS 製作 checkbox 的開關元件(toggle switch)的範例程式碼。

教學

用純 CSS 樣式化 checkbox(複選方格)

簡單利用純 CSS 樣式化 checkbox。

教學

用 css 讓超出區塊範圍的字變 ...- text-overflow, line-clamp

排版的時候,若文字的長度不一樣,網頁預設會分行,如果後來的行數有的多有的少,版面可能就看起來不整齊,想要讓文字超過區塊長度就自動省落成 ...,我們可以使用 text-overflow 這個屬性。

教學

解決手機上 overflow: hidden 會失效的問題

解決的方法滿簡單的,只要在 html 上面也下 overflow-x: hidden 就好了。

教學

在 amp-img 使用 object-fit

之前有提過要在 AMP 裡面使用圖片必須要使用 amp-img 的標籤,而且需要給定寬跟高,但在現在很常需要用到裡用把圖片塞入某個區塊內的 object-fit 的方式,就沒辦法直接用了,但還好官方也有提供方法讓我們可以去使用 object-fit,只要在 amp-img 的標籤內加上 layout=fill。

教學

CSS 的背景濾鏡- backdrop-filter

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

教學

[SCSS] Mixins、運算子、判斷式及迴圈

使用 Mixins 來管理樣式,並利用運算子、判斷式及迴圈來寫 SCSS。

教學

[SCSS] 用預處理器來讓你的 CSS 更好維護

CSS 雖然嚴格說不能是程式,但如果在開發的時候加入一些程式的撰寫方式,是可以讓你的 CSS 更好維護的,而所謂的 CSS preprocessor(預處理器)就是幫我們來做這件事情的,寫起來會跟 CSS 有滿大的不同的,但如果習慣後開發速度跟維護都可以比原本的 CSS 更好,如果原本寫 CSS 就有好習慣的話,用起預處理器就會更加如虎添翼。

教學

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 對話框產生器

Bubbly 是一個簡單的純 css 對話框產生器,簡單設定想要的樣子就可以把 CSS 的 code 帶回去了。

教學

CSS 的穿透屬性- pointer-events

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

教學

把 CSS 效能優化- will-change

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

教學

CSS 改變反白選取的顏色 ::selection

如果想要讓內文的反白選取顏色與網站風格更統一,可以使用這個 ::selection,使用選擇器後在設定前景或背景色的顏色即可。

教學

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

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

好網站

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

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