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..– MazeltovCommented Mar 5, 2014 at 10:55
-
3take a look at stackoverflow.com/questions/6258690/…– keuleJCommented 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.
-
-
-
-
-webkit-background-clip: text; -webkit-text-fill-color: transparent;– slynaghCommented Mar 5, 2014 at 11:42 -
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
