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
Related
I'm working on a website that includes a lot of anchor links, some of which are a different colour to the text itself. This hasn't been a problem for 90% of development and I went forward with standard text decoration for regular links and background-image with a linear-gradient for the coloured links so I could animate them into highlighting
I noticed that those coloured links weren't working at all on mobile though. Sure, no problem, I'll try another method. I tried a lot of methods.
The first was switching everything up to border-outline and this is when I realised that I liked the thicker line on the regular links. Unfortunately this didn't work because the links are inline in paragraphs and changing the line-height (I used that to change how far the underline is beneath the text) broke the paragraphs.
What I'm currently trying is bringing in a 1x2 pixel image and using that as the background image with repeat-x and it looks great! On desktop. Neither Chrome nor Firefox for mobile (the ones I've tried) even show the underline.
I've put in all of the media queries already and adjusted this stuff for each size screen, but still no luck
TL;DR - I'm using a background image to underline text and it's great on desktop but doesn't show at all on mobile. Any advice or tips on an underlining method that will for sure work?
Here's the underlining code I'm using:
a {
color: var(--font-color-main);
text-decoration: none;
background-image: url('../assets/blackunderline2.png');
background-position: 0 22px;
background-repeat: repeat-x;
}
And here's what I'm using on the coloured highlights (also doesn't work on mobile, and I am happy to switch this to the pixel approach if that works!)
/* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
/* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
/* Firefox 3.6 - 15 */
/* Opera 11.1 - 12 */
/* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(80%, orange), color-stop(90%, transparent));
background-image: linear-gradient(orange 80%, transparent 90%);
background-image: linear-gradient(orange 80%, transparent 90%);
background-position: 0 1.04em;
background-repeat: repeat-x;
background-size: 7px 8px;
So I hooked my phone up to the dev tools on my development PC and found out that (for reasons I'm unsure of right now) the line height was changing on mobile only despite the desktop media queries being fine.
This meant that the underlining I was doing with the background image was too low to be visible so I shifted it up and now we're golden!
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.
I am getting nasty artifacts in mobile safari on both my iPhone 4S and a gen-2 iPad when trying to use -webkit css styles to get gradient text.
This is the relevant CSS, applied to a text element:
background-image: -webkit-linear-gradient(#eee 0%, #4a80e5 100%);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#4a80e5));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
It looks good in Chrome and Safari and fails gracefully in Firefox. It looks bad in mobile Safari. You can see a live example at http://www.synchronautapp.com
On mobile safari, there are 1px borders around the styled elements. These borders come and go depending on how zoomed in the user is. Example here: http://synchronautapp.com/mkramer/IMG_0088.PNG
Googling didn't yield many similar issues. What causes this issue, and is there a workaround that keeps gradient text? Is there a pure CSS fallback plan for mobile webkit?
Try:
image-rendering: -webkit-optimize-contrast;
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
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.