Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 29, 2022 06:44 am GMT

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-

  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 styling

HTML

<p>  <b>SELECT ME :</b> This is the default text selection styling.</p>

Here's how it will come up-

Default text selection styling

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-

Different text color on selection

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-

Different background color on selection

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-

Different text shadow on selection

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-

Changing background color, text color and text shadow

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-

  1. WhatFont - Check font styles used in any webpage.
  2. 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:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To