CSS

IcoFont 提供超過 2100個圖示字型免費使用

IcoFont 提供超過 2100個圖示字型免費使用

圖示的表達會比文字描述更乾淨俐落,就像 line 會將一些輸入的詞語轉成圖示來表示一樣,而在網頁中如果要使用圖示表達像是鈴鐺、電子郵件或是分享按鈕,傳統的做法可以使用圖片,也可以使用 SVG 向量圖檔,然而最簡便的方式還是使用圖示字型。
GoogleFont Awesome 均有提供可免費運用到網頁內的圖示字型,而 IcoFont 也是如此的應用,其提供超過 2100個圖示,透過 CSS 的引用,使用者就可以使用 Markup、Hex 或是 HTML Entity 語法來成呈現圖示,另外,每個圖示亦提供 SVG 向量圖型下載,讓應用更為全面。

繼續閱讀»»»

CSS Tooltip Generator 提示訊息框 CSS 語法產生器

CSS Tooltip Generator 提示訊息框 CSS 語法產生器

瀏覽網頁時,當我們看到帶有 ? 的圖示符號,通常將滑鼠指標指過去就會出現提示框,而其內容是解釋其意義或是提示使用者該如何操作等,而其出現的位置,可能會是在 ? 圖示符號的上、下、左、右。對 CSS 的初學者而言,要產生這樣的提示框並不容易,但我們可以透過一些輔助工具像是 CSS Tooltip Generator 這個免費網站,使用者僅需修改簡單的參數,便可以快速產生自己理想中的提示框,然後複製其產生的 CSS 語法,就可以應用到網頁內,相當方便。

繼續閱讀»»»

CSS Flexbox Generator 視覺化操作 Flex 屬性產生相對應的 CSS 語法

CSS Flexbox Generator 視覺化操作 Flex 屬性產生相對應的 CSS 語法

常可以見到在網路上關於 CSS 排版的提問,例如元件在容器內如何橫排、對齊或是自動縮放等問題,而這些問題幾乎都可以使用 CSS Flexbox 來解決,那什麼是 Flexbox 呢?簡單的說就是將容器的 display 屬性設定為 flex,再透過 flex 的相關屬性來決定容器內的元件要如何排版,所以 Flex 可以分成控制外容器及控制內元件的兩個主要類別屬性,如果是 CSS Flexbox 的初學者建議先看 圖解:CSS Flex 屬性一點也不難 這篇文章,因為即便是想要利用 CSS Flexbox Generator 這個網站來自動產生 flex 相關的 CSS 語法,你也可能需要對 flex 屬性有基本的認識,即便是不全,在實際操作該網站後,便可以完全釐清疑問,增加自己對使用 flex 排版的功力。

繼續閱讀»»»

CSS.GG 免費圖示字型集,透過 CSS 語法就可應用

CSS.GG 免費圖示字型集,透過 CSS 語法就可應用

在網頁中如果要用圖示,例如電話、郵件或是箭頭,以往的做法就是要有該圖示的圖片檔,將其放在指定的位置,但隨著螢幕大小多元化,固定尺寸的圖示圖片檔,缺點盡顯,除了佔用流量外,亦無法滿足螢幕大小的變化,因此將圖示如同網頁字形般的運用,是目前圖示應用在網頁的做法。不論是 Unicode、Icons - Google Fonts 、Font Awesome 都有提供適合在網頁中使用的字形化圖示集,CSS.GG 這個網站同樣提供免費的字形化圖示集,使用者可以自訂顏色、尺寸,再透過其所提供的 HTML,CSS、SVG 或是 TSX 語法就能應用到網頁上。

繼續閱讀»»»

Menucool CSS Tooltip Generator 提示訊息框 CSS 語法產生器

Menucool CSS Tooltip Generator 提示訊息框 CSS 語法產生器

「提示訊息框」常上網的人應該都有體驗過,也就是滑鼠指標指到某一物件,會出現提示訊息,告訴用戶該如何操作或其意義,如果想要在自己的網頁中加入這種提示訊息,也不用從頭打造起,可以透過 Menucool 這個網站所製作的 CSS Tooltip Generator 這個  Tooltip 產生器,只要對其提供的參數進行調整,就能輕鬆製作出符合各大主流瀏覽器都適用的提示訊息框。

繼續閱讀»»»

Copy & Paste CSS 線上提供 Buttons、Box-shadows 及 Color palettes 已搭配好的 CSS 樣式,複製就可以使用

Copy & Paste CSS 線上提供 Buttons、Box-shadows 及  Color palettes 已搭配好的 CSS 樣式,複製就可以使用

階層樣式表 (Cascading Stylesheets;CSS) 主要用來塑造網站的特殊風格,例如有段文字要用紅色來標明重點或是網頁版面要呈現2欄或 3欄的架構等等,對初學者而言參考別人寫好的 CSS 語法,可以快速增加對 CSS 的靈活運用,「Copy & Paste CSS」 是個提供 Buttons 及 Box-shadows 的模板網站,使用者可以透過其展示的樣式,如果符合自己的需求,便可以複製其 CSS語法,然後套用到自己的網頁,另外,該網站的 Color palettes 還提供已搭配好的顏色組合,供你複製帶走。

繼續閱讀»»»

請輸入關鍵字


請選擇...


˄