標籤: CSS3 頁1

教學

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

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

教學

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,只要套一下他們寫好的樣式,就能讓你的網頁元素多了生動的互動效果。

教學

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 就可以使用了。

好網站

CSS3 動畫庫- Magic Animations

Magic Animations 是一個有許多 CSS3 動畫的 library,簡單的套用他的 CSS 就能完成許多現成的效果了。

好網站

幫你製造生動的 CSS3 動畫效果- Bounce.js

Bounce.js 是一個可以幫你快速產生 CSS3 動畫效果的 library,只要透過一些參數的設定就可以讓你的元素加上 CSS3 的動畫。

好網站

輕鬆製作 css 的動畫效果- Animate.css

animate.css 是一個幫我們做好許多內建的 CSS3 效果的動畫庫,簡單的把 css 檔讀入後再照著文件說明使用就可以把效果加到頁面上了。

教學

CSS3 的 transition- 轉場效果

在 CSS3 出來之後,以往我們需要靠 js 完成的動畫效果,也大多透過 CSS3 來幫我們完成了,其中一種是 transition,可以做 CSS 的屬性在兩個值之間變化中間的轉場效果。

教學

讓網頁區塊的捲軸在 iOS 裡也有跟整個頁面一樣的回饋效果

在 iOS 裡卷動網頁,相信大家都有經驗是在往上或往下捲超過頁面時,會有一個可以拉超過頁面後「彈」回來的效果,這個是一個很好的 UX 回饋,但僅止於網頁整體,若想要在頁面裡某個區塊裡就不會有這個效果,還好 iOS 內建的瀏覽器可以設定 CSS 後就可以直接支援這個效果。

教學

CSS3 的 border-radius- 圓角屬性

CSS 的 border-radius 允許你替元素的設置圓角,值為一個圓形的半徑,也可以利用分數的形式設置為橢圓形。