聯成電腦技術論壇

 找回密碼
 註冊
搜索

你會將Word轉成PowerPoint簡報嗎?

查看: 150|回復: 0

推薦給前端設計的10個Chrome外掛

[複製鏈接]
發表於 2018-5-17 09:34:22 | 顯示全部樓層 |閱讀模式
文、菜鳥編



原文網址





身為設計人員,最需要的就是靈感。當然,能夠天天有如泉源般地湧出,那當然是再好不過。當沒有靈感時,我們就會去參考相關的設計資源。除了視覺呈現外,也會了解對方語法、結構、字型等資訊。今天小編就來推薦大家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就可一次呈現出來,畫面也會同步下拉,相當好用。




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





官方網站:http://www.lccnet.com.tw
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w



您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



小黑屋|Archiver|手機版|聯成電腦技術論壇  

GMT+8, 2018-8-21 04:34

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表