I am having an issue with an background-clip:text
it breaks after using relative for no reason I can see, text is there but there color is rendered transparent due to the webkit fill color but it's not rendering the text gradient which was expected to be seen after position relative. after removing position relative it works perfect and I need to use it
this is my dummy code:-
So here is my code in HTML
:
<h3 class="colormanager">
<span class="animation_control_js">
<div class="internaltext">X</div>
<div class="internaltext">X</div>
<div class="internaltext">X</div>
<div class="internaltext">X</div>
<div class="internaltext">X</div>
<div class="internaltext">X</div>
<div class="internaltext">X</div>
<div class="internaltext">X</div>
<div class="internaltext">X</div>
<div class="internaltext">X</div>
<div class="internaltext">X</div>
</span>
</h3>
For animation purposes I have to use position: relative
, (working in FireFox but not in Google Chrome or Safari)
Here is the CSS
:
.internaltext{
position: relative;
}
.colormanager {
font-family:, Verdana, Arial, Helvetica, sans-serif;
font-weight: 600;
position: relative;
top: 0;
white-space: none;
margin-top: 15px;
color:transparent;
background: -webkit-linear-gradient(left, #fff, rgb(231, 221, 221), #fff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 0;
display: flex;
flex-direction: row;
font-size: 15px;
padding-left: 20px
}
I tried the following:
inherit: all
Using inherit in all
color:transparent;
background: inherit;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
I didn't find any interesting answer, so here am I, asking questions.
Don't use relative here.
Use it while animating with different classes and use webkit fill with idk shade of white or silver.
Eyes won't not the difference much and it will look cooler.