Csswarp 扭曲字串 CSS 特效產生器

一般來說,如果要在網頁上展示特殊的字型或文字排列、扭曲與變形等樣貌的話,大概都是直接用Photoshop或其他繪圖軟體做成一張圖或用動畫、Flash等樣式來呈現。如果不想用圖片的方式展示的話,可以另外試試看先進又好玩的CSS3。

剛剛看到一個很特別的網站,它是一個CSS文字特效的線上製作工具,可以讓不懂CSS的人也能用CSS展示一長串的文字並作各種旋轉與扭曲等排列與變化。如果你希望能在網站上展示一些比較特別的文字特效,又不懂CSS3的使用方式,可以試試看Csswarp所做出來的文字效果。做好之後,產生程式碼即可直接使用。

  • 網站名稱:Csswarp
  • 網站網址:http://csswarp.eleqtriq.com/
  • 使用方法:

    第1步  開啟Csswarp網站,在「TEXT」方塊中輸入你要顯示的文字,可使用中文或英文皆可,不過沒什麼中文字型可用就是了。

    輸入完文字後,按一下「WART IT!」按鈕,即可在右邊的編輯區中顯示你所輸入的文字。接著,我們可以在編輯區中字型設定文字序列扭曲的角度與方向。

    01 

     

    第2步  「CURVE」區可以設定文字扭曲的方式,看是要做成圓形或各種線段。

     02

     

    第3步  「TYPE」則可設定文字的大小、間隔與選轉方式。請依照自己的需求在左邊的選單設定各種文字展示方式,全部設定好之後,按一下編輯區上方的「GENERATE HTML」按鈕,產生網頁程式碼。

     03

     

    第4步  接著將程式碼全選後按右鍵、複製下來,貼上到你的網頁或新開一個檔案存成.html檔來測試看看。

    04

    Posted in 網頁編修、網站架設Tagged ,
    注意事項:本站所介紹之軟體、設定或網站服務,經實際安裝測試並通過防毒軟體掃毒。但因為不同電腦環境與軟體設定可能都各有差異,建議您僅在非工作用的電腦安裝、測試,避免因為不可預知的錯誤影響您的工作或電腦運作。從本站下載的軟體由所屬軟體公司提供,本站未經任何修改且無法保證軟體公司可能在新版程式中自行安插廣告程式或其他維護不當等因素而造成損害。在進行任何操作與設定之前,記得先行備份電腦中的重要資料,避免因為未依指示的不當操作或其他疏失造成資料毀損。當您依照本文所提供之訊息執行各種操作,表示您已閱讀此注意事項並同意自行承擔可能之風險與責任。
    相關資訊
    訪客留言

    13 則回應

    1. 你好
      想請教一個問題 華碩Eee PC 內建的華碩螢幕保護程式要如何移除? 這個問題困擾我好久 始終找不到解答 知道不應該貼在這裡 與內容無關 請包涵 謝謝!!

    2. 這個東西最近好像還滿流行的,
      看來有空可以來玩玩CSS3,
      感覺多了很多功能,
      不過最近覺得,寫網頁真得愈來愈難了,想當初HTML+CSS就可以混飯吃…

      1. 現在做網頁@@?比以前簡單多了吧…以前只能自己coding

        現在包裝那麼好想當初學JSP學得要死…結果Dreamweaver點點一就出來了

        想當初架CGI架得要死…結果現在無名一堆…wordpress包得這麼好

        哈XD想當初也是有學那些東西

        所以現在底子還不錯= =”有好有壞啦!

    發表迴響

    你的電子郵件位址並不會被公開。