October
30

2017

テキストエフェクト

テキストにちょっとしたアクセントを加えるCSSの紹介です。

それでは、ソースサンプルとデモページをご覧ください。

▼以下が実際のソースサンプルです。

▼CSS


#txt1 {
    text-shadow: 2px 2px 0px block;
}

#txt2 {
    text-shadow: 2px 2px 0px #ffffff, 4px 4px 3px #663333;
}

#txt3 {
    text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
}

#txt4 {
    text-shadow: -1px -1px 1px #000;
}

#txt5 {
    text-shadow: -1px -1px 1px #111, 1px 1px 1px #000;
}

#txt6 a:link,
#txt6 a:visited {
   color: #330;
   line-height:1em;
   font-size:1em;
   text-decoration:none;
}
 
#txt6 a:hover,
#txt6 a:active {
   text-shadow:              
   0 1px 1px #c0c0c0,
   0 2px 0 #a8a7a6,
   0 3px 0 #8b8a89,
   0 4px 0 #7d7b7a,
   0 5px 0 #686766,
   0 6px 3px #5f5e5d;
}
 


▼HTML

<p id="txt1">TEXT EFFECT</p>
<p id="txt2">TEXT EFFECT</p>
<p id="txt3">TEXT EFFECT</p>
<p id="txt4">TEXT EFFECT</p>
<p id="txt5">TEXT EFFECT</p>
<p id="txt6"><a href="#">ホバー時にTEXT EFFECT</a></p>
 


今回、参考にさせていただいたのは、
SYSMiks』さんです。
ありがとうございます。

デモページは、こちら