Is it possible in css make a single character in 2 colors?
I mean for example character "B" The first upper half in RED and the second half in BLUE
2
-
1no, it is not possible, maybe you can try to superimpose two B letters and hide the top half for one, and the bottom half of the second one..Mazeltov– Mazeltov2014-03-05 10:55:18 +00:00Commented Mar 5, 2014 at 10:55
-
3take a look at stackoverflow.com/questions/6258690/…keuleJ– keuleJ2014-03-05 11:09:48 +00:00Commented Mar 5, 2014 at 11:09
Add a comment
|
2 Answers
h1 {
font-size: 72px;
background: -webkit-linear-gradient(red 49%, blue 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Fill in your own vendor prefixes.
6 Comments
Apoleo
I don't mean the background! I mean the text color!
slynagh
You didn't even try it did you?
Apoleo
I did: jsfiddle.net/LZXTS/1
slynagh
-webkit-background-clip: text; -webkit-text-fill-color: transparent;Apoleo
yeah with chrome works! with firefox is not
|
One solution would be:
HTML:
<span class="half" title="B">B</span>
(see that you have to set an attribute value)
CSS:
.half {
font-size: 90px;
font-weight: bold;
position: relative;
color: blue;
line-height: 1em;
}
.half:before {
position:absolute;
content:''attr(title)'';
color: red;
height: .5em;
overflow: hidden;
}
The problem is that every browser calculates the .5em value differently
