˄

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 語法。

繼續閱讀»»»

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

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

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

繼續閱讀»»»

border radius 圓角框 CSS 語法線上產生器

border radius 圓角框 CSS 語法線上產生器

CSS 版本進展到 CSS3.0,讓以往需要靠圖片來輔助才做得到的效果,變得只需用 CSS 即可,例如邊框特效、色彩展示、圖形變化、動畫、轉換特效、文字色彩、文字陰影、區塊陰影、文字旋轉...等,不過標準有了,語法的學習上卻變成是個門檻,還好,線上有很多關於 CSS 產生器,像是按鈕、陰影、圓角...等,如果對 CSS 語法陌生,又想產生圓角邊框,可以來試試 border radius 這個線上的 CSS 圓角框產生器,簡單方便。
相關工具還可參考:

繼續閱讀»»»

 訂閱本站文章

 站內搜尋