Issue
Given Situation
1 .
Say I have 2 spans, both with background-color
, and one is inside another (overlapped):
<p>Alpha <span class="highlightTopic">Beta <span class="highlightYellow">Gamma Delta</span> Epsilon</span> Eta</p>
span.highlightYellow {
background-color: rgba(255, 237, 0, 0.5);
}
span.highlightTopic {
background-color: rgba(182, 203, 232, 0.5);
}
2 .
They are overlapped, but I want to be able to see both background-color
, so I apply
opacity
(applied, see above)linear-gradient
(see below)
for the overlapped background-color
span.highlightTopic span.highlightYellow,
span.highlightYellow span.highlightTopic {
background: linear-gradient(-7deg, rgba(255, 255, 0, 0.5) 50%, rgba(182, 203, 232, 0.5) 50%);
}
3 .
html output:
Problem
4 .
Now lets say, there is more than 2 spans, say 10 spans.
Then the number of my css style for each combination of them will be 45 ($$10:nCr:2 = \sum _{n=1}^{10-1}n = 45$$).
ie: I need 45 of this
span.highlightTopic span.highlightYellow,
span.highlightYellow span.highlightTopic {
background: linear-gradient(-7deg, rgba(255, 255, 0, 0.5) 50%, rgba(182, 203, 232, 0.5) 50%);
}
=>
5 .
So, How to apply linear-gradient
css to generally any 2 spans that have background-color
overlapped with each other?
(Without specifying 45 different combinations of them.)
Solution
Solution (workaround)::
jsfiddle: Highlight Background color Overlap (soln)
1 .
you need a Master class
(Css Style Rule)
span.hlBackgroundMs {
--color-main: aliceblue;
background-color: var(--color-main);
}
2 .
add the additional Master class
to each of the element
<span class="highlightYellowPaint hlBackgroundMs">Linux</span>
3 .
3 .1
add a variable --color-main
to the Master class
;
3 .2
and use that --color-main
for assigning colors, for all the Css Style Rules that were using for highlighting (instead of using background-color
)
span.hlBackgroundMs {
--color-main: aliceblue;
background-color: var(--color-main);
}
span.highlightYellowPaint {
--color-main: rgba(255,237,0,0.50);
/* background-color: rgba(255,237,0,0.50); */
}
4 .
4 .1
pick the color of the outer span
& assign it to --color-main-outerspan
4 .2
assign the 2 colors to linear-gradient
by using var(--color-main)
& var(--color-main-outerspan)
p > span.hlBackgroundMs {
--color-main-outerspan: var(--color-main);
}
span.hlBackgroundMs > span.hlBackgroundMs {
background: linear-gradient(-7deg, var(--color-main) 50%, var(--color-main-outerspan) 50%);
}
limitations & notes::
this may only works for 2 colors
p > span.hlBackgroundMs
is used to pick theouter span
, which is limited to certain cases- (note:
span.hlBackgroundMs:has(> span.hlBackgroundMs)
might be better, if your browser supports:has()
)
- (note:
more nested (lv 3+)
span
may not workthe logic is not easy to follow (there might be a better way)
you may just use an alpha with 0 transparency (to simply the work)
pure css (you may use js to achieve this too)
thinking process::
the whole point is to:_
being able to pick the color from the
(parent) outer span
& the(child) inner span
select the
inner span
, then assign those 2 colors tolinear-gradient
of it.
=>
to be able to pick color from alongside (inner/outer span's) Css Style Rule
-> you need to use a variable
--color-main
to be able to share the variable with diff alongside Css Style Rule
- (eg: share between
highlightContentObject
&highlightTechStack
),
-> you need to use an additional Master class
span.hlBackgroundMs
for that element, (to store & share that variable--color-main
)- (eg: share between
to be able to distinguish the 2 diff color (instead of just picking the
inner span
's--color-main
all the time)-> you need to use another variable
--color-main-outerspan
to store the color from theouter span
to be able to "store the color from the
outer span
"-> you need to distinguish the "outer" & "inner" first
->
p > span.hlBackgroundMs
<=> outerspan.hlBackgroundMs > span.hlBackgroundMs
<=> inner
(logic all set, assign the values)
(update)
As the span
gets more nested, you may try out the below tricks.
(though, as the nesting gets more complicated, the less reliable are these tricks...)
(the point is to get the color from
outer span
)
p > span.hlBackgroundMs {
--color-main-outerspan: var(--color-main);
}
span.hlBackgroundMs > span.hlBackgroundMs {
background: linear-gradient(-7deg, var(--color-main) 50%, var(--color-main-outerspan) 50%);
}
p > span > span.hlBackgroundMs {
--color-main-outerspan-lv2: var(--color-main);
}
p > span > span.hlBackgroundMs > span.hlBackgroundMs {
background: linear-gradient(-15deg, var(--color-main) 50%, var(--color-main-outerspan-lv2) 50%);
}
/*p > span > span > span.hlBackgroundMs {
--color-main-outerspan-lv3: var(--color-main);
}
p > span > span > span.hlBackgroundMs > span.hlBackgroundMs {
background: linear-gradient(-15deg, var(--color-main) 50%, var(--color-main-outerspan-lv3) 50%);
}
p > span > span.hlBackgroundMs > span.hlBackgroundMs {
background: linear-gradient(-15deg, var(--color-main) 50%, var(--color-main-outerspan-lv3) 50%);
}
p > span > span.hlBackgroundMs > span.hlBackgroundMs {
background: linear-gradient(-15deg, var(--color-main) 50%, var(--color-main-outerspan) 50%);
}*/
p > span > span > span > span.hlBackgroundMs {
background: linear-gradient(-15deg, var(--color-main) 50%, var(--color-main-outerspan) 50%);
}
Answered By - Nor.Z
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.