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!

Comments

[devkoustav]

Did this post help you?
Save it for later..

lets_code_together

[devkoustav]

Want to contribute?
Put your suggestions in comments 😄

I'll be happy to add your suggestions!