CSS3設計炫目字體


陰影

.text-shadow{
    text-shadow:#FF0000 0 0 10px;
    color:white;
    font-size:60px
}

描邊

<style>
.text-border{
    text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;  
    font-size:60px;
    font-weight:bold;
    color:white;
}

.h1{
    -webkit-text-stroke: 1.0px #000;
    text-stroke: 1.0px #000;
    color:white;
    font-size:60px;
    font-weight:bold;
}
</style>
<div class="h1">Hello World!</div>
<div class="text-border">Hello World!</div>

反射

<style>
.text-reflect{
   font-size:35px;
   float:left;
   -webkit-box-reflect: below 10px 
   -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.5));
}

.text-reflect-base{
    font-size:35px;
    margin-right:30px;
     float:left;
    -webkit-box-reflect:below 10px;
}

</style>

<div class='text-reflect-base'>Hello World!</div>
<div class='text-reflect'>Hello World!</div>

藝術字

<style>
  body{
    background:black;
    margin:50px;
  }
  h1{
    color:white;
    font-size: 100px;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
  }

  h1#fire {
    text-align: center;
    margin: 200px auto;
    font-family: "League-Gothic", Courier;
    font-size: 200px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
  }
</style>

<h1>World War</h1>

<h1 id="fire">World War</h1>

 

分欄

<style>
div{
    column-count:3;
    -webkit-column-count:3;
    column-gap:30px;
    -webkiy-column-gap:30px;
    column-rule:1px dashed black;
    -webkit-column-rule:1px dashed black;
}

.container{
    margin:auto;
    width:700px;
}
</style>
<div class="container">JavaScript一種直譯式腳本語言,是一種動態類型、弱類型、基於原型的語言,內置支持類型。它的解釋器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用於客戶端的腳本語言,最早是在HTML(標准通用標記語言下的一個應用)網頁上使用,用來給HTML網頁增加動態功能。在1995年時,由Netscape公司的Brendan Eich,在網景導航者瀏覽器上首次設計實現而成。因為Netscape與Sun合作,Netscape管理層希望它外觀看起來像Java,因此取名為JavaScript。但實際上它的語法風格與Self及Scheme較為接近。為了取得技術優勢,微軟推出了JScript,CEnvi推出ScriptEase,與JavaScript同樣可在瀏覽器上運行。為了統一規格,因為JavaScript兼容於ECMA標准,因此也稱為ECMAScript。</div>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM