読者です 読者をやめる 読者になる 読者になる

むじん島

文才のないWebプログラマがなにかする

CSSで蛍光マーカー風な強調表示をする

f:id:mu2in:20150428221208p:plain

この記事は以下の続編です。 mu2in.hatenablog.com



前回はCSS3のlinear-gradient()を使って蛍光ペン風の表現をしました。
今回は背景にBase64透過画像を使って、同じように再現できたのでご紹介します。

<style type="text/css">
/* 強調表示を蛍光ペン風に(画像版) */
article strong{
    margin:0 0.1em;
    padding:0.1em 0.2em;
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAJCAYAAADzRkbkAAAAEElEQVQIW2P8/TvkDCORBAB3fRvQcHDghQAAAABJRU5ErkJggg==);
    background-position:center bottom;
    background-repeat:repeat-x;
}
</style>

linear-gradient()版とBase64画像版の結果を比較する


CSS3のlinear-gradient()を非対応ブラウザでみると左のように表示されていました*1が、 今回の画像対応により、右のように蛍光マーカー風に表示されるようになりました。

画像を読み込むため表示が遅くなりますが、対応ブラウザが増えるのは良いですね。

おまけ:透過画像を作る

マーカー用の画像を作るのが面倒だったので、canvas要素+JavaScriptで黄色の透過画像を作ってみました。
違う色の透過画像を用意したいときに使ってみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function(){
    //canvasを生成
    var canvas = document.createElement("canvas");
    canvas.width = 1;
    canvas.height = 9;
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgba(252, 252, 84, 0.8)";
    ctx.fillRect(0, 0, 1, 9);

    //base64に変換
    var base64Canvas = canvas.toDataURL('image/png');

    //canvasダウンロード用にaタグで囲む
    var a = document.createElement('a');
    a.setAttribute('style','text-decoration:none;color:#222222;');
    a.href = base64Canvas;
    a.download = "highlighter.png";

    //strongタグの背景に指定
    var strong = document.createElement('strong');
    strong.textContent = base64Canvas;
    strong.setAttribute('style','font-size:16px;font-weight:bold;margin:0 .2em;padding:0.1em 0.2em;background-image:'+'url('+base64Canvas+');background-position:center bottom;background-repeat:repeat-x;');
    a.appendChild(strong);
    document.body.appendChild(a);
};
</script>
</head>
<body></body>
</html>

*1:古いAndroidではベンダープレフィックスで対応可能です