CSS3のtext-shadowを使って文字自体が発光するような表現ができる。 背景は明るい色より暗い色のほうが効果を確認できる。 文字の周囲は白にして文字自体が光っている感じを表現する。残りの指定で発光しているいる色を表現する。

CSS

h3.shadow07b {
    width:600px;
    height:100px;
    font-size:3.0em;
    line-height: 100px;
    color:#fff;
    background:#000;
    text-shadow:#f0f0f0 0 0 3px,#9DECFF 0 0 30px,#9DECFF 0 0 50px,
                #00CCFF 0 0 100px,#00CCFF 0 0 120px;
}

HTML

<h3 class="shadow07b">文字からの発光</h3>

文字からの発光

文字からの発光

上の例では文字自体の色を白系で表現したが、ネオンらしくする場合は、文字色も発光している色に合わせる。この際、文字の色は中２つの色と同じ程度にして、後２つの色は文字色より濃い色にするとよい。

CSS

h3.shadow07d {
    width:600px;
    height:100px;
    font-size:3.0em;
    line-height: 100px;
    color:#7DE6FF;
    background:#000;
    text-shadow:#0093B7 1px 1px 1px,#0093B7 1px -1px 1px,
                #0093B7 -1px 1px 1px,#0093B7 -1px -1px 1px,
                #F0F0F0 0 0 5px,
                #7DE6FF 0 0 50px,#7DE6FF 0 0 70px,
                #00CCFF 0 0 100px,#00CCFF 0 0 120px;
}

HTML

<h3 class="shadow07d">文字からの発光</h3>

ネオンらしくする

文字からの発光