CSS MessageBox

[Jeff_Hager]

Great…now you got me playing with it…

[alfonso_ayala]

Could you share (semi-transparent)It looks incredible

[Jeff_Hager]

This is what I’m using at the moment with a few minor tweaks from @Robert_Petitto’s version and @Manu.n’s original version above:

This is the key part for the transparent and blur.

background-color: rgb(150 150 150 / 20%); 
backdrop-filter: blur(8px);

Full CSS:

<div style =" position: fixed;
top: 300px; 
width: 94%;
left: 5.5%;
max-width:680px;
opacity: 1;
margin-left: -10px;
height:180px;
background-color: rgb(150 150 150 / 20%); 
backdrop-filter: blur(8px);
border-radius: 10px;
padding-top: 1%;
padding-left: 7%;
padding-right: 7%;
box-shadow: rgb(0 0 0 / 100%) 0px 4px 10px;
text-align: center;
z-index:0 !important;"
>

<br>
<h3><font color=#000>Is everything correct?</h3>
<h1>{amount}</h1>

<a style="position: absolute; 
width:110%; 
top: -300px; 
right: 0%; 
left:-5%;
z-index:-1; 
opacity: 0;">
<div style="background-color:#aaaaaa; margin: 0%; padding:100%;z-index:-2;">



<pre><span><style>


[data-test="app-button-view"]  { 
position: fixed;
top: 420px; 
margin-left:7%;
width:30%;
}

.fab-target >* {
display:none;
}

</style></span></pre>

[alfonso_ayala]

thanks men looks fantastic

[Manu.n]

Hello @Robert_Petitto, @Jeff_Hager
Thanks for your sharing.
I tested your CSS and noticed a small error in the tablet preview.

Unfortunately, you should not use the “left” setting for the box.
So I made a small correction of the left-margin: -5px to align with the other objects.

I also add a max-width: 180px for the buttons, like this they appear to center.

Here is the result with the corrections

the corrected CSS of @Robert_Petitto

<div style =" position: fixed;
top: 300px; 
width: 94%;
max-width:680px;
opacity: 1;
margin-left: -5px;
height:180px;
background: linear-gradient(18deg, rgba(4,59,18,1) 0%, rgb(76,176,79) 35%, rgba(0,212,255,1) 100%);
border-radius: 10px;
padding-top: 1%;
padding-left: 7%;
padding-right: 7%;
box-shadow: rgb(0 0 0 / 15%) 0px 4px 10px;
text-align: center;
z-index:0 !important;"
>
<br>
<h3><font color=#fff>It's a new day!</h3>
<div style="white-space: break-spaces;"><font color=#fff>Claim your dailly unicoin!
<bg>
<a style="position: fixed; 
width:100%; 
top: 0%; 
right: 0%; 
left:0%;
z-index:-1; 
opacity: .4;">
<div style="background-color:#131313; margin: 0%; padding:100%;z-index:-2;">



<pre><span><style>

   [data-test="app-button-view"]  { 
position: fixed;
top: 420px; 
margin-left:0px;
left:50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width:38%;
max-width:180px;
}

.fab-target >* {
display:none;
}

</style></span></pre>

the corrected CSS of @Jeff_Hager

<div style =" position: fixed;
top: 300px; 
width: 94%;
max-width:680px;
opacity: 1;
margin-left: -5px;
height:180px;
background-color: rgb(150 150 150 / 20%); 
backdrop-filter: blur(8px);
border-radius: 10px;
padding-top: 1%;
padding-left: 7%;
padding-right: 7%;
box-shadow: rgb(0 0 0 / 100%) 0px 4px 10px;
text-align: center;
z-index:0 !important;"
>

<br>
<h3><font color=#000>Is everything correct</h3>
<h1>{amount}</h1>

<a style="position: absolute; 
width:110%; 
top: -300px; 
right: 0%; 
left:-5%;
z-index:-1; 
opacity: 0;">
<div style="background-color:#aaaaaa; margin: 0%; padding:100%;z-index:-2;">



<pre><span><style>


[data-test="app-button-view"]  { 
position: fixed;
top: 420px; 
margin-left:7%;
width:30%;
max-width:180px;
}

.fab-target >* {
display:none;
}

</style></span></pre>

[ThinhDinh]

Thanks all of you for taking time to do this.

[Jeff_Hager]

Awesome! Thank you for the correction!

[Robert_Petitto]

Thank you! My button still isn’t spaced correctly on the phone layout though.

[Manu.n]

Oh darn.
It’s on an iphone with a piece of apple on it ?

[Robert_Petitto]

This seems to work:

 [data-test="app-button-view"]  { 
position: fixed;
top: 420px; 
margin-left: 0px;
left:50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width:40%;
max-width:180px;
}

[Robert_Petitto]

[Manu.n]

Ah cool,
Congratulations

Curious I had not seen it because I had an update bug.

[Robert_Petitto]

Any chance we can make everything BUT the CSS box blurred?

[Lucas_Pires]

Updating the code after each reply was like

[Manu.n]

Uh, am I having a little trouble following you?
Sorry but my English is not very good!

[ThinhDinh]

I think Bob meant blurring anything else on the screen to make the message box more visible.

[Manu.n]

ahh ok, I’m going to do some tests

[Manu.n]

1st Test,
Well, it’s not terrible, there is still work to be done.

The problem is that the box is also slightly fuzzy.

[Manu.n]

@Robert_Petitto
Is that what you wanted?

[Manu.n]

the CSS, C’est grâce à @Jeff_Hager pour l’effet Blur.
Please tell me if it’s ok, because now i see everything blurry

<!-- Blurry -->
<a style="top:180px;">
<div style="
position:fixed;
top:0px;
left:-5%;
margin: 0%; 
padding:100%;
background-color: rgb(150 150 150 / 20%); 
backdrop-filter: blur(4px);
opacity:0.8;"></style></div>

<!-- Box -->
<div style =" position: fixed;
top: 300px; 
width: 94%;
max-width:680px;
opacity: 1;
margin-left: -5px;
height:180px;
background: linear-gradient(18deg, rgba(4,59,18,1) 0%, rgb(76,176,79) 35%, rgba(0,212,255,1) 100%);
border-radius: 10px;
padding-top: 1%;
padding-left: 7%;
padding-right: 7%;
box-shadow: rgb(0 0 0 / 15%) 0px 4px 10px;
text-align: center;
z-index:0 !important;"
>

<!-- Text-->
<br>
<h3><font color=#000>Titre</h3>
<h1>Description</h1>


<pre><span><style>

/* Button */
[data-test="app-button-view"]  { 
position: fixed;
top: 420px; 
margin-left:0px;
left:50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width:38%;
max-width:180px;
}

.fab-target >* {
display:none;
}
</style></span></pre>