超簡單格相簿效果教學,使用 CSS3 nth-child只要五步驟!

CSS3 超美網路相本效果 / CSS3 special album

使用 () 選取器可以讓我們快速選取規律的特定數物件,超方便!而網頁設計師每每在設計網頁時,相片的陳列一向都是個困擾,畢竟方方正正的東西,還要排得好看不會跑版,最簡單的就是把它做得跟表格一樣排得整整齊齊的啊,每個大小都一樣,多好處理啊!想要有隨機大小變化的感覺雖然好看卻不知道怎麼才能排出來,所以視覺設計師只好接受這樣死板又不美的畫面,大部份設計師採用添加一些外框或是背景去襯托相片,可是每個相本的大小都還是一樣啊~一點變化都沒有,所幸我們現在有了 CSS3:nth-child 選取器,要多一點變化就變得輕而易舉了。 的 :nth-child() 是一個利用簡單數學公式的選取器,只要把你想選取的規則寫在括弧中 :nth-child(這裏),就能夠達到選取的作用,若是對 :nth-child() 選取器不熟的話,可以先看看 使用CSS3 :nth-child(n) 選取器教學 這篇文章,在這個範例中,也稍微製作了 RWD 網頁效果,所以在桌機跟手機上面會呈現不大一樣的排列方式。

第一步 建立相片清單及編號

接下來簡單說明一下,首先先以建立好我們所需要的原始碼清單,並使用 CSS 設定 float:left,這時候順便標上編號會更清楚知道每個區塊的位置跟排列方式,後面對於排列設定會很有幫助喔。

 

第二步 設定清單外觀樣式

接著先確定一列要放幾張相片並計算出寬度百分比,以利 RWD 的作業,在這邊 Amos 採用的是一列10張相片的規則(比較好計算寬度),所以每個相片區塊的寬度就是10%。 CSS3 超美網路相本效果步驟1 / CSS3 special album

第三步 手繪相本編排草稿

接著我們先用紙筆畫出所想要的看似「隨機」的相片編排效果 (手繪圖) 如圖所示,我要的相片規則大概就是每6小張小張的相片就會出現一張大張的相片,這樣的規則出現兩次之後就是一整排的小張圖片,接著再重複進行如此的規則。

CSS3 超美網路相本效果步驟3 / CSS3 special album

第四步 使用CSS3的 :nth-child 設定大張的圖片

確定這樣的規則之後,我們就可以抓到重複的規則是每24張相片重複此規則一次,於是Amos就先設定 :nth-child(24n+4) 以及 :nth-child(24n+8) 的圖片為一般圖片的兩倍寬度,至於 :nth-child(24n+4) 以及 :nth-child(24n+8) 的意思就是「每24張內的第4張」、「每24張內的第8張」要被選取到的意思。使用這樣的選取方式可以選取到「4、8」張並設定其外觀為一般圖片的兩倍寬高。

CSS3 超美網路相本效果步驟3 / CSS3 special album

 

第五步 使用CSS3的 :nth-cild 選取特定相片

可是這樣看起來好單調啊~而且因為 float:left 的關係,1~3 的下方都出現空洞的狀態,沒關係~我們剛好可以利用float的特性,Amos先設定第9張相片的margin-top為負值,看!(咳~不是罵人)第9張相片剛好填補了第1張相片下方的空洞,且第10張相片也剛剛好填補了第9張相片原來的位置。CSS3 超美網路相本效果步驟4 / CSS3 special album

依此類推,我們只要設定 11、13、17、19、21 這幾張相片 CSS 的 margin-top 為負值即可,然後就搞定啦!

CSS3 超美網路相本效果步驟5 / CSS3 special album

 

接著我們就能補上相片囉~ 只要簡單的善用 CSS3 :nth-child 選取器再搭配 CSS3 的媒體查詢條件,我們就能快速簡單的完成漂亮的 RWD 格相本效果囉!不多說,立馬來看 Amos 實際完成的 CSS3精美相簿效果 效果吧!而且別忘了拖拉一下視窗看看 RWD 效果喔!如果各位有任何想法也歡迎跟 Amos 分享喔~