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
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 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:
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
Recommend
How to set the text in the select drop-down menu to scroll left and right
I want to use the marquee tag to set the font scro...
Understanding and application scenarios of enumeration types in TypeScript
Table of contents 1. What is 2. Use Numeric Enume...
MySQL 8.0.16 winx64 installation and configuration method graphic tutorial under win10
This article records the specific method of insta...
Introduction to Common XHTML Tags
<br />For some time, I found that many peopl...
How to solve the synchronization delay caused by MySQL DDL
Table of contents Preface Solution Tool Introduct...
How to quickly install and deploy MySQL in Windows system (green free installation version)
First, download the green free installation versi...
React implements the addition, deletion, modification and query of todolist
Table of contents Take todolist as an example The...
MySQL 8.0.12 installation and configuration method graphic tutorial (windows10)
This article records the installation graphic tut...
Vue+Vant implements the top search bar
This article example shares the specific code of ...
Detailed explanation of Linux text editor Vim
Vim is a powerful full-screen text editor and the...
Detailed explanation of the concept of docker container layers
Table of contents 01 Container consistency 02 Con...
Detailed explanation of the role of the default database after MySQL installation
When you learn MySQL, you will find that it comes...
The perfect solution for forgetting the password in mysql8.0.19
Recommended reading: MySQL 8.0.19 supports accoun...
CSS3 changes the browser scroll bar style
Note: This method is only applicable to webkit-ba...
Vue.js framework implements shopping cart function
This article shares the specific code of Vue.js f...