One of the cool design elements of Shi Wai Yuan is the dynamically changing mood-setting background of the site. At this point the site has 6 different backgrounds (grapes, wood, leaves, sky, steel & carbon fibre), each supposed to be somewhat relevant to the section of the site being viewed; so you’ll find the background of the site is grapes when you’re viewing the wine and spirits section of the site, and greenery when you’re browsing the health section.
This is actually pretty easy to do - we’re just applying different classes to the <body> tag of the site, so that different background graphics can be loaded via CSS.
^ This loads leaves in the background.
^ This loads clouds in the background
世外源一個很酷的設計元素是根據氣氛設置動態變換的網頁背景。基於此,網頁有六個不同的背景(葡萄,森林,樹葉,天空,金屬和碳纖維), 每一種意味著與網頁內容有某種關聯;所以你可以在你瀏覽紅酒相關網頁時發現背景是葡萄,瀏覽健康信息的時候背景是綠蔭。
這其實很容易實現——我們僅僅利用不同的<body>標籤等級,所以可以通過CSS加載不同的背景圖畫。