How to fade out the text when another block starts? - html

Question

I need to fade out a long text when some buttons start:
I'm using flex (and need to use it as it's part of a bigger template and I'm not sure about the side effects of changing the display), so passing everything to display: absolute is not an option, so using position: absolute is not easy.
.kt-portlet__head {
display: flex;
justify-content: space-between;
position: relative;
}
.kt-portlet__head-label {
display: flex;
align-items: center;
}
.kt-portlet__head-toolbar {
display: flex;
align-items: center;
align-content: flex-end;
}
<div class="kt-portlet__head">
<div class="kt-portlet__head-label">
<h3>
This is a really long campaign name that should faaaaaaaade out when it reaches the Statistics button
</h3>
</div>
<div class="kt-portlet__head-toolbar">
<div>
<div>
<a href="#" class="btn btn-brand">
<span>This is a button - text fade out from there</span>
</a>
</div>
</div>
</div>
</div>

Answer 1

Using a CSS mask, you can actually make this even simpler.
It's a CSS feature that has 98% support globally, though most browsers require a -webkit prefix still.
.wrap {
display: flex;
}
p {
-webkit-mask-image: linear-gradient(to left, rgb(0 0 0 / 0), black);
mask-image: linear-gradient(to left, rgb(0 0 0 / 0), black);
}
<div class="wrap">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
<button>This is a button - text fade out from there</button>
</div>

Answer 2

First we'll set the parent div's display to flex and max-width to 100% or whatever size you want. next set the flex-wrap to nowrap so the items don't get sent to another row.
no need to determine how much width the button's gonna take, you can set its width to auto so that it'll take up as much space as needed or you can set a max-width like me, so that no matter what it'll only take up 30% of the width.
next we'll set flex:1 for the .kt-portlet__head-label div, so that no matter how wide the button or the parent div is, it'll always take up the remaining space from the start of the parent div until the start of the button block, and also set min-width: 0 so that it won't override the width and max-width properties and overflow out of its container, next we'll set it's position to relative and we'll add a before tag with position:absolute that starts from the right side of the div, and has a linear-gradient background for the fade effect.
At last we'll set the h3 tag's white-space: nowrap so the text will stay in a single line and overflow:hidden to clip the text's overflow.
.kt-portlet__head {
display: flex;
justify-content: space-between;
position: relative;
align-items: center;
max-width: 100%;
width: 100%;
flex-wrap: nowrap;
}
.kt-portlet__head-toolbar {
width: auto;
max-width:30%;
}
.kt-portlet__head-label {
flex: 1;
min-width: 0;
position: relative;
margin-right: 3px;
}
.kt-portlet__head-label h3 {
overflow: hidden;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
}
.kt-portlet__head-label:before {
content: "";
position: absolute;
bottom: 0;
right: 0;
height: 30px;
width: 15%;
min-width: 50px;
padding-top: 100px;
padding-bottom: 15px;
background-image: linear-gradient(90deg, hsla(0, 0%, 100%, .3), #fff);
}
.kt-portlet__head-toolbar>div>div {
padding: 1rem 1.2rem;
background-color: #1075dd;
height: 80%;
border-radius: 8px;
}
.btn.btn-brand {
color: white;
text-decoration: none;
}
<div class="kt-portlet__head">
<div class="kt-portlet__head-label">
<h3>
This is a really long campaign name that should faaaaaaaade out when it reaches the Statistics button
</h3>
</div>
<div class="kt-portlet__head-toolbar">
<div>
<div>
<a href="#" class="btn btn-brand">
<span>This is a button - text fade out from there sefesfsfsffsfesfs sefesfsfsffsfesfs</span>
</a>
</div>
</div>
</div>
</div>

Answer 3

The :before element with the linear gradient including a transparency change is the right way to go. Here's an example for it:
.kt-portlet__head {
overflow-x: hidden;
position: relative;
}
.kt-portlet__head-label h3 {
white-space: nowrap;
}
.kt-portlet__head-toolbar {
position: absolute;
right: 0px;
text-align: center;
width: 100px;
top: 0px;
}
.kt-portlet__head-toolbar:before {
content: '';
display: block;
position: absolute;
left: -60px;
width: 60px;
height: 100%;
background: linear-gradient(to right, #ffffff00, #ffffffff 90%);
}
<div class="kt-portlet__head">
<div class="kt-portlet__head-label">
<h3>
This is a really long campaign name that should faaaaaaaade out when it reaches the Statistics button
</h3>
</div>
<div class="kt-portlet__head-toolbar">
<div>
<button>
<a href="#" class="btn btn-brand">
<span>This is a button</span>
</a>
</button>
</div>
</div>
</div>

Answer 4

And with something like that ?
.kt-portlet__head {
position: relative;
}
.kt-portlet__head-label {
white-space: nowrap; /* force to keep it in one line */
overflow: hidden; /* do not go outside the container */
}
.kt-portlet__head-toolbar {
display: flex;
position: absolute; /* force the button to be at the complete right */
top: 0;
right: 0;
bottom: 0; /* top & bottom ensure the button take the available height */
align-items: center;
align-content: flex-end;
}
.kt-portlet__head-toolbar::before {
display: block;
content: '';
width: 3em; /* Needed, give a size to the fade effect */
height: 100%; /* Needed to force the gradient to take the whole height */
background-image: linear-gradient(to left, white 0%, transparent 100%);
}
.btn { /* presentation style */
background-color: black;
border-radius: 3px;
padding: 1ch;
color: white;
text-decoration: none;
}
<div class="kt-portlet__head">
<div class="kt-portlet__head-label">
<h3>
This is a really long campaign name that should faaaaaaaade out when it reaches the Statistics button
</h3>
</div>
<div class="kt-portlet__head-toolbar">
<div>
<div>
<a href="#" class="btn btn-brand">
<span>This is a button - text fade out from there</span>
</a>
</div>
</div>
</div>
</div>

Answer 5

You could use box-shadow like this:
.btn { /* presentation style */
box-shadow: -30px 0px 15px 0px white;
}
See fiddle (the red version shows the shape, extent and opacity of the white overlay):