- HOME
- > BLOG CATEGORY
- 【CSS】text-shadowの使い方、縁取りを実装してみよう!!
- お知らせ
- NEW 2024.10.05 【CSS】画像を左右交互に配置について解説!
- お知らせ
- 2024.05.16 【CSS】グラデーション色々なパターンを解説!
- お知らせ
- 2024.05.15 【WordPress】親カテゴリーの子カテゴリー一覧を表示する方法
こんな方に読んでほしい
CSS
について学びたい方へ今回は、text-shadow PART02についての解説になります。
text-shadowとは、テキストに対して影を追加できます。
box-shadowとは、要素に対して影を追加できます。
PART01では、text-shadow
の使い方を解説しております。
一度、こちらの「text-shadowを解説! テキストに影をつけよう!」をご確認しPART02にいきましょう。
Chrome | Safari | Firefox | IE | Edge |
---|---|---|---|---|
今回は、text-shadow
を使い、縁取り文字(袋文字)を作成します。
画像を使わず、CSSで「縁取り文字」を実装したいおもいます。
書き方は以下のようになります。
<div class="box">
<ul>
<li><a href="#"><span>HOME</span></a></li>
<li><a href="#"><span>ABOUT</span></a></li>
<li><a href="#"><span>NEWS</span></a></li>
<li><a href="#"><span>CONTACT</span></a></li>
</ul>
</div>
.box {
width: 100%;
margin: 0 auto;
padding: 4em;
box-sizing: border-box;
background-color: #5c87a6;
text-align: center;
}
ul li {
font-size: 3rem;
letter-spacing: .1em;
text-shadow: 1px 1px 0 #fff,-1px 1px 0 #fff,1px -1px 0 #fff,-1px -1px 0 #fff;
font-style: italic;
font-family: Arial;
font-weight: bold;
list-style: none;
}
ul li a {
color: #5c87a6;
-webkit-transition: color .3s ease;
transition: color .3s ease;
text-decoration: none;
}
ul li a:hover {color: #fff;}
上記のようなCSSになります。
「水平方向 垂直方向 ぼかす半径 色」の組み合わせになります。
要素 {text-shadow: 水平方向 垂直方向 ぼかす半径 色};
上記の解説にプラスになりますが、
li
に対して指定していた、text-shadow
をhover
に指定します。
書き方は以下のようになります。
<div class="box">
<ul>
<li><a href="#"><span>HOME</span></a></li>
<li><a href="#"><span>ABOUT</span></a></li>
<li><a href="#"><span>NEWS</span></a></li>
<li><a href="#"><span>CONTACT</span></a></li>
</ul>
</div>
.box {
width: 100%;
margin: 0 auto;
padding: 4em;
box-sizing: border-box;
background-color: #5c87a6;
text-align: center;
}
ul li {
font-size: 3rem;
letter-spacing: .1em;
font-style: italic;
font-family: Arial;
font-weight: bold;
list-style: none;
}
ul li a {
color: #fff;
-webkit-transition: color .3s ease;
transition: color .3s ease;
text-decoration: none;
}
ul li a:hover {
color: #5c87a6;
text-shadow: 1px 1px 0 #fff,-1px 1px 0 #fff,1px -1px 0 #fff,-1px -1px 0 #fff;
}
日本語ではあまり使用しないこと
日本語はひらがな・カタカナ・英数・記号、漢字が存在します。
また、「はね・とめ」があるため、影に少しズレが生じる可能性があります。
細字、小さい文字サイズでは使用しないこと
細字、小さい文字サイズに指定すると、文字が潰れたり、縁が崩れて見えてしまう恐れがあります。
大きい見出しなど強調する部分に指定するようにしましょう。
2px以上の縁文字はオススメしません。
1pxの指定はそこまでコードが長くはなりませんが、2px以上の場合はコードが倍以上長くなります。
また、影の重なりが多くなるため、一部が濃くなる場合があるので注意が必要です。
書き方は以下のようになります。
/*--一部省略--*/
ul li {
text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
}
今回はこれで以上です。
text-shadow
とはテキストに対して影を追加できます。box-shadow
とは、要素に対して影を追加できます。Chrome | Safari | Firefox | IE | Edge |
---|---|---|---|---|
2024.10.05
2024.05.15
2024.05.09
2024.05.09
2024.10.05
2024.05.15
2024.05.14
2024.05.09
2024.05.09
2024.05.09
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2024 shu-naka-blog