CSS.GG 超過 700 個以 CSS 製作免費圖示 SVG、Figma 多種格式下載

CSS.GG 超過 700 個以 CSS 製作免費圖示 SVG、Figma 多種格式下載

CSS.GG 是一套開放原始碼、以 CSS 繪製而成的免費圖示集,收錄超過 700 個圖示圖案,提供 CSS、SVG、Figma 等多種格式,因為是以程式碼刻製,整套圖示檔案非常小(僅有 316kb),如果不想載入整套圖示集也可單獨取得特定的圖示,透過線上預覽功能調整尺寸大小、顏色等設定,亦可取得 CSS、SVG 和 TSX 程式碼。

Basicons 用於產品設計和介面開發免費圖示集,186 個基本線條圖案下載

Basicons

如果要設計產品或開發使用者介面,我們通常會需要風格相同的圖示集,若無法自行繪製或不希望付費購買也有很多替代方案,像是我個人很推薦的 Ionicons 收錄超過 700 個高品質圖示,還有 Zondicons 維持相當好的圖示設計,可整合到任何操作介面而不會看起來太過突兀或是造成使用上的障礙;Zwicon 則主打手工打造的高品質免費圖示集,看起來精緻且風格一致,能夠呈現優雅的視覺效果,使用 WordPress 的朋友可以試著以內建的 Dashicons 圖示集進行開發工作,在全新 5.5 版加入多達 71 個新圖示。

以 Google 雲端硬碟將 Office 文件發布到網路,免下載也可嵌入網頁瀏覽

以 Google 雲端硬碟將 Office 文件發布到網路,免下載也可嵌入網頁瀏覽

經常在公家機關、學校的網站公告上看到這種狀況,使用者必須手動下載檔案、開啟後才能查看公告,例如很常見的 Word 文件或 Excel 試算表等等,這也表示電腦要先安裝 Office,下載看完後還要手動刪除,實在是多此一舉。比較好的作法是先轉 PDF 就能直接在瀏覽器打開,也可避免遇到格式樣式跑掉的問題(將 Office 文件直接貼到網頁上還是容易有問題)。有沒有更好的解決方案讓使用者直接從網頁上瀏覽 Office 文件呢?

Embed Responsively 讓 YouTube、Google Maps 嵌入代碼支援自適應設計

Embed Responsively 讓 YouTube、Google Maps 嵌入代碼支援自適應設計
(Copyright: twindesign / 123RF Stock Photo

當前網頁設計趨勢是使用「自適應網頁設計」(Responsive web design,RWD)技術,讓網頁可隨著不同螢幕大小自動調整排版,而現階段行動裝置相當普及,為了讓每個裝置都能正常瀏覽網頁,自適應網頁設計幾乎已成必備,或是針對行動裝置開發「手機版」網頁,不過兩者都有各自的優缺點,還是得評估網站型態才能選擇。