今週のお題「赤いもの」
どうも!LSSです!!
ちょっと使い勝手良さそうな?CSSネタを思いつきました。
赤いバッテン
ちょっと前に思いついたCSSネタを、今週のお題にも合うかも?と思い、お題に便乗公開してみます。
コード
<span style="background-image: linear-gradient(to top left,#ff000000 45%,#ff0000aa 50%,#ff000000 55%),linear-gradient(to top right,#ff000000 45%,#ff0000aa 50%,#ff000000 55%);">赤いバッテンがのる言葉</span>
↑をコピーして、赤文字部分を書き換えて使えます。
例えば、
あいうえお<span style="background-image: linear-gradient(to top left,#ff000000 45%,#ff0000aa 50%,#ff000000 55%),linear-gradient(to top right,#ff000000 45%,#ff0000aa 50%,#ff000000 55%);">柿喰う恵子</span>さしすせそ
のようにすると、
あいうえお柿喰う恵子さしすせそ
となります。
コード別例
もしくは、
<style>
.batten{
background-image:
linear-gradient(to top left,#ff000000 45%,#ff0000aa 50%,#ff000000 55%),
linear-gradient(to top right,#ff000000 45%,#ff0000aa 50%,#ff000000 55%);
}
</style>
<span class="batten">赤いバッテンがのる言葉</span>
のようにクラス化しても良さそうですね。
こちらの場合は<style>から</style>を書いておけば、
さしすせそ<span class="batten">太刀つって</span>となに<span class="batten">ゆーてんの</span>
さしすせそ太刀つってとなにゆーてんの
のように繰り返し使い易くなります^^
あとがき
linear-gradientで対角線を描き、その50%前後まで透明、50%前後の部分は赤、そのあとはまた透明、を右上がり右下がり両方重ねる事で、赤いバッテンにしてみました。
これだと文が長くても短くてもそれに応じて伸縮してくれるので、分かりやすくなります。
元々、HTML/CSSにはこういう打消し線がありますが、好みに応じてこちらを使うのもいいかもですね^^
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^