The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Knockout Text, Help for knockout heading on semi-transparent background
oneiros
post Jul 17 2019, 01:38 PM
Post #1





Group: Members
Posts: 2
Joined: 17-July 19
Member No.: 26,935



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
Christian J
post Jul 22 2019, 04:56 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 07:30 AM