koblog

高校生のWEBデザインブログ

CSSで実装する文字の「あぶり出し」

サムネイル

探偵漫画などでよく見かける文字のあぶり出し。

一定条件を満たした時だけ文字が見えるようになるので、メッセージを隠したい時などに便利です。

そこで今回は、CSSで実装する文字の「あぶり出し」を紹介します。

(上の部分をマウスでなぞると文字が見えるようになります。) 

 

あぶり出しのコード

HTML

HTML
<div class="box-white">
<p>ここに文章</p>
</div>

 

CSS

CSS
.box-white {
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #fff; /* 背景色 */
}
.box-white p {
    color: #fff; /* 文字色 */
    margin: 0; 
    padding: 0;
}
.box-white p::selection {
    color: #000; /* なぞった時の文字色 */
}

 

背景色・文字色はブログの記事部分の背景色と同じ色を選んでください。

また「なぞった時の文字色」はなるべくコントラストを付けたほうが見やすくなります。

サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる