波線ってのは実はないんですよね。結構需要ありそうなのに…。
なので、画像を作って背景にするんですが、これだと色味の修正が地味にタイヘン。
で、どうしようかいろいろ考えたんですが、
こーんな感じの画像をつくって、
1 2 3 4 5 6 7 |
.uline_wave { background-color: #f66; background-image: url(img/ul_wave.png); background-repeat: repeat-x; background-position: -7px -30px; padding-bottom: 5px; } |
みたいにCSS書けば、背景画像の色を変えれば簡単に色が変わるし、便利かも?
使うときは、
1 |
<span class="uline_wave">Lorem ipsum dolor.</span> |
みたいな感じで。
と、いうことで今作ってるサイトで少しこの方法を試してます。
問題無さそうなら継続してこうかな…と。
ある程度この画像の縦を大きくしておけばある程度まではフォントサイズの変更にも耐えられると思います。
ただ、このマスクする色を今度は要素の背景色に合わせて作らなくちゃいけないので、これはこれでまためんどいんですけどねーX(
コメントする