Text Selection CSS Effects | Color, Background, Shadow, Prevent Selection | Day 2 | 50 Days of Intermediate HTML + CSS Projects

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 4 classes to know the text selection CSS-

1. change-background-color - to change background color
2. change-color - to change text color
3. change-shadow - to change text shadow color
4. change-color-shadow-background - to change text color, shadow and background color.

Default text selection without CSS 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 using CSS

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 for the <p>

CSS

.change-color::selection { color: rgba(3, 218, 198, 1); } 

👉🏻 Here's how it will come up- 🔥

🎯 Changing text background color on selection using CSS

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 using CSS

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 text background color, text color and text shadow on selection using CSS

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-

🎯 Using Universal ::selection

Instead of using ::selection in every object, use it only once for the whole body. Make sure your styling is according to your theme.

CSS

::selection { background-color: #121212; color: #fffffff; } 

❌ Preventing user from selecting text using CSS❗

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-

1. WhatFont - Check font styles used in any webpage.
2. ColorZilla - Get the color of any pixel on the page.

Check the series!
❤️ Happy Coding!
Follow up for more!