2023/5/28 更新

網站技術是一個無底洞,身為設計師,天天接觸的就是前端、後端、網管人員。行動裝置的崛起,改寫了網路生態,衍生出更多尺寸裝置、瀏覽器、框架…等等,享用的資源也是取之不盡、用之不完,因為每天都有大神釋出新的開源碼。

這篇是為了提高工作效率而蒐集,常常要的時候找不到,所以特別製作個懶人包,匯集一下這些法寶。

線上查詢

Boostrap

Boostrap

繁體中文版,由六角學院編譯製作。

w3school

W3school

簡體中文版,網路語言手冊。

jquery

jQuery

簡體中文版,jQuery 語言手冊。

emmet

Emmet

縮寫編譯,還不熟縮寫嗎? 讀熟就能加快打Code速度!

can I use

can I use

語法的相容性,擔心在那些 CSS 無法正常在某些瀏覽器顯示,使用前先查詢一下。

statcounter

Statcounter

瀏覽器那麼多種,誰才是市占率最高的霸主呢? (好想放生某些瀏覽器的相容性啊~)

screen size

裝置尺寸大全

桌機、平板、手機,品牌尺寸百百款,響應式設計當道,也被 Google 大神列為必備評比,每天上班的好朋友。

web history

網站歷史頁面

想回顧某個時段,網站未改版前的樣貌嗎? 時光機就在這邊!

tineye

Tineye

會幫你列出所有平台的相同圖片,買圖的時候很需要,貨比三家買授權圖,錢花在刀口上吧!

w3c

W3C

權威級的網站,檢視你的 code。

Line cache

PagePoker

清除 Line Cache。

線上製作

tinyjpg

tinyjpg

壓圖神器,壓縮後檔案瘦身、品質不變。

lovePDF

ilovePDF

PDF 檔案很肥大嗎? 丟進來瘦身一下。

codepen

codepen

大神們匯集平台,所見即所得,開源碼任你拿 !

convertio

convertio

轉檔神器,圖像、文檔、電子書、字體、向量、CAD 通通都能轉。

favicon

Favicon

利用 Image / Text / Emoji 產出 favicon.ico

QR code

QR code

可以產出 PNG /SVG / TIFF / PDF / EPS 格式。

enjoy css

Enjoy CSS

最常用的陰影和漸層 Background,幫你產出 CSS Code。

photopea

photopea

線上版 Photoshop,來不及灌軟體嗎? 應急用一下吧。

CSS Grid Generator

CSS Grid Generator

網格神器。

clippy

Clippy

多邊形遮罩,快速產出 css。

效果套件

normalize

normalize.css

清掉預設,切版起手式。

google fonts

Google fonts

網頁字體必備

google fonts helper

非官方下載

網頁字體必備

headhesive.js

headhesive.js

滾輪向下時,出現固定頁首,點選選單更方便。

slick

slick

輪播效果,修改簡單的參數,方便好上手。

swiper

Swiper

強大的輪播效果。

swiper

Swiper 參數

簡體中文版,常用的輪播效果「參數查詢」。

animate

animate.css

進場效果,讓你的網頁增添活潑感。

wow.js

wow.js

進場效果,讓你的網頁增添活潑感。

css3 animate it

css3 animate it

進場效果,讓你的網頁增添活潑感。

magnific popup

magnific popup

燈箱效果,好用上手快。

easyzoom

easyzoom

缺放大鏡功能嗎? 找他就對了!

rellax

Rellax

滾動視差。

sticky sidebar

sticky sidebar

黏性邊攔,黏在哪裡,由你決定。

midnight..js

midnight.js

固定標題,控制插件。

ScrollMagic

ScrollMagic

創造頁面捲動互動效果。

amburgers

Hamburgers

手機版按鈕開關樣式。

mobile pushy

手機版選單

手機版選單,展開下拉。

ICON

fontawesome

Font awesome

用 font 來控制 icon。

icones

icones

icon 無論 svg 或 code 都幫你準備好。

iconhunt

iconhunt

Notion 和 Figma 都能直接嵌入的 svg。

Material icons

Material icons

Google 出品品質保證,精美 icon 用 font 控制,不香嘛!?

fontello

fontello

只要畫得出來,就能夠做成 Font !

icon moon

IcoMoon

只要畫得出來,就能夠做成 Font !