• »
  • 網頁設計
  • » Gradient Background 漸層背景產生器,提供各種漸層效果,支援IE、Firefox、Chrome
    上一篇:

    Gradient Background 漸層背景產生器,提供各種漸層效果,支援IE、Firefox、Chrome

    一般的網頁設計,整個讓網頁美化的關鍵,就是配色的選擇,舒適的配色,再加上美觀的背景圖片,就能大致做出好看的網頁。而在背景(Background)這一部分,我們有時會用顏色來填充,有時會用做好的背景圖片來取代。在以往CSS2,背景顏色(Background Color)的部分,之能使用單一顏色,但現在網頁技術已經進步到CSS3,越來越多網站,在背景顏色的部分,會使用漸層來美化。

    以前我們要做出漸層的背景,會用圖片來達成目的,現在我們可以直接透過CSS來達成,但針對Firefox、Chrome瀏覽器需要再加入其他的hack,也有符合W3C標準的CSS漸層語法。目前站長最喜歡的漸層背景產生器,是由Microsoft所提供的 CSS Gradient Background Maker ,這個服務。

     CSS Gradient Background Maker

    使用方法

    第1步 總共有三個步驟就能產生漸層背景,首先是先選擇漸層風格(Gradient style),有Linear(線狀漸層)、Circular(圓形狀漸層)、Elliptical(橢圓狀漸層);再來就是選擇兩種顏色來乎相搭配;再來是選擇漸層方向(Direction)、位置(Position)、大小(Sizes)。

    Gradient Background 漸層背景產生器,提供各種漸層效果,支援IE、Firefox、Chrome-01

    第2步 如圖選擇好要搭配的顏色後,選擇位置、大小,網頁最下面就會產生CSS3的樣式了。

    Gradient Background 漸層背景產生器,提供各種漸層效果,支援IE、Firefox、Chrome-02

    第3步 完成後,下方就會輸出你要的效果的樣式,直接把他複製起來,貼在要套用的屬性裡面。

    Gradient Background 漸層背景產生器,提供各種漸層效果,支援IE、Firefox、Chrome-03

    Advertisement
    Follow US
    About Post
    Date: 2013.06.27 Tags: , ,
    Discussion

    Leave a Reply