3 cool CSS tips

1. Make text light colour on Dark background and dark colour on light background

So with SASS pre processor you would do something like this:

In css we don’t have colour functions but we could use the mix-blend-mode property to achieve something similar:

div {
   background: black;
}
div span { //the span tag holds the text
   mix-blend-mode: difference;
}

2. Make all uppercased world capitalized

text-transform: capitalize will not work an an all-uppercased world, so we need a different trick:

span {
   text-transform: lowercase;
}
span::first-letter {
   text-transform: uppercase;
}

3. Theme changer

You click on a checkbox somewhere in the document and it changes the font-size for the entire document or the background on the body tag, but how? Simple, with the help of the parent selector we can access parent selectors when we are interacting with child selectors(hover, :checked, focus etc).

body:has(.themeChanger:checked) {
   font-size: 25px;
   color: blue;
}

For an even better understanding watch also the video version for this article:

0