今天要分享的東西也滿好用的,因為自己在在做網頁的時候,因為有時候做一些東西比較趕,所以想要用一些資源可以複製貼上比較快的方式,所以就找到兩款還不錯用的CSS語法製造器,在這邊分享給大家。

csstypeset

  • 網站名稱:csstypeset
  • 網址:按這裡

這是一個還不錯用產生CSS字型的網站,官網它整體介面像這樣,

下面有一些介面可以去操控,比如你可以調一些字體,以及字體大小顏色、段落距離等等,算是還滿方便的,像這邊我就打上測試用的文字,調了藍色,然後右邊就會出現CSS代碼,之後就可以運用在比如像WORDPRESS style.css,或者是像其它無名、疲克邦等等可以使用CSS的地方,這邊只有字型和簡單背景色,所以這邊還要介紹另外一個產生背景的CSS語法產生器,

colorzilla

  • 網站名稱:colorzilla
  • 網址:按這裡

這邊有相當方便產生CSS漸層語法的介面,之前有介紹一款用gradient creator產生CSS3漸層色碼,不過現在要介紹的這款,也是相當的方便,首先我們看到它的介面,

像左中下方那邊就是可以去調它的漸層色碼,右上方就是整個背景色塊的SIZE,右下方當然就是產生的CSS3語法,你可透過調不同區塊顏色,就很簡單達到漸層的效果,比如我調像下面這樣,

變成橘色的漸層,之後我在把右下方的CSS代碼複製起來之後使用就可以,以上這兩個網站就分享給大家啦! 

熱門相關文章

網頁設計教學系列-用gradient creator創造出CSS3漸層色碼!
今天要分享的一個東西,那就是CSS3裡面的漸層色碼,之前做網頁設計,通常漸層色的部分通常要透過一些美工軟體使用居多,不過隨著時代的進步,現在只要靠CSS也可以寫出漸層的色碼,不過由於漸層色碼的CSS稍為複雜一點,對新手而言稍微比較難上手,所以今天要介紹好用的一個CHROME擴充功能,幫助大家快速上手CSS3漸層部分! Gradient Creator! CHROME擴充功能名稱:Gradient Creator! 語言:英文 版本:0.2.1.3 下載位置:按這裡   第一步我們先來CHROME擴充功能所在位置,並且按右上方加到CHROME, 第二步我們安裝完點進去,這邊用一張圖來做解釋,上面區塊就是漸層的區塊,它的架構主要是分區塊,意思是針對每一塊不同顏色,你滑鼠按下去點一下就可以調,調的方式就是按下面那些一長串的色碼條,整個調好之後,我們直接按"SAVE", 第三步 之後會出現幾個藍色框框,這邊我們選擇"CSS3"這個部分, 最後我們就可以看一連串CSS3的原始碼了,而且這邊會告訴瀏覽器的支援度,就還滿方便的, 這邊附上CHROME7加SAFARI3.6以上測試的結果: HELLO 您好
繼續閱讀
網頁設計教學系列-兩款好用的CSS3產生器幫你快速上手CSS3
今天要講的東西,是最近比較流行的CSS3,平常我們會說做一個網頁是透過HTML+CSS來完成,但CSS的部分,它有分成CSS1、CSS2、以及最近流行的CSS3,不過大家也一直很好奇CSS3到底是什麼,所以今天要講兩個網站,可以幫大家快速上手一些CSS3語法,讓你在使用CSS3上面可以更加得心應手! 最近有看DOUBLE冠網站的人應該有發現,我的框框是長這樣子的, 這邊我是用一些CSS3語法去產生出來的,但CSS3的語法能在那些瀏覽器使用又是個問題,所以這邊先介紹第一個超好用的網站, CSS3.0 MAKER 網站名稱:CSS3.0 MAKER 網址:按這裡 這款是我覺得很好用的一個網站,它主要可以透過一些簡單介面來產生CSS3語法以外,還會告訴你這個CSS3語法可以在那些版本以上的瀏覽器使用,左邊區塊介面為調整,右邊就是CSS3語法,中間那一區塊就是產生出來的樣子,讓我們一一用它不同功能做測試! 我們按到上方的”BORDER RADIUS”,這就像DOUBLE冠上面的框框語法一樣,比如我用一個段落來做測試,做得效果像以下這張圖一樣,瀏覽器版本的話,中間產生樣子的下面都是支援的瀏覽器版本喔,IE基本一定要IE9,也就是WIN7才能用IE9,這個要注意一下! 測試用 HELLO 您好 接下來我們用到TEXT-SHADOW那邊,我想要用像下圖這樣的效果,"TEXT SHADOW"代表著是文字陰影,也就是文字會產生陰影的效果,以往都是用PHOTOSHOP產生陰影,不過用圖多少會拖網站速度,所以CSS3有增加這樣的功能! 測試用二 HELLO 您好 我們再移到"BOX-SHADOW"那邊,這是整個區塊產生陰影,就像圖所似一樣, 測試用三 之後再為大家講解所謂的翻轉,這邊為大家介紹第二個網站, border-radius 網站名稱:border-radius 網址:按這裡 這邊介紹詳細的框框語法,像這個是可以快速產生各個框框的部分,原理也很簡單,只要調數字就可以了,比如像下圖這樣, 為大家講一下語法意思, -webkit-border-radius: CHROME能看得圓角框。 -moz-border-radius: 12px;:火狐能看得圓角框格式。 border-radius: 12px;;IE能看到的圓角框模式,通用於CHEOME! 像上圖一樣的效果, 測試用四 以上分享到這邊,有問題再問吧!
繼續閱讀
網頁設計教學系列-用gradient creator創造出CSS3漸層色碼!
網頁設計教學系列-兩款好用的CSS3產生器幫你快速上手CSS3

DOUBLE冠就是愛升級

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

    隨機文章

    FACEBOOK留言

    0 留言

    發表留言 »

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

    網站搜尋

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

    本站不支援IE6以下的版本