忍者ブログ

おぼえがき

必要な事柄を忘れないように書き留めた書きつけ

CSS疑似要素で単色currentColorになる画像アイコンを使う

CSSの疑似要素(::before::after)で文字色currentColorの画像アイコンを表示するCSSの記述は以下の通り。


a[download]::before
{
    display: inline-block;
    margin: 0 0.1875em 0 0;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url(data:image/svg+xml,<svg%20version=%221.1%22%20viewBox=%220%200%2016%2016%22%20xmlns=%22http://www.w3.org/2000/svg%22><path%20d=%22m13%2014h-10v-2h-2v4h14v-4h-2zm1-7v-3l-5%205v-9h-2v9l-5-5v3l6%206zm0-3v-0.764zm-12%200v-1.63z%22/></svg>) center / contain;
    mask: url(data:image/svg+xml,<svg%20version=%221.1%22%20viewBox=%220%200%2016%2016%22%20xmlns=%22http://www.w3.org/2000/svg%22><path%20d=%22m13%2014h-10v-2h-2v4h14v-4h-2zm1-7v-3l-5%205v-9h-2v9l-5-5v3l6%206zm0-3v-0.764zm-12%200v-1.63z%22/></svg>) center / contain;
    content: "";
    vertical-align: middle;
}

表示例は以下の通り。

ダウンロードのリンク(表示例であり何かダウンロードされるわけではない)

マスクとして使うSVG画像(SVGに限らずラスター画像でもよい)には透過部分を含むようにし、透過していない部分が表示される。上の例では「background-color: currentColor;」の色が表示される。

こうすることで「:visited」の色も反映されたアイコンを要素に付加できる。

参考

コメント

※ パスワードを入れると後でコメントを編集することができます。
ページ・トップ
[PR]
©おぼえがき 2006
Powered by 忍者ブログ