装飾に使う画像の用意
文字を装飾するための画像を用意します。ポイントは以下です。
- ・頭、胴体（本文の背景）、おしり、３枚の画像を用意
- ・３枚の画像は高さが同じで、横がピッタリ繋がる
- ・装飾に使う画像は表示の２倍サイズを用意（４Kディスプレイ対応）
- ・本文の背景画像は1px単位で横方向の繰り返し表示できるモノである
この記事では以下のように装飾に使用するイラストを３つの画像に分解しました。
同じ画像で試したい方はコチラからダウンロードできます。
HTML+CSSで実装
今回はspan要素の文字列に装飾を行ってみます。
（実装のポイント）
- ・span要素の背景に胴体画像をセットし、横方向繰り返しをセット（repeat-x）
- ・おしりとアタマ画像の幅を、span要素の左右マージンにセット
- ・span要素の擬似要素（::before,::after）を定義し、おしりとアタマ画像をそれぞれの背景にセット
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<span class="long-dog">犬</span><br>
<span class="long-dog">胴長の犬</span><br>
<span class="long-dog">もっと、なが〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜い犬</span>
</body>
</html>.long-dog{
/* 犬の胴体（本文エリア） */
display: inline-block;
height: 60px; /* 犬の画像縦幅÷2 */
line-height: 54px; /* 文字の縦位置調整 */
position: relative;
margin-left: 36px; /* おしり画像の横幅÷2 */
margin-right: 52px; /* アタマ画像の横幅÷2 */
background: repeat-x url("img/dog_body.png");
background-size: contain;
}
.long-dog::before{
/* 犬おしり */
content: "";
display: inline-block;
position: absolute;
height: 60px; /* 犬の画像縦幅÷2 */
width: 36px; /* おしり画像の横幅÷2 */
left: -36px; /* おしり画像の横幅÷2 */
background: no-repeat url("img/dog_foot.png");
background-size: cover;
}
.long-dog::after{
/* 犬アタマ */
content: "";
display: inline-block;
position: absolute;
height: 60px; /* 犬の画像縦幅÷2 */
width: 52px; /* アタマ画像の横幅÷2 */
right: -52px; /* アタマ画像の横幅÷2 */
background: no-repeat url("img/dog_head.png");
background-size: cover;
}できあがり
こんな感じで表示されます。（index.html）
装飾用の画像を用意するのが少し面倒ですが、一度作ってしまえばアチコチで使いまわせるので便利ではないかと。
この投稿をシェアする
広告
