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.
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;
}
}
When i use the css color #b3b3b3 on a disabled input it turns white?? why this is happening and how can i workaround?
Look at this fiddle:
https://jsfiddle.net/esty6t20/
CSS:
.transp {
background-color: transparent;
}
.bug-color {
color: #b3b3b3;
}
.red-color {
color: red;
}
HTML:
Disabled Bugged Gray
<input class="transp bug-color" value="test text" disabled>
<br/>
Disabled Red color
<input class="transp red-color" value="test text" disabled>
<br/>
Enabled Bugged Gray
<input class="transp bug-color" value="test text">
I already tried to force override the !important but with no success.
Check the result:
It's because of a weird bug. Input placeholder text has always been a bit of an issue because nothing seems to be a standard yet in which all browsers have successfully implemented just yet. So it's a pain to have it consistent across all browsers easily.
However, add the -webkit-text-fill-color property to your CSS and it'll work. It seems to be fine in Chrome so adding this will get it working nicely in Safari as well.
Your CSS would be...
.bug-color {
color: #b3b3b3;
-webkit-text-fill-color: #b3b3b3;
}
MDN documentation about this property and CanIUse support table.
The problem is not with #b3b3b3 per se. If you set color: #a8a8a8, you will find that the text actually renders as #fdfdfd, which implies that Safari has an incorrect calculation on its color blending somewhere. Since #b3b3b3 is even lighter, the blend error causes it to display as pure white.
Safari evaluates the transparent color as rgba(0,0,0,0). If you instead set background-color: rgba(255,255,255,0), everything will display correctly cross-browser, with no need for -webkit properties.
If you also need to support IE11, make sure to include a fallback, i.e.:
background-color: transparent;
background-color: rgba(255,255,255,0);
You should use the disabled selector, something like this:
input.bug-color:disabled {color:#0000ff;}
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
Here's my code - This works in chrome, firefox and safari .. I have tested it on Windows 7
However in IE 8 and Opera browser the following code is not working and instead of showing a circled image I am getting Image in square form
<div id="hotspot-img1-0">
<ul>
<img class="proimg" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/276311_100002617687873_1118195351_n.jpg" title="web" style="width:100px;height:100px;background:#fff;border:2px solid #ccc;-moz-border-radius:52px;-webkit-border-radius:52px;">
</ul>
</div>
CSS
#hotspot-img1-0{
top: 570px;
left: 67px;
height: 104px;
width: 104px;
border-top-left-radius: 52px;
border-top-right-radius: 52px;
border-bottom-right-radius: 52px;
border-bottom-left-radius: 52px;
box-shadow: 0px 2px 5px 0px;
border-top-color: rgb(255, 255, 255);
border-left-color: rgb(255, 255, 255);
border-right-color: rgb(255, 255, 255);
border-bottom-color: rgb(255, 255, 255);
border-top-width: 2px;
border-left-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid
}
#Sandhurst; first thing bad markup write like this:
<div>
<ul>
<li>
<img class="proimg" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/276311_100002617687873_1118195351_n.jpg" title="web">
</li>
</ul>
</div>
& Answer for the question use background-image instead of img :
li{
background:url(image.jpg) no-repeat;
-moz-border-radius:52px;
-webkit-border-radius:52px;
border-radius:52px;
width:200px;
height:200px;
}
The border-radius CSS3 declaration is unsupported in Internet Explorer 8 and below. You can use the -o-border-radius declaration to get rounded borders in Opera.
CSS3 Pie may help with getting rounded borders in older versions of Internet Explorer, but I'd recommend just leaving them as square images (following the principles of graceful degradation and progressive enhancement).
It's a CSS3 issue. IE and Opera don't handle it well. You can use a solution like http://fetchak.com/ie-css3/ to resolve it if you would like.
Good luck!
At present Opera (version 10.5 onward), Safari (version 5 onward) and Chrome (version 5 onward) all support the individual border-*-radius properties and the border-radius shorthand property as natively defined in the current W3C Specification (although there are still outstanding bugs on issues such as border style transitions, using percentages for lengths, etc.).
Mozilla Firefox (version 1.0 onward) supports border-radius with the -moz- prefix, although there are some discrepancies between the Mozilla implementation and the current W3C specification (see below).
Update:Recent Firefox nightly versions support border-radius without the -moz- prefix.
Safari and Chrome (and other webkit based browsers) have supported border-radius with the -webkit- prefix since version 3 (no longer needed from version 5 onward), although again with some discrepancies from the current specification (see this article for further details of how older versions of Webkit handle border-radius).
Even Microsoft have promised, and demonstrated in their recent preview release, support for border-radius from Internet Explorer 9 onward (without prefix).
http://www.css3.info/preview/rounded-border/
Here is a website http://www.danielmall.com/ where the images are being displayed in circle. The author of the website has used jquery and css to get it working with both IE and firefox. Check out the page source and you will get some interesting info on how to use it.
Image maps could do it for you.
Clicking content below image with higher z-index
http://jsfiddle.net/u9cYZ/
http://jsfiddle.net/u9cYZ/3/
To my knowledge, there is no way to get Opera or IE to clip an <img> to a circle using CSS. border-radius will clip background images set in element styles though.
You might be able to clip things using SVG, but I wasn't able to get any of the examples on that page to work in Opera.
as you see there are two pictures.First, on chrome . There are Beğen and Yorumlar buttons on right side.Border is looking very well..
But second pictures shows that ; firefox and opera have problem with border radius.I try to do border-witdh:thin, border:1px solid etc.. But Its look like same.
How can handdle it ? Do you have any idea ?
sorry for my english.Thank you
image on chrome
image on ff and opera
This effect is commonly referred to as "background bleed", or "leaking". It can be fixed through some simple CSS:
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
I first learned of this from Mike Harding's blog:
http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
And here's the W3C spec:
http://www.w3.org/TR/css3-background/#the-background-clip
... it almost looks like may get away without using border at all. There's enough contrast between the button and the background. Did you try using outer glow of 1px (blur-radius)?
-moz-box-shadow: [position-x] [position-y] [blur-radius] [color];
-webkit-box-shadow: [position-x] [position-y] [blur-radius] [color];
box-shadow: [position-x] [position-y] [blur-radius] [color];
To help with chome's border to border:1px double .... I know chrome has an issue with borders with a radius. Setting it to double rather than solid helps clean it up a bit. Kind of annoying.