スクロール時に選択領域のフォント色を暗くするために CSS を使用するサンプルコード

日付ピッカーをカプセル化する場合、選択時にフォントの色を暗くする必要があります。実装後の効果を見てみましょう。

ここに画像の説明を挿入

テキスト全体が暗くなっているのではなく、中央の領域が暗くなっていることがわかります。今日の議論の焦点はセレクターのカプセル化ではなく、主にスタイル効果にあります。このコンポーネントの実装のアイデアを理解したい場合は、以前の記事「日付ピッカーの実装のアイデア」を参照してください。

1.まず、に入るとフォント全体ではなく、エリアの色が濃くなるため、選択範囲からテキストスタイルを変更して始めることはできません。エリアを見ると、まずマスクを思い浮かべます。

2.ただし、マスクレイヤーを使用して中間色を明るくするのは簡単で、マスクレイヤー+透明度+配置を追加するだけです。しかし、マスクレイヤーを追加して中間色を暗くするにはどうすればよいでしょうか。選択した部分から色を暗くする効果を解くのに悩むと、深い考えに陥ってしまいます。。。

3.色を明るくするのは簡単なので、中央の選択部分を除くすべての部分にマスクレイヤーを追加して色を明るくし、選択部分は自然に暗くなるようにします。

4.上部と下部にマスクレイヤーを追加することを決定した後、検討すべき別の質問があります。マスクレイヤーを上部に追加した場合でも、 touchmoveスクロールをトリガーできますか?ここで、 sticky配置について考えます。まず、 stickyフロードキュメントから外れないので、 touchmoveのトリガーは引き続きこのボックス内でトリガーされます。

コード実装:

//HTML 構造 <body>
    <div class="box">
        <p class="top"></p>
        <p class="one">123123</p>
           .....ここでは多くの<p class="one">123123</p>が省略されています
        <p class="bottom"></p>
    </div>
</本文>
//スタイル <スタイル>
    。箱{
        上マージン: 100px;
        高さ: 420px;
        幅: 300ピクセル;
        位置: 相対的;
        背景色: fff;
        オーバーフロー:自動;
        境界線: インディゴ 1px 実線;
    }
    p{
        マージン:0;
        高さ: 20px;
        テキスト配置: 中央;
    }
 // ブロックされたテキストの色を明るくするために、白い背景と透明度のマスクレイヤーを追加します。top{ 
        高さ: 200px;
        背景色: #fff;
        position: sticky; //******* キーコード top: 0; //******* キーコード opacity: .4; //******* キーコード}
    。底{
        高さ: 200px;
        背景色: #fff;
        位置: 固定;
        下部: 0;
        不透明度: .4;
    }
</スタイル>

結果：

ここに画像の説明を挿入

スクロール時に選択領域のフォント色を暗くするCSSを実装するサンプルコードに関するこの記事はこれで終わりです。選択領域のフォント色を暗くするCSSに関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<: メッセージボタンに数量バッジを追加する HTML コード

>>: Bootstrap 3.0 学習ノートボタンスタイル