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
Vue implements online preview of PDF files (using pdf.js/iframe/embed)
Preface I am currently working on a high-quality ...
Oracle VM VirtualBox installation of CentOS7 operating system tutorial diagram
Table of contents Installation Steps Environment ...
SQL IDENTITY_INSERT case study
Generally speaking, once a column in a data table...
Detailed explanation of CocosCreator project structure mechanism
Table of contents 1. Project folder structure 1. ...
Mysql specifies the date range extraction method
In the process of database operation, it is inevi...
Detailed explanation of how to use $props, $attrs and $listeners in Vue
Table of contents background 1. Document Descript...
Vue project implements graphic verification code
This article example shares the specific code of ...
How to use Nginx to carry rtmp live server
This time we set up an rtmp live broadcast server...
Vue uses ECharts to implement line charts and pie charts
When developing a backend management project, it ...
Create a virtual machine and install the Redhat Linux operating system on VMware (graphic tutorial)
How to create a virtual machine on VMware and ins...
Detailed explanation of Linux commands sort, uniq, tr tools
Sort Tool The Linux sort command is used to sort ...
How to track users with JS
Table of contents 1. Synchronous AJAX 2. Asynchro...
A brief summary of how to write paths when HTML files introduce external CSS files
1. Import the basic style of external CSS files U...
Detailed explanation of JavaScript error capture
Table of contents 1. Basic usage and logic 2. Fea...
Realizing tree-shaped secondary tables based on angular
First look at the effect: Code: 1.html <div cl...