CODEWITHSUNDEEP
cssfontsoverflowtransparency
user4311599
user4311599

Reputation:

Transparent font on transparent background

I am currently working on a scrollbar which looks just like this. If this text is to long for you just skip to the example!

There will be arrows at the left and right side to scroll either left or right. The color of the scrollbar is not grey as it seems but rgba(0,0,0,0.6). So its a transparent black, which will be used in front of images.

Now I want the last few letters in the line to fade out like in this example. To accomplish that I am using a div overlay with:

background-image: linear-gradient(to right, rgba(255,255,255,0), black)

But if I would do that with a transparent scrollmenu, it would mess up the background-color of the scrollmenu (if you don´t know what I mean look here).

So I found a solution by combining two divs with linear-gradients on the very right, which, if you lay them over each other, create exactly the background color of the scrollmenu. One of these lays behind the font, one of them overlays the font. That way I can achieve some transparency on the font. Here is an example for you guys:

#rightPart, #leftPart{
    width:200px; height:50px;
    position:absolute; top:0;left:0;
    color: white;
}
#rightPart{
    z-index:-1;
    background:linear-gradient( to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));    
    
}
#leftPart{
     background:linear-gradient( to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));    
}
<div id="rightPart"> Slight Transparency effect on this </div>
<div id="leftPart"></div>

The problem is that the transparency effect is limited to the background transparency of 0.5. Therefore the transparency effect can´t get as strong as I want it to be.

Now I am asking for a solution, with which I could achieve a stronger transparency effect. I would appreciate your suggestions.

Please remember that I can´t just make a specific word in the end transparent, since there is always a different word in the end of the scrollbar! Consequently I would need to make the font itself in a specific area transparent. And I personally don´t know how to do that (especially if it is supposed to work on all of the newest browser versions - including IE9+).

Upvotes: 9

Views: 657

Answers (2)

Persijn
Persijn

Reputation: 14990

<svg> filters are just what your looking for.
IE9 here to ruin your day CAN I USE IT?

Now to adjust the filter simply change the offset of the stop elements inside the linearGradiant.
offset to determine where the effect takes place
stop-color and stop-opacity to determine what the effect should be

example:
<br>
<svg height="40" width="200" viewbox="0 0 100 20" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="endfade" x1="0%" y1="0%" x2="100%" y2="0">
      <stop offset="50%" stop-opacity="1" />
      <stop offset="90%" stop-opacity="0" />
    </linearGradient>
  </defs>
  <text id="spesial" fill="url(#endfade)" x="0" y="15">Your text here</text>
</svg>
<br>Color?
<br>
<svg height="40" width="200" viewbox="0 0 100 20" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="pinkblue" x1="0%" y1="0%" x2="100%" y2="0">
      <stop offset="25%" stop-opacity="1" stop-color="pink" />
      <stop offset="50%" stop-opacity="1" stop-color="aqua" />
      <stop offset="90%" stop-opacity="0" stop-color="aqua" />
    </linearGradient>
  </defs>
  <text id="spesial" fill="url(#pinkblue)" x="0" y="15">Your text here</text>
</svg>

Upvotes: 2

vals
vals

Reputation: 64164

Well, I can not offer a solution with full browser support. But since there isn't any other answer, may be it can be useful

First, let's create a base div that will hold the semitransparent color. Above it, let's set a div with the text. overlayed by a gradient from transparent to gray. this makes the right side of the div fully gray. The trick is to set for this div a mix-blend-mode of hard-light. This makes gray behave as transparent, keeping black as black

#base {
  left: 0px;
  width: 200px;
  height: 50px;
  position: relative;
  background: rgba(0,0,0,0.5);
}

#text {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  mix-blend-mode: hard-light;
}

#text:after {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, transparent 30%, gray 80%);
}
#base:nth-child(2) {
  background: rgba(0,0,0,0.25);
}
#base:nth-child(3) {
  background: rgba(0,0,0,0.125);
}
    <div id="base">
    <div id="text"> Slight Transpareny effect on this </div>
    </div>
    <div id="base">
    <div id="text"> Slight Transpareny effect on this </div>
    </div>
    <div id="base">
    <div id="text"> Slight Transpareny effect on this </div>
    </div>

Upvotes: -1

Related Questions