˄

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 排版效果絕對是個好幫手。

繼續閱讀»»»

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

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

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

繼續閱讀»»»

Beautiful CSS box-shadow examples 線上 box-shadow 模板,CSS 語法免費帶走

Beautiful CSS box-shadow examples 線上 box-shadow 模板,CSS 語法免費帶走

網頁在呈現方框、線條、文字等元素時,如果可以適時的加入陰影,就可讓該元素有立體效果的展現,Beautiful CSS box-shadow examples 這個網站做出了 80 多個 box-shadow 模板,使用者僅需要挑選適合自己網頁呈現的樣式,完全不必再經過任何的調整,就可以將 CSS 語法帶走,套用到自己的網頁內,快速又方便。

繼續閱讀»»»

WebGradients 配好的 180個漸層色彩,隨你取用

WebGradients 配好的 180個漸層色彩,隨你取用

漸層色較單一顏色來的有層次感,也深受美工人員的愛用,要用 CSS 做出漸層色,不難,但難在顏色如何搭配,這讓人很傷腦筋的,WebGradients 這個網站提供 180個已經配好色的漸層色彩,並提供 CSS3 語法與 PNG 圖檔,不論是個人或商業均可免費取用。

繼續閱讀»»»

Color gradient generator 漸層色彩 CSS 語法產生器

Color gradient generator 漸層色彩 CSS 語法產生器

漸層色彩在視覺上可以產生層次感,這對常看單一顏色的人來說,會更加有吸引力,以往要做出漸層色,設計師都會傾向於使用圖片,原因在於各家瀏覽器對 CSS 所支援的程度不相同,造成觀感不佳的問題,而如今瀏覽器對 CSS 3 基本上都支援的情況下,要達成純 CSS 語法就做出漸層色也變得相對簡單。Color gradient generator 這個免費網站提供 light、deep、rainbow 及 intense 四種漸層樣式、漸層方向、漸層大小等可視化工具讓讓用戶自行調整,完成後,就可產生 CSS 語法。

繼續閱讀»»»

 訂閱本站文章

 站內搜尋