CSSで文字を装飾する8個の方法！太字にするだけでは物足りない
ホームページやブログの記事を作成するときに、文字を強調したい場合があります。一般的には太字にすることが多いと思いますが、太字だけでは寂しかったり物足りなかったりすることもあります。ですので、いろいろな装飾を試してみてはいかがでしょうか。
概要
共通のHTML
HTML
このサイトのタイトルは<span class="mark">WEBをつくる</span>という名前です。マーカー風にする (その1)
このサイトのタイトルはWEBをつくるという名前です。
CSS
.mark{
background-color: #fff9a7;
}マーカー風にする (その2)
このサイトのタイトルはWEBをつくるという名前です。
CSS
.mark{
background: -webkit-linear-gradient(transparent 60%, #ffff66 60%);
background: linear-gradient(transparent 60%, #ffff66 60%);
}マーカー風にする (その3)
このサイトのタイトルはWEBをつくるという名前です。
CSS
.mark{
background: -weblit-linear-gradient(-100deg, rgba(255, 255, 255, 0), yellow 85%, rgba(255, 255, 255, 0));
background: linear-gradient(-100deg, rgba(255, 255, 255, 0), yellow 85%, rgba(255, 255, 255, 0));
}下線を引く
このサイトのタイトルはWEBをつくるという名前です。
CSS
.mark{
font-weight: bold;
text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
padding-bottom: 2px;
}文字を虹色にする
このサイトのタイトルはWEBをつくるという名前です。
CSS
.mark{
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent;
background: linear-gradient(transparent 60%, #ffff66 60%);
background: -webkit-linear-gradient(left, #DE487A, #FFDB4B, #2BD02B, #0095F9, #8E55FF);
}テキストに合わせて背景を切り抜くという手法です。ChromeなどのWebkit系ブラウザしか有効になりません。Webkit系ブラウザ以外はマーカー風になります。
とりあえず斜めにする
このサイトのタイトルはWEBをつくるという名前です。
CSS
.mark{
display: inline-block;
-webkit-transform: rotate(-7deg);
transform: rotate(-7deg);
margin: 0 2px;
}フォントの色と大きさを変える
このサイトのタイトルはWEBをつくるという名前です。
CSS
.mark{
color: #f00;
font-size: 120%;
}CSSアニメーションで色を変える
このサイトのタイトルはWEBをつくるという名前です。
CSS
@-webkit-keyframes blink {
0% {color:#03BC14;} 50% {color:#1577EE;} 100% {color:#03BC14;}
}
@keyframes blink {
0% {color:#03BC14;} 50% {color:#1577EE;} 100% {color:#03BC14;}
}
.mark{
-webkit-animation: blink 3s infinite;
animation: blink 3s infinite;
}いろいろと探してみましたが、あまりいい方法はないですね…。
