CSS 奇技淫巧十八招

http://www.tuicool.com/articles/VZneI3

 

開始覺得本身會寫 CSS 也算有一段時間了，經常遇到一些很是實用的技巧不斷地反覆使用，可是我個人覺得對初學者來說很難從樣式做用上本身發現能夠如此的用法。 
例如 border-radius: 50% 現在已經成了你們隨手都會用來搓圓仔的標準寫法了，但不知道能夠這樣直接設百分比從正方形變成圓形的初學者我猜應該也是很多。 
正好最近在教人學習 CSS ，整理下來也方便本身備忘參考。 

設定 margin 讓區塊置中

對，擺在第一個就是你們再熟悉不過的 margin: 0 auto ，為什麼列進來是因為只看 margin 的做用定義並無法得知瀏覽器會有這樣平均分配的行為，我本身一開始學的時候也徹底不知道。另外 margin 能設定負值也算是這種沒接觸過體會不出來，但用起來就會覺得幸虧能夠如此的特性。

用 position 做相對基準

一樣也是很基本，可是 position: absolute 會以上層中最靠近的 position: relative 區塊為基準去定位，這就我來看也有點符合上述的定義，因此一塊兒擺進來，當然以上這兩個其實比較算是初學者教材。

用 item + item 避開第一個項目

有時候清單項目之間會用框線作裝飾分隔，例如說用 li { border-top: 1px solid black } 加上 li:first-child { border: none } ，但其實能夠直接 li + li { border-top: 1px solid black }

用 border 畫三角形

直接看 Creating Triangles in CSS ，常搭配在 pseudo-elements 上使用。

用 text-indent 作圖片取代

直接看 Replacing the -9999px hack (new image replacement) ，近兩年才開始廣為人知的新技巧。

用 counter 裝飾有序清單

搭配 pseudo-elements 來裝飾無序清單是常見的做法，至於有序清單就得用上 counter 來填入數字了， Automatic Numbering With CSS Counters 這篇有 counter 的用法介紹。

用 pseudo-elements 作 drop shadow

直接看 CSS drop-shadows without images 。

用 flexbox 讓 footer 置底

直接看 Sticky Footer ，flexbox 帶來的新可能性之一。

用 background-attachment: local 作捲動陰影

出自 Pure CSS scrolling shadows with background-attachment: local ，搭配多重背景去覆蓋作出的效果，因此缺點是不能使用透明背景。

根據內容項目總數作樣式變化

出自 Styling elements based on sibling count ，我想到的用法是能夠在資訊圖表上作數量級標示。

用 pointer-event: none 讓目前選單連結失效

通常提到 pointer-event: none 都是用來作點擊穿透，但所以也有讓連結失效的做用，能夠用在導覽選單的當前頁面項目上。例如： nav li.current a { pointer-event: none }

用 overflow 來清除 float

出自 Overflow – a secret benefit ，能夠直接參考 OOCSS 相當出名的典範：Media Object 。

用 text-align: justify 分散排版

在以前的那篇 CSS 分散對齊橫列選單項目 有提過這個技巧，原理請看 Text-align: Justify and RWD ，由於選單用 flexbox 來排版會更適合，這個方法我一般用在一左一右兩個動做按鈕等開門式的排列上。

用 linear-gradient 做格線背景

參考 CSS3 Patterns Gallery 上的 Lined paper ，能夠搭配 background-origin: padding-box 來校訂，也能夠用來輔助檢測 Vertical Rhythm 。

設定 animation-delay 為負值來製造動畫系列

直接看 CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More ，否則真的從來不知道可使用負值。

用 :checked 狀態改造表單元素

以單選項目為例：

<input type="radio"><label>Yes</label>

input[type="radio"] { display: none }
input[type="radio"] + label::before {
content: '';
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid black;
}
input[type="radio"]:checked + label::before { background-color: black }

其它表單元件也可根據不一樣狀態作出變化。

用 :target 狀態來切換顯示

參考 Creating a modern modal with CSS ，也很常搭配 Absolute Centering in CSS 的技巧加上極大的 box-shadow 數值來作出光箱效果。

單一邊緣的 box-shadow

看到 CSS Box Shadow 的最後，藉由 spread 給負值達成的效果。 
除此以外，使用 inset 的內部陰影也能夠作出單邊效果，

border-bottom: 1px solid #fff;
box-shadow: inset 0 -1px 0 0 #dcdcdc;

來讓單一邊緣的框線產生層次感。

以上就是目前我列出的十八招，也歡迎各位提供符合上述特點的實用技巧，但願我往後也會不斷更新這份清單。