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
Vue2.x responsiveness simple explanation and examples
1. Review Vue responsive usage Vue responsivenes...
CSS isolation issue in Blazor
1. Environment VS 2019 16.9.0 Preview 1.0 .NET SD...
MySQL high availability cluster deployment and failover implementation
Table of contents 1. MHA 1. Concept 2. Compositio...
In-depth understanding of MySQL global locks and table locks
Preface According to the scope of locking, locks ...
CentOS7 deployment Flask (Apache, mod_wsgi, Python36, venv)
1. Install Apache # yum install -y httpd httpd-de...
How to handle forgotten passwords in Windows Server 2008 R2
What to do if you forget Windows Server 2008R2 So...
XHTML tags should be used properly
<br />In previous tutorials of 123WORDPRESS....
How to remove spaces or specified characters in a string in Shell
There are many methods on the Internet that, alth...
This article tells you how to use event delegation to implement JavaScript message board function
Use event delegation to implement message board f...
MySQL 5.7.20 common download, installation and configuration methods and simple operation skills (decompression version free installation)
I just finished installing MySQL 5.7.19 in the ea...
Vue Beginner's Guide: Environment Building and Getting Started
Table of contents Initial Vue Building a Vue deve...
mysql5.7 create user authorization delete user revoke authorization
1. Create a user: Order: CREATE USER 'usernam...
How to get the dynamic number of remaining words in textarea
I encountered a case at work that I had never wri...
WHMCS V7.4.2 Graphical Installation Tutorial
1. Introduction WHMCS provides an all-in-one solu...
Automatically log out inactive users after login timeout in Linux
Method 1: Modify the .bashrc or .bash_profile fil...