LCCNET 聯成電腦

m_nav_line m_nav_line

聯成電腦網頁設計教學:推薦給前端設計的10個Chrome外掛

icon_fb icon_twitter icon_google LINE it!
article_main_img

文、菜鳥編

 

 

身為設計人員,最需要的就是靈感。當然,能夠天天有如泉源般地湧出,那當然是再好不過。當沒有靈感時,我們就會去參考相關的設計資源。除了視覺呈現外,也會了解對方語法、結構、字型等資訊。今天小編就來推薦大家10個在Chrome上好用的前端設計外掛。

 

 

 

NO.1. PageRuler

外掛連結:http://bit.ly/2FF4Ewg
外掛說明:可自動或手動抓取出區塊的尺寸,定位,及對應的上一層或下一層區塊。

 

 

操作方式:
點擊外掛圖示後,預設是手動選取,若想要自動抓取,只要開啟外掛最前方的標籤圖示「<>」,如下圖。

 

 

 

 

NO.2. Grid Ruler

外掛連結:http://bit.ly/2FI2QlZ
外掛說明:可把它想成Photoshop中的尺標,主要進行對位使用。

 

 

操作方式:
點擊外掛圖示後,會在網頁上方及左方出現尺標,操作方式與Photoshop相同,將滑鼠移至尺標位置後,使用拖曳方式至要定位的位置,畫面就會出現定位線,方便查看區塊是否有對齊。

 

 

 

NO.3. Dimensions

外掛連結:http://bit.ly/2FHktCw
外掛說明:抓取區塊間的間距。

 

 

操作方式:
點擊外掛圖示後,將滑鼠移動到區塊中的的間格,就可以馬上獲得magrin的設定值。

 

 

 

NO.4. LiveReload

外掛連結:http://bit.ly/2FGq1gO
外掛說明:在網頁編輯時,可在瀏覽器上即時預覽,不須重整網頁。

 

 

操作方式:
小編在「編輯網頁可即時預覽畫面-Sublime篇(一)」文中有提到,可前往了解。

 

 

 

NO.5. CSSViewer

外掛連結:http://bit.ly/2FIiyO2
外掛說明:自動抓取元素,並顯示該元素的CSS設定。

 

 

操作方式:
點擊外掛圖示後,直接將滑鼠移至元素上,就會出現對應的元素CSS表,透過快速鍵,可以將對應的CSS設定值複製。

 

 

 

NO.6. CSS Peeper

外掛連結:http://bit.ly/2FI5l7V
外掛說明:與CSSViewer相似,差別在於比較偏向圖示化。

 

 

操作方式:
點擊外掛圖示後,直接將滑鼠移至元素上,就會出現對應的元素CSS表,但無CSSViewer的快速鍵操作,不過圖示化的表現,可以讓你快速了解CSS設定狀態。

 

 

 

NO.7. CSS3 Generator

外掛連結:http://bit.ly/2FIjpye
外掛說明:可把它當成是CSS特效整合器,透過視覺化操作產生對應編碼。

 

 

操作方式:
點擊外掛圖示就可開啟設定視窗,在CSS3 Generator你可以針對Text Shadow、Hex/RGBA、Box Model、Colums、Gradients、Arrows、Transitions、Filters各別設定。

 

 

 

NO.8. Stylebot

外掛連結:http://bit.ly/2FGKYbp
外掛說明:可直接修改網頁CSS樣式,可常駐在瀏覽器,將別人的網頁變成自己的Style。

 

 

操作方式:
點擊外掛圖示就可開啟設定視窗,在Stylebot中,可針對Text、Color&Background、Border、layout與Visibility做設定。

 

 

 

NO.9. WhatFont

外掛連結:http://bit.ly/2FHmv5C
外掛說明:可查詢網頁中所使用的字體、大小、行高等資訊。

 

 

操作方式:
點擊外掛圖示後,將滑鼠移至文字上,就可看到字體樣式,點即可以查看更細項的字體設定資訊。

 

 

 

NO.10. Emmet Re:view

外掛連結:http://bit.ly/2FFOLFZ
外掛說明:可一次呈現出不同品牌手機與螢幕大小的畫面呈現效果。

 

 

操作方式:
點擊外掛圖示後,選擇所需要呈現的手機品牌後,按下Device Wall就可一次呈現出來,畫面也會同步下拉,相當好用。

 

 

妥善應用工具,當查看不錯的作品時,就不需開啟開發者模式或是透過網頁原始碼查看。身為前端設計的你,快把外掛收藏起來以備不時之需吧!

 

 

 

 

痞客邦Blog:http://lccnetvip.pixnet.net/blog
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w

本網站使用相關網站技術以確保使用者獲得最佳體驗,通過使用我們的網站,您確認並同意本網站的隱私權政策。欲了解詳情,請參閱 隱私權政策