寫這一篇是想做為筆記，因為我一直被這如何製作大背景的網頁所苦惱(單純使用CSS)
參考的文章：http://www.webdesignerwall.com/trends/80-large-background-websites/
幾種主要的做法：
1.把背景圖片做在上面，然後在下方拉漸層做淡化的處理，這樣就不需要擔心因為文字內容的變化而造成圖片在Y軸長度不夠的問題，X軸則通常會使圖片置中左右做比較大張或是同樣使用漸層處理。
http://summer.tnvacation.com/
http://carfreaks.net/
上方的背景圖做重覆，很常見的技巧
http://www.viget.com/inspire/
當然也有會把大圖片做在Footer的做法，只是效果就沒有這麼強烈
http://futureofwebdesign.com/london-2011/
2.把背景圖片做成固定的方式(fixed)
這個網站做的真的做的很好，我沒有很詳細的看結構及CSS但用了很多有趣的技術
http://macallanridge.com/
很有趣的做法，圖片只是裝飾，就算沒有底部沒全部出現也有很棒的效果
http://www.jamieoliver.com/
http://www.jirnsum.eu/
這是使用position的方式，在網頁底部加上圖片，效果也不錯
http://www.csslayout.com/
其他
使用程式或是其他方式
http://www.august.com.au/
使用Table來做，不確定是如何達成
http://ringvemedia.com/
意外發現排版很有趣的網站
http://www.legendaryaircraft.hu/
http://www.upstruct.com/
有趣的網站
http://familyvacationsurvivalguide.com/
http://www.playintraffik.com/
No comments:
Post a Comment