Html5很給力——代碼可實現的視覺效果

 

「Html5」一出生就伴隨着各類爭論,不過有幾個業界大佬的保駕護航、極力推進,相信隨着支持webkit瀏覽器的普及,HTML 5會愈來愈普及、愈來愈強大,必定是必然趨勢。
 

 

HTML5 ~= HTML + CSS + JS APIs,在Html5引擎中已經有一些代碼將html和css和jsapi作告終合。不少以前須要貼圖或者很冗雜代碼段才能實現的效果,採用Html5開發只需短短几行代碼就可輕鬆搞定,大大下降了流量的壓力。總之Html5真是很給力,那麼做爲一名移動端的wise設計師對於Html5能夠輕鬆實現的視覺效果不能不瞭解。

 

顯示本地沒有的字體
移動端各類平臺能夠支持的默認字體有限,若是須要好的視覺效果,很常見的作法就是將文字作成圖片,可是對於移動端來講,圖片就意味着大流量,在現在仍是按流量收費的移動網絡時代,一味的追求效果而採用圖片顯然不是最好的作法。可是採用Html5開發,只須要在代碼內設置所需顯示的字體,那麼一些個性的字體就能夠不用圖片輕鬆展現了。如上圖紅色方塊區域中的效果。

 

圓角效果
如上圖hao123主頁和hao123.tuan主頁效果所示,各類圓角在設計中對於提高用戶的好感度,美化頁面效果起到了很重要的效果。現在在移動端wise中也能夠放心大膽的設計圓角效果,由於Html5對於圓角的支持已經很好了,代碼能夠根據須要隨意控制圓角的半徑大小,而且可以對其完美的展示。

 

半透明效果
在設計中爲了可以讓層與層之間的結合不生硬,採用半透明的效果,也已是設計師慣用的手法之一了。Html5對於半透明效果支持也是很是理想的,代碼能夠根據須要隨意控制層的透明度。

 

漸變效果(線性漸變、徑向漸變)
在Html5以前對於線性漸變效果的支持就已經實現了,不過徑向漸變仍是須要貼圖才能實現。圖片對於移動端流量仍是很受限的移動網絡現狀,視覺效果知足?流量費用支付?用戶仍是很在乎的,不過Html5已經解決了這個問題,如同左圖展示的線性漸變可以很好的支持外,右圖中心區域徑向漸變效果的展示是否是也很理想:)

 

文本描邊
文本描邊這個效果其實在Html5以前也是能夠輕鬆實現的,不過並無被常常的使用,因此在這裏也說起一下,在Html5下文本描邊能夠很輕鬆的實現,且能夠根據需求控制文本顏色,文本描邊顏色,以及文本描邊的寬度,寬度甚至能夠精確到0.00px。

 

文本陰影效果  橫向、縱向、虛化
如上圖所示Html5除了能夠輕鬆實現文本描邊效果外,對於文本的陰影角度、方向等也能夠輕鬆實現。能夠自由控制陰影的角度、距離、顏色及投影大小。經過自由組合這幾個因素,實現不少須要圖片支持的效果就變得易如反掌。
上圖這樣看似只能經過圖片來實現的陰影+虛化效果,其實就是經過Html5來實現的。

 

文本外發光效果
常常對文字操做的視覺效果還包括:文字外發光。Html5對於文本外發光效果也是能夠很好支持的,而且能夠根據需求設置外發光的顏色、透明度、擴展範圍、大小等等。

 

倒影
剛纔講到了不少文字能夠實現的視覺效果,其實對於圖形來講是同樣的,圖形陰影、虛化、外發光效果也能夠實現。此外圖形還能夠實現倒影效果,如上圖所示,在Html5技術以前倒影效果須要貼圖纔可以實現的,而Html5中就能夠用代碼輕鬆來實現了。

 

綜上所述:Html5可以輕鬆實現的視覺效果簡直太給力了!太多太多須要作圖軟件成圖,代碼中貼圖才能實現的效果,顯示本地沒有的特殊字體來實現藝術話視覺效果;各類圓角效果的支持;半透明效果:線性漸變,以及突破性的徑向漸變支持;文本、圖形各類效果的修飾,描邊,陰影,虛化,外發光;以及圖形的倒影效果等。總而言之,以上各類視覺效果都可實現,那麼在之後wise網頁設計中,設計師不再用束手束腳了,不用再設計單調的界面了,不少效果均可以嘗試,而且不會帶來太多的頁面體積成本:)

 

以上主要是介紹Html5能夠實現的視覺效果,此外Html5還能夠支持不少功能層面的震撼效果,如:音頻、視頻、圖片展現、運動展現、360度展現、VR(虛擬實境)、本地存儲、表單、分欄顯示、地理位置等等。
有興趣的朋友能夠了解看看:
 
相關文章
相關標籤/搜索