• css3

    テキスト装飾

    2012/10/01

    テキストを装飾する。

    text.png

     

     

    テキストをオシャンティ(オシャレ)に。

    ※webkit対応ブラウザでみてください(safari/chrome)


    文字の縁取り

    テキストを縁取ったり中身を塗ったりできます。

    ※webkitブラウザのみ適用可能です

    
    -webkit-text-stroke-width: ふちの太さ;
    -webkit-text-stroke-color: ふちの色;
    -webkit-text-fill-color: 内側の色;
    
    

    KANAPPLE.NET


    
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #000;
    -webkit-text-fill-color: #0CF;
    font-size: 36px;
    font-family: 'Archivo Black', sans-serif;
    
    

    ※Googleさんのwebフォントを指定しています。(参考:【CSS3】Webフォント



    文字に影をつける

    テキストに影をつけます。

    
    text-shadow: 右方向 下方向 ぼかす範囲 色;
    
    

    KANAPPLE.NET


    
    text-shadow: 2px 2px 5px #09C;
    
    


    文字の中に背景画像を表示する

    背景の適用範囲をテキストに+テキストを透明にすることで、背景画像の上にテキストでマスクをかけたようにできます。

    
    background: url(gazou.png) no-repeat;
    -webkit-background-clip: text; //背景の適用範囲をテキストに
    -webkit-text-fill-color: transparent; //テキストの色を透明に
    
    

    KANAPPLE.NET


    
    background: url(img/bg.png) no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    

    うん!おしゃれ!

    タグ:CSS3

この記事へのコメント

コメントを送る

  ※ メールは公開されません
Loading...
 画像の文字を入力してください

back