好的設計促進前端技術:視覺效果實現的方法

來源:互聯網
上載者:User

文章描述:設計師也需要瞭解的一些前端知識.

國畫中有句話,“畫虎先畫骨”。對應到網頁上,視覺效果只是一張皮,前端代碼是支撐這張皮的骨,瞭解骨架是怎麼長的,有助於設計出更合理高效的頁面。

一、常見視覺效果是如何?的

關於文字效果

文字自身屬性相關的效果css中都是有相對應的樣式的,如字型大小、行高、加粗、傾斜、底線等,但是一些特殊的效果,主要表現為ps中圖層樣式中的效果,css是無能為力的。但是css也在不斷髮展,在css3中已經新增了文字陰影的效果,可惜IE6、7、8均不支援。所以,一些比較特殊的文字效果,依然只能通過圖片來實現。

說說文字間距

在css中其實是可以控制文字間距的,但是現實中很少會使用,一方面是很多設計師不知道css中有相應的屬性,並且需要使用文字間距的情境也不多,另一方面,瀏覽器解析文字間距的方式也令這一屬性在某些情境下無法使用,比如在文字置中的時候,實際置中的地區是包含了文字間距的(如上圖),使得在視覺效果上讓人無法接受,所在當需要在文字中保留一定空間的時候(比如兩個字的按鈕),會直接用空格來代替。

不過多知道一種實現文字間距的方法總是好的,雖然目前來看應用情境很少,但是也許某天就派上用場了。比如12號的雅黑文本看上去會感覺密密麻麻的,但是加上一點文字間距,閱讀效果就會好很多。

關於字型

網頁裡中文文本字型一般都是宋體,不建議使用其他字型,但是其實字型是可以上傳到伺服器,然後頁面中引用該字型,就解決了使用者電腦上沒有相應字型的問題。不過很少有人會這麼做,為什麼呢?1.瀏覽器是可以設定忽略網頁字型,改用使用者佈建的字型(IE:工具->Internet選項->協助工具功能)。2.伺服器上的字型是需要載入的,而一個字型一般都幾兆,嚴重影響頁面載入速度。所以對於特殊字型,通常都是做成圖片。

關於背景

看看通常一個按鈕是怎麼拼出來。

產品類的按鈕我們一般都是像A這樣設計(中間段是橫向的重複圖案),而不是像B這樣,因為產品類的按鈕一般都是複用的,可以用兩段拼出來一個按鈕,而B這個寬度就限死了。

關於漸層、圓角、投影

在css3中終於實現了漸層、圓角和投影,不過可惜的是IE6、7、8均不支援,但是已經可以在越來越多的網站中看到新css的應用,尤其是按鈕,淡淡的漸層,hover上去有點淡淡的陰影,效果很好,對於不支援的瀏覽器,設定一個顏色近似的背景,看到的是單色、直角效果。

需要注意的是:代碼實現的只能是線性漸層,從某個顏色均勻的漸層到另外一個顏色,所以高光什麼的只能捨棄了。css3中還有放射狀漸層,不過暫時應用情境不多。

互連網發展速度很快,大大小小的新技術很多,多和前端交流吧。

關於對齊

主要是表單中文字的上下置中對齊,在ps裡很簡單,但是實現出來卻如上圖所示的,很難看,要想對齊,真是件麻煩的事情,沒有好的辦法。所以不是特別關鍵的地方,建議就隨它去了。

[1] [2]  下一頁



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。