Help - Search - Members - Calendar
Full Version: Knockout Text
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
oneiros
Hello all smile.gif,

I'm currently failing to create a knockout text.

My website contains some semi-transparent-black articles.showcase above a body with a background. (the .showcase are not the direct children of the body)
The background-image under the .showcase is darkened by it's semi-transparent-black. Now I want to create a h2.showcase_title in each respective .showcase as a knockout text, which shows the background-image of the body unaffected, by the .showcase background-color. The knockout or blending effect should not effect other content of the .showcase (not it's .thumbnail nor .tags)

It should look like the .showcase is a semi-transparent layer on top of the background-image and the letters of the .showcase_title are cut out of the .showcase, showing the background-image below.

I tried mix-blend-mode with screen and multiply both on the .showcase and on .showcase_title but it didn't have any blending effect at all. (Doesn't have anything to do with my browser, worked with other examples. Using chrome).

It might have something to do with the stacking context? Maybe because of the background-image is position:fixed it is not considered by the blending mode? I know nearly nothing of the stacking context of css and have not found a helpful tutorial for it. Maybe someone could privide me with a link to some?

I don't need to solve this with mix-blend-mode, but I want to create this effect programmatically, not with photoshop-prepared pictures and I would rather avoid svg.

The relevant code is this.
CODE

<body>
   <main>
      <section id="portfolio">
         <article class="showcase">
            <h2 class="showcase_title">TITLE!!!</h2>
            <img class="thumbnail" src="my_image.png"/>
            <section class="tags">
             ...
            </section>
         </article>
         <article>.....</article>
         ...
      </section>
   </main>
</body>


QUOTE

body {
margin: 0;
background-image: url("my_background.png");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.showcase {
background-color: rgba(0, 0, 0, 0.08);
}
.showcase_title {
color: white; /*Should be "cut" through the .showcase. White is planned as fallback for browsers which don't support mix-blend-mode*/
}


Thankful for any help smile.gif
Christian J
Hello!

QUOTE(oneiros @ Jul 17 2019, 08:38 PM) *

It should look like the .showcase is a semi-transparent layer on top of the background-image and the letters of the .showcase_title are cut out of the .showcase, showing the background-image below.

This page shows how to do knockout text: http://nimbupani.com/using-background-clip...s-fallback.html

To add a semi-transparent black area I cheated a little with a second background-image, using CSS "background-attachment: fixed":
CODE

section {
padding: 2em;
background: url(dog.jpg);
background-attachment: fixed;
}

section div {
background: rgba(0,0,0,0.5);
}

section div h2 {
color: transparent;
background: url(dog.jpg);
background-attachment: fixed;
-webkit-background-clip: text;
}

<section>
<div>
<h2>Knockout text</h2>
</div>
</section>

This also seems to work in current Firefox and Edge, but be warned that older browsers may make the text completely unreadable.


oneiros
Thanks a lot, it works! smile.gif I had to duplicate the background-size: cover; background-position: center; used for the <body> on the .showcase_title to make the backgrounds overlay exactly.
The current state of the website below as .png, just if some are interested. (Still a lot to do regardings it's design, but the knockout-text works)

https://drive.google.com/file/d/1LGB7AkyIRh...iew?usp=sharing

One question: The positioning of the .showcase_title background fits when I use background-size: cover; background-position: center; as for the body - but I don't understand why. If I use background-size: cover; background-position: center; on the .showcase_title I would expect it's background-image to scale and position relative to this element - thus scaling it much smaller and centered relative to the .showcase_title, not fitting to the body background-image. Obviously I still don't get css ^^
Christian J
QUOTE(oneiros @ Jul 18 2019, 12:12 PM) *

Thanks a lot, it works! smile.gif I had to duplicate the background-size: cover; background-position: center; used for the <body> on the .showcase_title to make the backgrounds overlay exactly.
...
One question: The positioning of the .showcase_title background fits when I use background-size: cover; background-position: center; as for the body - but I don't understand why.

Does it really fit? Note that the duplicated background-image is only shown through the letters, the background behind the semi-black area is the same image as for BODY.

QUOTE
If I use background-size: cover; background-position: center; on the .showcase_title I would expect it's background-image to scale and position relative to this element - thus scaling it much smaller and centered relative to the .showcase_title, not fitting to the body background-image.

That's what I'm seeing. Here's a screenshot:

Click to view attachment

When I remove the background-sizing it looks correct:

Click to view attachment

unsure.gif

Christian J
This indeed seems to make both background-images scale the same way, but only in Chromium and Edge --Firefox doesn't display the H2 text or translucent ARTICLE at all:

CODE
body, h2 {
background: url(dog.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

article {background-color: rgba(0,0,0,0.5);}

article h2 {
font-size: 100px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}


If I instead use "background-size: auto 100vmin" Firefox works better, but only as long as the background-image covers the entire ARTICLE element. Where there are gaps the H2 text becomes cropped:

CODE
body, h2 {
background: url(dog.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: auto 100vmin;
}

article {background-color: rgba(0,0,0,0.5);}

article h2 {
font-size: 100px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

--if the background is allowed to repeat this won't be a problem, though.

BTW, Firefox and Edge already seem to support "background-clip: text" without the "-webkit"-prefix (even though it's not official W3C Recommendation yet), but it seems Chromium still needs the prefix.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.