I just realized, that in Chrome 69 the behavior for -webkit-background-clip: text; changed. It now has the same bug as Edge. When the content is wrapped in paragraphs, the text is invisible.
What I want to achieve is that I have a gradient in the background and transparent text color, so that the color of the gradient comes through. This works in Firefox and used to work in Chrome, but now, in version 69, it no longer works.
Here is a codepen to try it out: https://codepen.io/obs/pen/eLPeYz
When you delete the p tags, it works as supposed to.
Is this a bug in Chrome? How can I get around this?
Yes, this seems to be a bug in Chrome. Others have reported it also: Chrome 69 when using 'transform', '-webkit-background-clip: text' and 'color:transparent' don't work
Also, good practice is to put -webkit-background-clip: text; on an element that has text in it, not on it's parent.
I learned that the bug does not happen when you have nested inline elements. So adjusting obs codepen to use span tags instead of p tags the clipping works.
background: linear-gradient(#131c27, #663b34);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
This works in chrome. just set your gradient and then use the rest of the code in css.
I came here looking to see if anyone else was experiencing trouble webkit-background-clip: text;. I noticed the code for making text gradients worked on text inside buttons but when I applied the same code to h1 text it did not work. After some experimentation I discovered that adding width before the background linear gradient solved the issue for me.
I know these answers are a couple of years old, but should someone like me looks here again, the following worked for me:
<style>
h1 { text-align:center; font-family: 'Italiana', serif;
font-size: 2em; width:50%; background: linear-gradient(
to right, rgba(206, 189, 167, .55), rgba(247, 241, 226,
1), rgba(206, 189, 167, .55));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text; padding: 1em 0 1em 0; }
</style>
View my gradient text at: https://palmbeachcuisine.com/#BreakfastandBrunch
Related
On my homepage (https://howtogetrippedathome.com/), I want to give all the (now) red elements a gradient color.
I managed to give the menu items, the service titles and service icons gradient colors using the following CSS:
.service-icon.wow.zoomInDown {
background: linear-gradient(to bottom right, #ff2828 , #F27B26) !important;
}
.service-title {
background: -webkit-linear-gradient(bottom left, #ff2828 , #F27B26);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
However, I was not able to make the text-decoration (double underscore) of the widget titles, the read my story/see all blogs buttons and the social icons (Facebook and Instagram) this gradient. Using 'linear-gradient' after 'color:' does not work unfortunately.
Is this doable, or am I asking for something impossible? I'm curious what you guys have to say.
Best,
Maarten
The closest I got to it for the double underline was this (see https://howtogetrippedathome.com/):
.widget-title:after {
background-image: -webkit-linear-gradient(left, #ff2828 , #F27B26);;
padding: 1px;
border-bottom: 6px double #fff !important;
}
However, this has the effect that there still is a white double border visible in the about section. Setting the color of the border to transparent results in both the border and the padding having the gradient color, so they form one rectangular shape.
Another way it could be done is using:
-webkit-border-image: -webkit-gradient(...)
But I can't make it work.
Any ideas?
For gradient text you can do something like this:
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
Source: https://css-tricks.com/snippets/css/gradient-text/
For the double underline the best option you have is to use <hr> and set a gradient background.
There is a text-decoration-color style, but it doesn't accept gradients.
I want a word in my div to be split in 2 colors vertically using pure CSS, any idea how I can do that?
You can certainly use CSS3 gradient and clip properties .. I am aware of webkits which I used for, but not sure about other browsers, if you want you can try this
Demo (Please view it on chrome)
div {
font: 40px Arial;
background: -webkit-linear-gradient(top, #0d2172 0%,#0d2172 50%,#ff2828 50%,#ff0000 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Note: As a web developer am not using any latest browsers, if you know
any proprietary property which works the same please feel free to edit
my answer
CSS
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
HTML
<h1>Hello World</h1>
I see the 'Hello World' text with the gradient in chrome browser. Even though I add other prefixers such as -moz,-mo I don't see it in firefox or opera or IE. What could be the issue?
Try this
background: $gradient;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
Working on all browsers for me :)
Unfortunately, I think only WebKit-based browsers implement the text-fill-color property. As far as I'm aware, there is no workaround for Mozilla yet.
You need to add the same for -moz and -o(simone comment)
here you can find an example for linear-gradients.
http://www.the-art-of-web.com/css/linear-gradients/#.UNQ9Ztd2EuM
EDIT
unfortunatly the previous poster is right
-moz-background-clip:text does not work in Firefox
check this. It is an awesome site for the gradient. You can make any gradient for any browser at a same time and it also supports old version of ie.
I've seen it done in SVGs: the text fill is an image rather than a color; and I've been wondering if such a thing would be possible using CSS3.
I've looked around the web, and have so far only found workarounds that are basically overlaying an image over text (see this, which isn't a viable option for me). Apart from actually having a background image for text, is it possible to have a background gradient?
CSS3 adds the background-clip property. You can actually do this using -webkit-background-clip: text but the text value is proprietary and currently only implemented in Webkit based browsers (Safari and Chrome).
h1 {
font-size: 3em;
background: url('someimage.png');
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
A few articles that use -webkit-background-clip: text;:
Gradient Text
Animated background clip text
Fun with -webkit-background-clip and #font-face
If I understand what you're saying, no. You can only set text to a solid color, even with the magical wonders of CSS3.
I'm using following jQuery function to change the opacity of text (it's color: #999999)
$('.small_buttons').css('opacity', 0.3);
The effect looks good in Chrome or even Internet Explorer 8, but in current version of Firefox (3.6.10) this text gets really strange greenish colour, instead of nice pale gray.
Screenshots:
Chrome:
Firefox:
Help appreciated!
Update:
example: http://jsfiddle.net/YnDFr/1/
It appears it's because the element has no background, or specified as transparent. Try to add it the same background as its container.
fyi: I had the same issue with FF 3.6, found the following solution, which actually works on a variety of browsers excl. IE < 9.0;
just use the following syntax: color: rgba(r,g,b,opacity);
i.e: color: rgba( 153, 153, 153, .5) ;
this results in color: #999999; and opacity: .5;
no need to apply background-color if you're text is on a transparent DIV. Most modern browsers, even IE 9.0 have support for the RGBA() color definition