˄

如何在網頁中使用 Google Icon Font 免費圖示?

如何在網頁中使用 Google Icon Font 免費圖示?

「圖示」運用得當,絕對勝過用文字描述,以往要在網頁裡使用圖示,可以使用圖檔,但不論是要更改尺寸、顏色都相當麻煩,而現在大多使用 Icon Font,將圖示變成字形來使用,這樣一來不論日後維護要改尺寸大小、顏色就相當方便,「Google Font」內現在就有提供成套風格且免費的 Icon Font 供使用者應用,如果習慣使用圖檔,每個圖示同樣都有提供 PNG、SVG 圖檔格式,不論是應用在網頁、Android 或是 iOS 都不是問題。

繼續閱讀»»»

Type Anything 視覺化調整網頁文字字體、間距、大小...的 CSS 語法產生器

Type Anything 視覺化調整網頁文字字體、間距、大小...的 CSS 語法產生器

初學網頁編輯,除了功能外、美工外,還有排版用到的 CSS,樣樣都不是省心的事情,如果可以靠一些輔助工具來協助,絕對可以事半功倍,Type Anything 是一個可以用視覺化的方式來調整 H1、H2、H3 及 paragraph 等 HTML 元素的 Font family、Font Size、Font weight、Line height、Opacity、Margin top、Margin bottom、Letter spacing、Word spacing 及 Capitalization 等屬性的免費網站服務,每次的調整都會即時反映到樣板文字上,讓使用者檢視,完成調整後,就可以產生 CSS 排版語法,讓使用者複製到要應用的網頁,相當方便。

繼續閱讀»»»

HTML.cafe 線上 HTML 編輯器,即時呈現 HTML 及 CSS 語法變化

HTML.cafe 線上 HTML 編輯器,即時呈現 HTML 及 CSS 語法變化

寫好的 HTML 及 CSS 通常必須存檔,然後由瀏覽器去執行,這一來一回的動作可能要經過無數次,相當浪費時間,HTML.cafe 是個線上 HTML 編輯器,所敲進去的 HTML 及 CSS 語法,會即時反應在呈現欄中,免去存檔後,再到瀏覽器執行的過程,這對初學者或是需要測試 HTML 語法或是 CSS 排版效果絕對是個好幫手。

繼續閱讀»»»

Font of Web 輸入網址就幫你找出該網站所使用的字體與下載網址

Font of Web 輸入網址就幫你找出該網站所使用的字體與下載網址

瀏覽網站時,如果遇到喜歡的字體,該如何找出該字體名稱與下載呢?這時候,我們可以透過 Font of Web 這個線上工具來協助,只要輸入該網站網址,便可以找出該網站所使用的字體,並產生該字體的下載連結,但,並非所有字體都能產生下載連結,另外該網站會分析輸入網址的主要的 HTML Tag 像是 h1、span、p...等的與字體相關的 CSS,這對要參考其他網站來定義自己網頁字體的大小、字重或 Line Height 也有參考價值,另外,字體下載須注意版權,該網站並不保證所下載的字體可以用於個人或商業。

繼續閱讀»»»

CSS Background Patterns 提供純 CSS 背景圖案免費使用

CSS Background Patterns 提供純 CSS 背景圖案免費使用

適當的替作品加入背景,可增加作品的整體的滿意度,如果是網頁,以往因 CSS 語法在各家瀏覽器支援程度不一的情況下,多數會使用圖片來製作,不但前期製作麻煩,後續要維護也不容易,而如今瀏覽器與 CSS 標準逐漸統一,使用純 CSS 語法來製作背景圖對後續要更新維護也相對簡單,CSS Background Patterns 這個免費的線上服務,利用 CSS 語法做出多種樣式的背景圖案提供大家使用,使用者在該網站,可以更改背景圖案的前景色、背景色、透明度及圖案的濃密度,且每次更改會在該網頁的背景即時展示,讓使用者即時預覽,滿意就可以將該背景圖的 CSS 一鍵複製,方便使用者後續應用。

繼續閱讀»»»

COLOR SUPPLY 線上教你顏色如何搭配

COLOR SUPPLY 線上教你顏色如何搭配

製作文宣品、網頁或是任何需要美工的地方,常會為了色彩要如何搭配而傷腦筋,有些甚至會一改再改,雖說色彩搭配並無絕對的對與錯,只要能增添作品評價的配色方案,即便是只有使用黑色與白色兩色都能搭出完美的作品,至於初學者該如何學習色彩搭配美學呢?COLOR SUPPLY 是個不錯的網站,其提供羅盤式的配色選擇器,以指針搭配色菜風格來選出適合婚搭的顏色,而每次取色都會直接在範例的圖形中做變化,讓使用者可以直接預覽色彩搭配後的效果,並提供色彩碼讓使用者快速取用,

繼續閱讀»»»

 訂閱本站文章