The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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
Christian J
post Jul 17 2019, 06:46 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,224
Joined: 10-August 06
Member No.: 7



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.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
oneiros
post Jul 18 2019, 05:12 AM
Post #3





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



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 ^^
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 18 2019, 10:54 AM
Post #4


.
********

Group: WDG Moderators
Posts: 8,224
Joined: 10-August 06
Member No.: 7



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:

Attached Image

When I remove the background-sizing it looks correct:

Attached Image

unsure.gif

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 22 2019, 04:56 PM
Post #5


.
********

Group: WDG Moderators
Posts: 8,224
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

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: 23rd September 2019 - 04:09 AM