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.
Related
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
So i'm new to using css and im currently working on a forum thats using xenforo. However I thought it'd be neat to see this effect in place of the admins or moderators usernames.
If you guys could help me out or give me some info on how to go about it that'd be great!
Heres a Video of what I mean if you don't know:
https://www.youtube.com/watch?v=XdL9iDQs3t8
Also, I'm trying to do this all in css only for the "User Name CSS" field on xenforo. I'll keep tryig to figure it out but thanks if you can help!
The closest thing to the text in that video, would be to have a rainbow gradient across the entire phrase, not a different colour per letter.
I have created an example here:
.rainbow_text {
display: inline-block;
background: black;
background: linear-gradient(to right, red, orange , yellow, green, blue, indigo, violet);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.rainbow_text.animated {
animation: rainbow_animation 5s ease-in-out infinite;
background-size: 400%;
}
#keyframes rainbow_animation {
0%, 100% {
background-position: 0
}
50% {
background-position: 100%
}
}
<h1 class='rainbow_text'>Austen Holland</h1>
<br>
<h1 class='rainbow_text animated'>Austen Holland Animated</h1>
There are two pieces of CSS that make this possible. background-clip / -webkit-background-clip: and color.
When the background-clip property is set to text, the background is painted within (clipped to) the foreground text.
When the color property is set to transparent, the text is.. well.. transparent. That allows the gradient from the background to show through!
There a few catches here though, and that's browser support with background-clip: text;!
Internet explorer does not support it at all, and chrome, opera, safari, android all require the -webkit- vendor prefix. Browsers like edge and firefox support it without the prefix.
The issue I'm having is that I don't know what they mean by a style rule that sets a font color to white for older browsers and white with 50% opacity in newer browsers and removes the underlining from the link text.. I didn't realize there was the potential to differentiate in the first place.
Update: How would I go about making it so that every time a mouse hovers over a text link, that it would display an image in place of a bullet?
Use fallback styles. Write the universally understood property first, then the newer version of the property, which the modern browsers will use but the old browsers will simply ignore.
Example: set color to white for all browsers; then set color to white with 50% opacity for browsers that understand it.
.yourclasshere {
color: #FFFFFF; /* standard syntax understood by all browsers */
color: rgba(255,255,255,.5); /* new feature, ignored by old browsers */
}
Not sure how to handle the request to remove the underline in newer browsers. AFAIK all browsers always understood text-decoration. Maybe you could use parent > child for a selector.
In that specific case you could use a fallback like:
.selector {
color: #fff; /* white */
color: rgba(255, 255, 255, 0.5); /* 50% opacity white */
}
So, as CSS rules are interpreted from top to bottom, modern browsers will set the color to transparent white. Old browsers won't be able to apply that rule since they don't support RGBA colors, so #fff will prevail.
I have this: demo
background-image: url('http://colorisrelative.com/wp-content/uploads/2010/08/halation_2color_orangecyan.png');
background-position: 80% 0%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
I put a background-image under the icons and change the position on hover.
It works perfectly in Chrome, but not in Mozilla or IE (You need to watch the demo in chrome and Moz or IE).
So I need a fallback. I tried the solution of this article but I dont get it to work.
Is there a way to say, use it only in chrome and take a static text color with hover in every other browser?
I appreciate every solution
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