CSS Grab n' Go Editor 可視化 CSS 語法產生器

CSS Grab n&#39 Go Editor 可視化 CSS 語法產生器

階層樣式表 (Cascading Stylesheets,CSS) ,最主要的功能就是讓 HTML 網頁上的元素套用不同的樣式,讓同一個元素可以有不同的樣貌呈現,不過對於初學者而言,要了解整個 CSS 語法規則並不容易,除了時間之外,如果有輔助的工具可以協助,相信可以更快的跨過門檻,CSS Grab n' Go Editor 是個可視化的 CSS 語法編輯器,其主要鎖定 border、box-shadow、text、filter、transform 常用屬性進行變化,用戶可以透過可操作的面板進行屬性值變更,且立刻可看到所產生的變化,完成整個調整,還可以快速產生 CSS、SASS、SCSS 及 LESS 相關語法,快速套用到元素上。

CSS Gradient Background Maker 漸層色 CSS 代碼產生器,適用 Firefox,IE,Chrome,Safari,Opera

CSS Gradient Background Maker 漸層色 CSS 代碼產生器,適用 Firefox,IE,Chrome,Safari,Opera

在網頁想要呈現顏色漸層的效果,為了避免各大瀏覽器版本所支援的 CSS 的問題,通常會使用圖片來解決,若是要使用 CSS 樣式表來呈現,則可以試試這個由微軟做的漸層色 CSS 代碼產生器,支援從各角度的漸層,適用 Firefox、IE、Chrome(10,11+)、Safari、Opera 等主流瀏覽器,簡單好用。

CSS Gradient Background Maker 微軟 CSS3 漸層背景產生器

CSS Gradient Background Maker 微軟 CSS3 漸層背景產生器

以往在網頁想要利用漸層的色彩來美化時,若要使用 CSS 需要考慮地的因素很多,各家瀏覽器所支援的語法也不盡相同,需要不斷的微調,最後乾脆使用圖片一勞永逸。現在 CSS3 開始普及,想要使用漸層色彩,越見方便,CSS Gradient Background Maker 是微軟所推出利用 CSS 語法漸層背景產生器,只要選好顏色,便能產生不同漸層方向,且支援 IE、Mozilla Firefox、Opera、Safari/Chrome 等瀏覽器的 CSS 語法。

CSS Lint 線上 CSS 樣式表檢測免費服務,讓 CSS 語法更正確精簡

CSS Lint 線上 CSS 樣式表檢測免費服務,讓 CSS 語法更正確精簡

在網頁的設計過程中,免不了都要引用到 CSS 樣式表,如何才能設計出適合自己網頁版型與正確的使用 CSS 語法,可以來試試這個 CSS Lint 線上的 CSS 樣式表檢測服務,使用方式相當簡單,只要將寫好的 CSS 語法,複製後貼到 CSS Lint 的檢查框內,便會幫你指出哪一行的語法不適合及修正建議,相當適合 CSS 新手在入門時所使用的工具。

SpinKit 馬上就可以套用的網頁 CSS loading 動畫圖示

SpinKit 馬上就可以套用的網頁 CSS loading 動畫圖示

網頁加載時,如果可以給予提示,告訴訪客網站確實有按要求正在動作,相信訪客會比較願意等候,因此,在很多的網站中,會看到利用百分比的進度條、loading 的動畫圖示來顯示,直到加載完成,以 loading 的動畫圖示來說,可以使用 GIF 動畫圖檔來製作,不過前提是須要有 GIF loading 圖檔,另外一種則是利用 CSS 來製作,Tobiasahlin 這個旗下的 SpinKit 網站,提供了以 CSS 為主的 loading 動畫圖示,並提供 HTML 與 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 語法帶走,套用到自己的網頁內,快速又方便。

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

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

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

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

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

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

CSS WAND - CSS 動畫免費應用

CSS WAND  - CSS 動畫免費應用

如果網頁要使用一些動畫圖示,例如滑鼠移動按鈕上方,按鈕的形狀會改變或是等待時常見到的 loading 動畫圖示,這些在以往可能需要 JavaScript 或是 gif 圖片來協助實現,而現在你也可以單純利用 CSS 語法就可辦到,CSS WAND 提供 Hover、Loading 類型的 CSS 動畫,只要複製該範例的 CSS 語法,就可以將範例應用到自己的網頁,相當方便。

如何用 CSS 做出滑動開/關切換按鈕?

如何用 CSS 做出滑動開/關切換按鈕?

在 Windows、Android、IOS 或是網頁上經常都可以看到滑動型的開/關切換按鈕,如果自己在網頁上要做出如此效果的按鈕,免用 Javascript 就可以辦到,proto.io 網站提供滑動開/關切換按鈕 CSS 語法產生器,透過介面輸入所需條件,便可產生 CSS 語法,方便你應用在網頁上。