歡迎光臨紅蛋植物的作品集

推薦使用Firefox, Google Chrome, Safari, Opera…等支援CSS 2.0良好的瀏覽器

2010-07-21

先進的瀏覽器,鮮勁

以下所演示的是由本機電腦所擷取的圖片,也是網站預期達到的顯示效果。若瀏覽情境與圖片有所出入者,推薦更新瀏覽器或是使用支援css3部份屬性的瀏覽器(css3目前仍未處於正式階段)。
※註:多數設計為外觀顯示調整,若瀏覽器不支援新屬性將不影響資訊讀取或基本功能操作。


這裡展示的是上端Blogger bar(為Blogger自動加入),
稍微修改樣式後,將bar的opacity調至0(透明狀態),當滑鼠拂過去時才以半透明狀態顯現(40%透明),如此一來較不會造成整體版面設計的不協調,又不失原來功能列本意。 ※註:左邊是拂過前,右邊是拂過後。


這裡是有點特殊的字體(Windows內建的Palatino Linotype字型),加上css3的屬性text-shadows:讓字體周遭有暈開的效果,可控制暈開的顏色、位置偏量以及範圍,是個很便利的新屬性,但前提是瀏覽器必需有支援才行。
另外,外框陰影是css3屬性box-shadow,目前主流瀏覽器(Firefox, Google Chrome, Opera, Safari)都已支援或有純樣式方法來達到相同效果ref. ※註:此二css3屬性目前所有穩定IE版本(IE8 & belower)皆尚未支援。


這是由Blogger很方便的Html/Text網頁元素所建立的簡易選單,基於這功能可以模擬出選單的功能。
圖中為滑鼠拂過後所產生的拉門效果;另外亦加上css3的box-shadow及opacity強調所觀注的目標。 ※註:IE6 不完整支援css2特性:hover效果(僅支援a:hover),IE8 & belower未支援css3特性opacity,故使用了jQuery,所以IE需支援javascript方能有相近的瀏覽體驗。

本Blogger網站已知問題如下:

無法通過w3c驗證(xhtml1-strict) 【淚】, 因為Blogger bar強制加入,造成許多驗證錯誤; 回應區塊的js有點亂,也造成一些驗證錯誤; 網頁最底部的網誌存檔也有驗證錯誤。 這部份相當欽羨WordPress的強大~

尚無法去除掉硬塞進來的兩個額外css樣式檔,有時會造成排版的小問題。
ex: 頁尾的網誌存檔.

IE以及未定時更新的瀏覽器:
會看不到box-shadow、text-shadow、opacity的效果,雖然已經盡力減少使用特殊樣式了,不至於影響文字資訊讀取,但仍會有一些瀏覽體驗的差異。

實驗性質的Ajax效果

Blog首頁點選上方滑動選單列可檢閱ajax效果, 此目標效果為:由連結網址載入更新資料但不重新載入網頁,亦展示了Blogger功能之一:條件式載入

技術來源參考
Ajax:
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
條件式載入:
http://abintech.twidv.com/2007/02/sidebar.html

沒有留言:

Tag

works (5) InkScape (1) archery (1) cge (1) chair (1) fs (1) graphic (1) tbc (1) webdesign (1) 姜維傳 (1)

Google Analytics