Example code for using CSS to darken the font color of the selected area when scrolling

When encapsulating the date picker, you need to darken the font color when selecting it. Let's take a look at the effect after implementation

insert image description here

You can see that it is not the entire text that is darkened, but the area in the middle. The focus of today's discussion is not on the encapsulation of the selector, but mainly on the style effect. If you want to understand the implementation ideas of this component, you can see the previous article Date Picker Implementation Ideas:

1. First of all, the color of the area will be darker when it enters , not the entire font , so we can't start by changing the text style from the selection. When we see the area, the first thing we think of is the mask .

2. However, it is easy to make the middle color lighter by using mask layer, just add mask layer + transparency + positioning . But how to make the middle color darker by adding mask layer? If you are entangled in solving the effect of darkening the color from the selected part, you will fall into deep thought. . .

3. We know that it is easy to lighten the color, so let's add a mask layer to all parts except the middle selected part to lighten the color, and the selected part will naturally be dark.

4. After deciding to add mask layers to the top and bottom , there is another question to consider. If a mask layer is added on top, can touchmove scrolling still be triggered? Here we think of sticky positioning. First of all, sticky will not leave the flow document, so triggering touchmove is still triggered within this box.

Code implementation:

//html structure <body>
    <div class="box">
        <p class="top"></p>
        <p class="one">123123</p>
           .....Many <p class="one">123123</p> are omitted here
        <p class="bottom"></p>
    </div>
</body>
//Style <style>
    .box{
        margin-top: 100px;
        height: 420px;
        width: 300px;
        position: relative;
        background-color: fff;
        overflow:auto;
        border: indigo 1px solid;
    }
    p{
        margin:0;
        height: 20px;
        text-align: center;
    }
 // Add a mask layer with white background and transparency to make the color of the blocked text lighter.top{ 
        height: 200px;
        background-color: #fff;
        position: sticky; //******* key code top: 0; //******* key code opacity: .4; //******* key code}
    .bottom{
        height: 200px;
        background-color: #fff;
        position: sticky;
        bottom: 0;
        opacity: .4;
    }
</style>

Result:

insert image description here

This is the end of this article about the sample code for implementing CSS to darken the font color of the selected area during scrolling. For more relevant content on CSS to darken the font color of the selected area, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!

<<: HTML code to add quantity badge to message button

>>: Bootstrap 3.0 learning notes button style

Solve the problem of 8 hours difference between docker container and host machine

Example code for using CSS to darken the font color of the selected area when scrolling

Solve the problem of 8 hours difference between docker container and host machine

Summary of Linux user groups and permissions

Docker uses dockerfile to start node.js application

Detailed explanation of Mencached cache configuration based on Nginx

Install tomcat and deploy the website under Linux (recommended)

How to query and update the same table in MySQL database at the same time

Solution to using html2canvas to process Dom elements with Baidu map into images

In-depth explanation of the global status of WeChat applet

Detailed graphic tutorial on installing and uninstalling Tomcat8 on Linux

12 types of component communications in Vue2

Recommend

Solution for VMware Workstation Pro not running on Windows

Summary of some common uses of refs in React

ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock'

Node quickly builds the backend implementation steps

Analysis of the pros and cons of fixed, fluid, and flexible web page layouts

Detailed explanation of common usage of pseudo-classes before and after in CSS3

vue uses Ele.me UI to imitate the filtering function of teambition

Detailed explanation of Js class construction and inheritance cases

SQL implements LeetCode (180. Continuous numbers)

A brief analysis of the tutorial on installing MySQL 8.0.18 on CentOS 6.8 (RPM method)

Causes and solutions for cross-domain issues in Ajax requests

Detailed tutorial on how to publish springboot projects through docker plug-in in IDEA

Detailed explanation of how to use binlog2sql to quickly roll back after MySQL misoperation

Example of using JS to determine whether an element is an array

MySQL 4 methods to import data