蛍光ペン風のマーカーをよく見ますし、私のブログでも使用しています。色々なパターンを作成していたら、Safariだと正常に表示されない場合がありましたので書き留めておきます。

スポンサーリンク

1.黒っぽくなってしまうマーカー

Safari以外のブラウザを使用の方はどのように表示されるかわからないと思われますので、アイキャッチ画像の文字列の１行目と２行目を見てください。

Safariだと黒くなってしまうパターン１(終了位置が１００％の場合)

あいうえおかきくけこさしすせそ

background:	linear-gradient(transparent 10%, #ff00ff 100%);

Safariだと黒くなってしまうパターン２(終了位置を省略した場合)

あいうえおかきくけこさしすせそ

background:	linear-gradient(transparent 10%, #ff00ff);

これはちゃんと表示されます。ネット上ではこのパターンがよく紹介されていますが、色によってはきつい感じがしてしまいます。まあ色を薄く変えればいいことなんですけどね。

あいうえおかきくけこさしすせそ

background:	linear-gradient(transparent 10%, #ff00ff 0%);

私が本来作りたかったものは、少し優しい感じのマーカーでした。transparentを使用しなければ以下のようになります。

あいうえおかきくけこさしすせそ

background:	linear-gradient(#ffffff 10%, #ff00ff);

なぜ黒っぽくなるかは、W3Cによるとtransparentは、透明な黒でrgba(0,0,0,0)の省略形ということでした。するとSafariは正しいことになるのかな。

2.作成したもの

transparentを使用しないで、蛍光ペン風なマーカーのサンプルを並べていきます。

あいうえおかきくけこさしすせそ

background:	linear-gradient(#ffffff 10%, #ffff00);

あいうえおかきくけこさしすせそ

background:	linear-gradient(#ffffff 10%, #00ffff);

あいうえおかきくけこさしすせそ

background:	linear-gradient(#ffffff 10%, #00ff55);

あいうえおかきくけこさしすせそ

background:	linear-gradient(#ffffff 10%, #ff00ff);