今天要分享的一個東西,那就是CSS3裡面的漸層色碼,之前做網頁設計,通常漸層色的部分通常要透過一些美工軟體使用居多,不過隨著時代的進步,現在只要靠CSS也可以寫出漸層的色碼,不過由於漸層色碼的CSS稍為複雜一點,對新手而言稍微比較難上手,所以今天要介紹好用的一個CHROME擴充功能,幫助大家快速上手CSS3漸層部分!

Gradient Creator!

  • CHROME擴充功能名稱:Gradient Creator!
  • 語言:英文
  • 版本:0.2.1.3
  • 下載位置:按這裡

 

第一步我們先來CHROME擴充功能所在位置,並且按右上方加到CHROME,

第二步我們安裝完點進去,這邊用一張圖來做解釋,上面區塊就是漸層的區塊,它的架構主要是分區塊,意思是針對每一塊不同顏色,你滑鼠按下去點一下就可以調,調的方式就是按下面那些一長串的色碼條,整個調好之後,我們直接按"SAVE",

第三步 之後會出現幾個藍色框框,這邊我們選擇"CSS3″這個部分,

最後我們就可以看一連串CSS3的原始碼了,而且這邊會告訴瀏覽器的支援度,就還滿方便的,

這邊附上CHROME7加SAFARI3.6以上測試的結果:

HELLO 您好

熱門相關文章

CHROME擴充功能好用系列-用GIFPAL快速製作你的動態圖片
昨天DOUBLE冠在網站找一些資料,無意間發現有一個軟體,它可以幫助你快速製作GIF圖片,像現在很多大學生都會發放一些奇怪古意的創意動態照片,也很喜歡拍一些影片等等,所以這邊要教大家如何快速製作你的創意動態照片! GIFPAL CHROME擴充功能名稱:GIFPAL 語言:英文 版本:1.2 下載位置:按這裡 DOUBLE冠就是愛升級 一起訂閱本站:按這裡 第一步我們先到擴充功能所在位置,然後按右上方加到CHROME,它會跟之前有些擴充功能一樣,會出現小圖示,然後給它按下去, 第二步 我們就會看到有一個選項畫面,畫面中的女孩相當搞怪樣子, 這兩個選項一個是視訊拍照,也就是當場錄,當場製作GIF動態, 另外一個是從電腦傳圖片來製作,這邊我們選擇有電腦圖示的那個, 第三步 我們就會看到一個時間軸的畫面,這邊我們選擇中間偏右"SELECT IMAGE" 第四步 我這邊選了三張DOUBLE冠的圖片,然後我們要一一按ADD IMAGE, 第五步 我們發現圖片順利出現在時間軸上面,這邊你也可以針對每一個影格調速度, 沒有要調的話,直接按中間偏左的"SAVE GIF"就可以了, 最後出現效果就像這樣子,是不是很簡單呢? 只是右下方有一個LOGO,這比較討厭一點,不過還是相當方便使用。
繼續閱讀
CHROEM擴充功能好用系列-兩招實用的功能幫你找尋圖片和色碼
今天要一次分享兩款好用的擴充功能,一個主要是有時候我們會用GOOGLE來找尋圖片,不過我們找到圖片之後,有時候想要找尋跟這張圖片類似的或一樣的,也要找看看有沒有一些著作權法的問題等等,所以這邊要推薦一款好用的,另外我們有時候美工喜歡網路上的顏色,卻不知道怎麼顏色擷取下來,這邊要推薦也是相當好用的擴充功能! Search by Image (by Google) 擴充功能名稱:Search by Image (by Google) 語言:英文 版本:1.1.1 下載位置:按這裡 PS:此文章純粹教學用! DOUBLE冠就是愛升級 一起訂閱本站:按這裡 安裝完CHROME功能後, 第一步我們先來到GOOGLE搜尋圖片的地方,假裝你看到網路這張圖片,想要找看看有沒有相關一樣圖片, 第二步 我們按右鍵"Search ...
繼續閱讀
CHROME擴充功能好用系列-用BeFunky Photo Editor編輯相片
DOUBLE冠今天要分享的好用CHROME擴充功能,就是大家 有時候比較傷腦筋的美編部分,你可能不會PHOTOSHOP、 ILLASTRATOR等軟體,可是又想製作美麗漂亮的相片, 那有沒有一些比較簡單的軟體,可以幫助你快速達到這些呢? 今天DOUBLE冠就要分享一款還不錯用的CHROME擴充美編 功能,幫助你在美編相片上更有信心。 CHROME瀏覽器   瀏覽器名稱:CHROME(現在最新16版本) 下載位置:按這裡   BeFunky Photo Editor   擴充功能名稱:BeFunky Photo Editor 語言:英文 版本:1.1 下載位置:按這裡 聲明:這篇文章純粹教學用、引用大元圖片作為素材。   首先我們來看到今天的素材,就是最近很夯的宅男女神大元,我們想要做到一個 不同的效果, 左邊是原本的圖片,右邊是用BeFunky Photo Editor製作出來的模糊美效果, 那這個效果是怎麼做得呢,讓我們一起來看看, 第一步 首先來到CHROME擴充功能位置,按右上角加到CHROME, 第二步 就會發現會跳出這個畫面,我們要點BE那個圖案的圖, (如果你是用CHROME其它版本沒有跳出這個畫面,按原來CHROME的位置, 來啟動應用程式就可以了!)  第三步 我們會看到網址首頁,我們要點有兩隻鳥的"Apply ...
繼續閱讀
免費軟體美編系列-像PHOTOSHOP一樣的線上美編軟體
今天DOUBLE冠要分享的軟體,是一套好用的擴充功能,這套擴充功能可以幫助你在美編上面,有著更多的素材和創意去編輯,剛開始我也覺得可能是普通的線上編輯軟體而以,不過一用才發現,像是筆刷等等都有相當多的素材可以使用,圖片也跟PHOTOSHOP一樣是採用圖層堆疊的方式,一起來看看! Sumo Paint CHROME擴充功能名稱:Sumo Paint 語言:英文 版本:3.3 下載位置:按這裡   PS:此文章教學總共兩頁,請麻煩注意一下! 第一步 我們先按右上角加到CHROME,這是屬於CHROME的擴充功能,加完之後就會出現小圖示,然後按下去,在官網的介紹圖片下,很明顯的就發現它可以用來創作很多的作品! 第二步我們會發現來到一個畫面,請你點NEW IMAGE, 第三步 像這邊我已經用它獨有的形狀畫一些圖,這邊有相當多的形狀可以選擇,讓你自由的創作發揮,所以是相當方便的一套美編軟體,讓你做自由發揮,創造出一些的藝術作品! 第四步 像這邊有很多筆刷樣式可以做選擇,我想常用PHOTO的人應該相當清楚,筆刷是可以做相當多用途的工具,像是海報、DM、網頁等等,筆刷都是不可缺的元素! 第五步 我這邊用一張漂亮的女生作為素材,然後想用筆刷簡單增加一些效果,如何匯入這張圖片就是靠左上角的File裡面有一個OPEN的選項來匯入,你可以選擇從電腦或者從線上的網址! 第六步 這邊記得先在右下方新增一個圖層,這樣筆刷和背景圖比較可以清楚明瞭移動,前一頁有講到相當多的筆刷可以選擇,還可以選一些3D樣式的筆刷,以及像其它一些雪景的筆刷等等, 第七步 我用一些像是愛心筆刷,油漆筆刷等等,畫了一些圖示在上面! 第八步  ...
繼續閱讀
CHROME擴充功能好用系列-用timeStats beta幫你做好個人管理
今天要介紹的一套擴充功能,是要幫助你控管自己的網站瀏覽部分,有時候我們用電腦做事情,偷懶的時候就會東摸摸西摸摸的,然後發現其實也浪費的不少時間,所以這邊要介紹一套好用的擴充功能,幫助你來控管你瀏覽的網站部分! timeStats beta 擴充功能名稱:timeStats beta 語言:英文 版本:0.61 下載位置:按這裡   第一步我們先來到 CHROME的所在位置、並且按右上方加到CHROME, 第二步 我們會看到CHROME右上方有個圖示,請你按那個圖示, 這邊你會看到一個大圓餅,我這邊先瀏覽過自己的網站和GOOGLE, 然後在按SHARE,就會看到我這個圖, 從圖上就可以準確看到我去過什麼網站,以及比例多少%等等,相當方便, 也可以用來控管自己, 最後我們再按一個ADDITIONL的選項, 就會看到更仔細的資料,實在相當方便!
繼續閱讀
CHROME擴充功能好用系列-用GIFPAL快速製作你的動態圖片
CHROEM擴充功能好用系列-兩招實用的功能幫你找尋圖片和色碼
CHROME擴充功能好用系列-用BeFunky Photo Editor編輯相片
免費軟體美編系列-像PHOTOSHOP一樣的線上美編軟體
CHROME擴充功能好用系列-用timeStats beta幫你做好個人管理

DOUBLE冠就是愛升級

  • ※一起訂閱本站:按這裡
  • ※訂閱DOUBLE冠手機版本站:按這裡下載
  • ※引用網址:
  • ※如有發現圖檔無法預覽,請麻煩告知告知,將會盡速處理!謝謝~
  • ※請勿全文轉貼本站文章,歡迎「部份引用」與介紹,並註明出處~謝謝~~
  • 隨機文章

    FACEBOOK留言

    0 留言

    發表留言 »

    (姓名)
    (信箱)
    (網站)

    網站搜尋

    2015-DOUBLE冠就是愛升級 引用-Theme Sco v5.0 By:Scorpio

    本站不支援IE6以下的版本