CSSだけで画像の色が反転したように見せる

この記事をシェアする

スポンサードリンク

タイトルは意味不明ですね。

とりあえずデモを見てもらえば意味が分かるかと思います。
デモページをスクロールをしつつ、画面右下にあるTwitterボタンをご覧ください(iPhoneだと見れないけど)。

DEMO

特定の要素を超えた部分の色が反転しているように見えます。

(background-attachment: fixed;を利用しているので、iOSでは使えないです…)

実装方法

まず、塗が白い画像と黒い画像を二つ用意します。

HTML

HTMLは割とシンプルです。

<div class="wrapper">
<section class="section bg-white">
<!-- コンテンツ -->
</section>
<section class="section bg-black">
<!-- コンテンツ -->
</section>
<a href="" class="twitter-button"></a>
</div>

CSS

.section {
position: relative;
}
.bg-white {
background-color: #fff;
}
.bg-black {
background-color: #000;
}
.section::after {
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: bottom 20px right 20px;
background-attachment: fixed;
background-size: 30px 30px;
}
.bg-white::after {
background-image: url(../img/twitter-bk.png);
}
.bg-black::after {
background-image: url(../img/twitter-wh.png);
}
.twitter-button {
position: fixed;
display: block;
width: 30px;
height: 30px;
bottom: 20px;
right: 20px;
}

 

どうでしょう、若干の無理やり感がありますが見た目は悪くありませんね。

div要素を使っても良いですが、疑似要素(::after)のほうが楽です。

最初に書きましたが、2018年2月19日現在iOSではこの方法は使えません。JavaScriptやPHPなどで、iOSかどうかの判定をした上で実装するといいでしょう。

以上です。

スポンサードリンク

<WordPressで複数の検索フォームを設置する際の注意点

素のJavaScriptだけでページのトップへ戻るボタン(jQueryなし)>

この記事をシェアする