KPC
Kevin Powell - Community•3mo ago
Nero

Mask Highlight Effect

Hello! I'm a beginner that's only self-taught by watching youtube videos. So sorry in advance if I'm lacking some common knowledge. Anyways, when I add the ".highlight-texts" class to the body, I want the whole page to darken except the elements I've marked with a ".text" class, bring all the focus or highlighting those elements. attempt: 
.highlight-texts :not(.text) {
    filter: brightness(0.75);
}
.highlight-text .text {
    filter: brightness(1);
}
.highlight-texts :not(.text) {
    filter: brightness(0.75);
}
.highlight-text .text {
    filter: brightness(1);
}
The problem with my attempt is that adding a filter to an element will force its children elements to have the same effect, even if I try to add another filter to the children elements. Is there a way to darken everything excluding certain elements regardless of where they are? Also, I think it's worth mentioning that I'm trying to make a personal firefox extension, so it's fine if it works only on firefox
6 Replies
Kevin Powell
Kevin Powell•3mo ago
If you add a filter to something, it will impact anything inside that element as well Specially as an extension, I can't think of a good way around that
Nero
NeroOP•3mo ago
Aw I guess I'll have to settle with adding outline and bg color to highlight. Thanks!
Rägnar O'ock
Rägnar O'ock•3mo ago
If you are sure to have only one highlight at a time you can overlay an element on top of everything with an opacity (could also play with mix-blend-mode to reduce saturation if needed). You could then either use a clip path to cut away the part of the element that corresponds with the part of the viewport you want to keep normal (would need a bit of js to get the screen position of the target element/zone) An alternative to the clip path would be to use 4 elements arranged in a way to cover everything but your target That last one should be doable with anchor positioning but I don't remember if Firefox has it yet If you can't or don't want to use anchor positioning you can use JS like for the clip path to find the position of the target and place the 4elements around it like this : 
dark1 dark1  dark2
dark4 target dark2
dark4 dark3  dark3
dark1 dark1  dark2
dark4 target dark2
dark4 dark3  dark3
Nero
NeroOP•3mo ago
unfortunately I want basically every text element to be highlighted at the same time. for now I have found a temporary solution: 
.highlight-texts :not(.text-element):not(:has(.text-element))
{
    visibility: hidden; 
}
.highlight-texts .text-element,
.highlight-texts :has(.text-element) 
{
    /* color: white;  */
    background: black;
}
.highlight-texts :not(.text-element):not(:has(.text-element))
{
    visibility: hidden; 
}
.highlight-texts .text-element,
.highlight-texts :has(.text-element) 
{
    /* color: white;  */
    background: black;
}
right now I'm having more problem formatting my classes to tie them to my extension, but I already know I'm gonna encounter a problem with my highlighting method lol
MarkBoots
MarkBoots•3mo ago
what you could possibly do is when javascript detects your class. add a darkish overlay on top of the body. and then go over each text element, get its position and size and copy them to a layer on top of that (position absolute with the same position and size). im on a phone now, so am not really able to provide you an example. but maybe it will get you further thinking of it, it might mess up the css for those copies.
Nero
NeroOP•3mo ago
I have decided that masking/highlighting is ugly and settled with removing clutter and making the page minimal instead 
.highlight-texts :not(body) {
    border: none !important;
    box-shadow: none !important;
    background: inherit !important;
}
.highlight-texts :not(.text-element):not(:has(.text-element)) {
    visibility: hidden;
}
.highlight-texts :not(body) {
    border: none !important;
    box-shadow: none !important;
    background: inherit !important;
}
.highlight-texts :not(.text-element):not(:has(.text-element)) {
    visibility: hidden;
}

Did you find this page helpful?