Chrome: the desired effect
Firefox: what is happening
Code:
background-color: Red;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
Thoughts??
Even though -moz-background-clip is supported in firefox. The 'text' value is not supported. You are going to have to go with another solution for non webkit browsers.
Example:
http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html
Related
I am in the middle of designing an HTML email, with the goal of it being fully compatible across email clients and light/dark mode.
I have made a lot of progress with this design system but I am running into issues where Gmail is handling code differently depending on how one accesses this.
This is what is rendered through Gmail iOS in dark mode, as it should look.
example-1
This is what is rendered through Gmail through a desktop web-browser:
example-2
The problem:
It seems that the background-clip: text; is only supported with the iOS app where the web app isn't.
The color is generated as a background color where the text should then clip the background to present the color as the color of the text. This is necessary to retain readability in dark mode, otherwise the type blends far too much with the background which is our brand color.
This method is only necessary for Gmail as other email clients do not seem to have any problem with these.
The CSS for text targets Gmail specifically and looks something like this:
u + .body .gmail-text {
background-color: #E8DDD9;
background-image: linear-gradient(90deg, #E8DDD9, #E8DDD9);
background-size: 100%;
background-repeat: repeat;
color: transparent!important;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
}
So my questions;
Has anyone figured out a solution to truly defining text color in gmail's dark-mode?
Is there a way to develop this so that the working solution can be applied to ONLY Gmail iOS, where if the client is a browser accessing Gmail a separate set of attributes can be applied?
Thanks so much for your help!
According to "How to Target Email Clients", the following CSS targets Gmail iOS (10+) specifically:
#supports (-webkit-overflow-scrolling:touch) and (color:#ffff) { .foo }
Since it already targets only Gmail iOS, you could rewrite your code as:
#supports (-webkit-overflow-scrolling:touch) and (color:#ffff) {
.gmail-text {
background-color: #E8DDD9;
background-image: linear-gradient(90deg, #E8DDD9, #E8DDD9);
background-size: 100%;
background-repeat: repeat;
color: transparent!important;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
}
}
HTML CODE
<div class="pageHeader">
<span class="coolStyleUnderline">Change Password</span>
</div>
CSS CODE
.pageHeader {
text-align: center;
color: #750000;
font-family: "MedievalSharp";
font-weight: bold;
font-size: 60px;
}
.coolStyleUnderline {
background: -webkit-linear-gradient(black, #750000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
border-image: linear-gradient(to right, black, #750000);
border-image: -webkit-linear-gradient(right, #750000, black);
border-image-slice: 1;
display: inline-block;
line-height: .9;
border-bottom: 6px solid #750000;
}
Things I have tried
Setting the padding to 0
Setting appearance (including webkit, etc.) to "none"
Setting the line-height to 1
Setting the border to none BEFORE the border-bottom attribute
Devices With Issue
iPad Pro 12.9in (Safari and Chrome)
iPhone X (Safari and Chrome)
iPhone 6s (Safari and Chrome)
I have attached two photos. The first one is what the border is supposed to look like (taken on Windows Chrome) and the second one is what I am getting on my apple devices. Any help is much appreciated. Thank you!
No Issue Photo
Issue Photo
I figured it out boys. All I had to do was specify the border image width. This was done by adding the following to .coolStyleUnderline :
border-image-width: 0px 0px 6px 0px;
Thank you to everyone that tried! Have a great day!
I want to make a gradient text-shadow (like this)
Is it possible to do that with CSS or/and Javascript?
Thanks for help.
You can try it with a linear gradient, like in the example snippet below. Please note, that this does not work in Internet Explorer and Edge. I tested it successfully in Chrome, Firefox and Opera, and have no option to test it with Safari.
div {
font-size: 128px;
background: linear-gradient(90deg, #ff0000 5%, #00B053 15%, #1BAADA 30%);
-webkit-background-clip: text;
-webkit-text-stroke: 12px transparent;
color: #000;
}
<div>
Text
</div>
I create this text effect:
.inset-text
{
background-color: #666666;
-moz-background-clip: text;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: rgba(255,255,255,0.5) 0 3px 3px;
}
<p class="inset-text">Some Text</p>
Unfortunately If you try to run this example using Firefox you see a gray rectangle instead in Chrome everything works well.How can I resolve this issue?
Are you sure that background-clip can take the value text? In either w3schools or the Mozilla Developer Network I don't see this listed. By the way, Firefox now accepts just background-clip too.
background-clip: text;
Is only supported in webkit-based browsers right now (Chrome and Safari). It's non-standard so it's hard to say if the text attribute will ever become supported in the other browsers (Firefox, Opera, and Internet Explorer). What effect are you trying to accomplish? I can probably give you a good alternative without using it.
I am beginner coder in web design so I have a fairly amateur question to ask. I have created a box of text but I don't know how to make the edges round rather than rectangular. I know that CSS functions on rectangular borders. If possible, I would also like to add a slight shadow beneath the box, I'm not sure how to implement this also. Here is my code specifically for the box section:
#wrapper{
border: solid 1px #eeeeee;
}
"#wrapper" refers to a piece of php code in another document. Thank you.
Using border-radius and box-shadow.
#wrapper {
border: solid 1px #eee;
border-radius:10px; /* round corners */
box-shadow:0px 3px 5px 5px #000; /* add shadow */
}
Here are the parameters for each...
border-radius:(radius of border corners)
box-shadow:(horizontal offset) (vertical offset) (blur) (spread) (color)
You may wish to prefix your CSS3 properties with -webkit and -moz to increase compatibility with older browsers.
#wrapper {
-webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
-moz-border-radius: 12px; /* FF1-3.6 */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
check this out!
For browsers which do not support border-radius, you can use roundies.js.