標籤: CSS3 頁1
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 效能優化- will-change
css3 有一個屬性 will-change，是用來增加 CSS 變化時的效能的，但須注意不要過度使用，可以搭配 js 在適當的時刻使用這個屬性。
CSS3 的區塊填滿設定- object-fit 與 object-position
因為圖片大小不一致的關係，以往要做整齊的 UI 排版都不是很方便，要不就是把圖裁切過後存到server，再不就是依據比例計算圖片的長寬後再用 js 調整，而 css3 有了 object-fit 後，就可以直接幫忙處理這個問題。
CSS3 的陰影效果 box-shadow 與 text-shadow
CSS3 開始有了這個屬性後，就不用再仰賴繪圖軟體也能製作陰影效果，在製作 UI 上變得有彈性許多，而陰影效果又分為 box-shadow 和 text-shadow。
修改 html input placeholder 的顏色
placeholder 是 HTML5 後新增的 input 欄位的浮水印效果，可以用來提示使用者輸入的內容與格式之類的，要修改 placeholder 的顏色，要使用 CSS 的 ::placeholder 屬性。
幫你製造生動的 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 後就可以直接支援這個效果。
判斷是否可以使用某個 css 屬性與使用- @supports
CSS3 雖然陸續被主流的瀏覽器支援，但也還是有持續在發展新的語法，或是如果有需要支援舊版瀏覽器，比如一些沒辦法使用 flex 排版的瀏覽器，可以使用這個來判斷是否支援某種屬性才去讀取這段內容，不支援的話就讀取舊的寫法。