DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,864 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Text Selection CSS Effects | Color, Background, Shadow, Prevent Selection | Day 2 | 50 Days of Intermediate HTML + CSS Projects
devkoustav
devkoustav

Posted on • Updated on

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>
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰πŸ» Here's how it will come up-

Default text selection styling


🎯 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>
Enter fullscreen mode Exit fullscreen mode

We will use the pseudo element
::selection for the <p>

CSS

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

πŸ‘‰πŸ» Here's how it will come up- πŸ”₯

different text color on selection - dev.to/koustav


🎯 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>
Enter fullscreen mode Exit fullscreen mode

CSS

.change-background-color::selection {
  background-color: #ff8080;
}
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰πŸ» Here's how it will come up-

Different background color on selection - dev.to/koustav


🎯 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>
Enter fullscreen mode Exit fullscreen mode

CSS

.change-shadow::selection {
  text-shadow: 1px 1px 0 #ff1a1a;
}
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰πŸ» Here's how it will come up-

Different text shadow on selection - dev.to/koustav


🎯 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>
Enter fullscreen mode Exit fullscreen mode

CSS

.change-color-shadow-background::selection {
  text-shadow: 1px 1px 0 #27ae60;
  color: white;
  background-color: #ffd24d;
}
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰πŸ» Here's how it will come up-

Changing background color, text color and text shadow - dev.to/koustav


🎯 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;
}
Enter fullscreen mode Exit fullscreen mode

❌ 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 */
}
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (2)

Collapse
 
koustav profile image
devkoustav Author • Edited on

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

lets_code_together

Collapse
 
koustav profile image
devkoustav Author

Want to contribute?
Put your suggestions in comments πŸ˜„

I'll be happy to add your suggestions!

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›