˄

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 相關語法,快速套用到元素上。

繼續閱讀»»»

Blend-CSS 漸層色彩 CSS 語法產生器

Blend-CSS 漸層色彩 CSS 語法產生器

網頁有需要使用色彩漸層來布置時,有些人會使用圖片來避開因不同瀏覽器對 CSS 支援各有不同的問題,但也有網站採主要瀏覽器才支援的 CSS 語法來支應,Blend-CSS 是一個可以線上產生漸層色彩的 CSS 語法產生器,操作方法非常直覺,透過設計好的左、右可選不同色彩的介面,直接就可混合成漸層色彩,且可直接預覽,滿意後,就可複製其產出的 CSS 語法,放到網頁要應用的地方,相當方便。

繼續閱讀»»»

img2css 將圖片轉成 CSS 語法來呈現的產生器

img2css 將圖片轉成 CSS 語法來呈現的產生器

圖片想要在網頁上呈現,多數的作法都是直接使用 HTML 語法的 <img> Tag 來實現,而 img2css 這個網站,卻可以將圖片全部轉成 CSS 語法,再透過 <div> 的 style 屬性來呈現,完全不需要靠原始圖檔,就能在網頁上完整的呈現該圖片,當然,越是複雜的圖檔,產生的 CSS 語法就越多。

繼續閱讀»»»

Ultimate CSS Gradient Generator 網頁背景色彩 CSS 語法線上產生器

Ultimate CSS Gradient Generator 網頁背景色彩 CSS 語法線上產生器

製作網頁時,通常會使用到長、寬不等的背景圖,尤其是網頁中每個單元標題內的背景色彩,要產生這種背景時,通常有兩種做法,一是可以使用背景圖片;再來則是使用 CSS 語法,兩種方法各有優缺點。Ultimate CSS Gradient Generator 網站則是以 CSS 語法為主,使用方式相當簡單,可自訂色彩代碼,混入漸層、自訂長、寬後,只要複製其產生的 CSS 語法,便能應用到網頁裡。

繼續閱讀»»»

CSS 3.0 Maker 線上 CSS 3.0 語法產生器

CSS 3.0 Maker 線上 CSS 3.0 語法產生器

Cascading Style Sheets 簡稱 CSS,這種可應用在網頁(HTML)或 XML 裡的結構式語法,能讓網頁在排版時呈現多樣式的變化、美觀網頁裡的元素(字型、字體、顏色、間距...)使其每個元素可以有自己的呈現方式,可說是網頁的排版師,也是每個網頁設計師必學課題。目前 CSS 的標準也從1.0、2.0 進展到最新的 3.0,提供了更多的樣式及效果,讓網頁可以變得更生動,對於某些要呈現的網頁效果也省去了使用像是 Flash 或是其它美工軟體來製作。CSS 3.0 Maker 就是一個相當好應用的 CSS 3.0 線上 CSS 語法產生器,對於所需要的效果,可利用其產生器進行調整設定,便能產生出針對各家瀏覽器的支援度所需要的 CSS 3.0 代碼。CSS 3.0 Maker 可產生網頁效果如下:

  • Border Radius - 圓角框
  • Gradient - 漸層顏色
  • CSS Transform - 變形
  • CSS Animation - 動畫
  • CSS Transition - 改變效果
  • RGBA - 顏色透明效果
  • Text Shadow - 文字陰影
  • Box Shadow - Box 陰影
  • Text Rotation - 文字旋轉
  • @Font Face - 字型外觀

繼續閱讀»»»

 訂閱本站文章

 站內搜尋