An Interest In:
Web News this Week
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
- March 13, 2024
- March 12, 2024
- March 11, 2024
August 29, 2022 06:44 am GMT
Original Link: https://dev.to/koustavdas/50-days-of-intermediate-html-css-projects-day-2-text-selection-css-effects-color-background-shadow-prevent-selection-2e9l
50 Days of Intermediate HTML CSS Projects | Day 2 | Text Selection CSS Effects | Color, Background, Shadow, Prevent Selection
Style your webpage according to your theme by changing the Text Selection Effects
We will use the parent class change
within which we will define 5 classes-
change-background-color
- to change background colorchange-color
- to change text colorchange-shadow
- to change text shadow colorchange-color-shadow-background
- to change text color, shadow and background color.
Default text selection styling
HTML
<p> <b>SELECT ME :</b> This is the default text selection styling.</p>
Here's how it will come up-
Changing text selection color
HTML
<p class='change change-color'> <b>SELECT ME :</b> Now the text will show different text color on selection.</p>
We will use the pseudo element::selection
CSS
.change-color::selection { color: rgba(3, 218, 198, 1);}
Here's how it will come up-
Changing background color on selection
HTML
<p class='change-background-color'> <b>SELECT ME :</b> Now the text will show different text background color on selection.</p>
CSS
.change-background-color::selection { background-color: #ff8080;}
Here's how it will come up-
Changing text shadow on selection
HTML
<p class='change-shadow'> <b>SELECT ME :</b> Now the text will show different text-shadow on selection.</p>
CSS
.change-shadow::selection { text-shadow: 1px 1px 0 #ff1a1a;}
Here's how it will come up-
Changing background color, text color and text shadow on selection
HTML
<p class='change-color-shadow-background'><b>SELECT ME :</b> Now the text will show different text-color, text-shadow and text-background-color on selection.</p>
CSS
.change-color-shadow-background::selection { text-shadow: 1px 1px 0 #27ae60; color: white; background-color: #ffd24d;}
Here's how it will come up-
Preventing user from selecting some text
CSS
{ -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */}
Task of the Day
Make a page in dark mode and a page in light mode and customize the page according to the theme.
Tip of the Day
Using Chrome?
Use these extensions to make your web styling better-
- WhatFont - Check font styles used in any webpage.
- ColorZilla - Get the color of any pixel on the page.
Original Link: https://dev.to/koustavdas/50-days-of-intermediate-html-css-projects-day-2-text-selection-css-effects-color-background-shadow-prevent-selection-2e9l
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To