Blog

HOME > Web > css > 【CSS】text-shadowだけで文字に枠線を付ける

【CSS】text-shadowだけで文字に枠線を付ける

2016/05/30

css

備忘録です。

text-shadowだけで文字に枠線を付ける方法です。
Photoshopなどでテキスト画像を作成しなくてもCSSで枠線を付けられます。
原理は、テキストシャドウで8方向にぼかし無しの影を表現することで枠線にしています。

参考サイト
CSSのtext-shadowだけで文字に枠線を付ける

サンプルCSS

.wakusen1{
    width:300px;
    background: #f00;
    color: #000;
    padding: 20px 0;
    text-shadow:
        0 1px 0 #fff,
        1px 0 0 #fff,
        0 -1px 0 #fff,
        -1px 0 0 #fff,
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff
        ;
    font-size:2em;
    font-weight:bold;
    text-align:center;
}

サンプル1です。

枠線が付きます

各1pxのpx数を変えることにより枠を太くできます。
サンプル2です。枠を2pxにしました。

枠線が付きます

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

神社仏閣ホームーページ制作

ホームページ制作問合せ

口コミロボ