標籤: CSS 頁1

教學

CSS 改變輸入欄位(placeholder)浮水印樣式- ::placeholder

在 html5 之後我們可以輕易的在輸入欄位加上浮水印的文字,只要添加 placeholder 這個屬性,並設定想要顯示的值就好了。 那如果我們想要改變浮水印的樣式,只要使用 ::placeholder 這個選擇器就好了。

教學

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 後,就可以直接幫忙處理這個問題。

教學

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

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

好網站

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

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

教學

CSS 當內容超過容器時的設定- overflow

overflow 為 css 設定當內容超過容器時的顯示方式,包含 visible, hidden, scroll, auto。

教學

CSS3 的陰影效果 box-shadow 與 text-shadow

CSS3 開始有了這個屬性後,就不用再仰賴繪圖軟體也能製作陰影效果,在製作 UI 上變得有彈性許多,而陰影效果又分為 box-shadow 和 text-shadow。

教學

修改 html input placeholder 的顏色

placeholder 是 HTML5 後新增的 input 欄位的浮水印效果,可以用來提示使用者輸入的內容與格式之類的,要修改 placeholder 的顏色,要使用 CSS 的 ::placeholder 屬性。

好網站

讓你的網頁元素搖起來- CSShake

CSShake 是一個有趣的用 CSS 製作搖動的動畫效果的 library,簡單套用 css 就可以使用了。