Is there a way to style only half of a character? For example, half of one color and half of another.
Is there a CSS or JavaScript solution for this, or would we have to resort to images?
(I know that the gradient exists, but we are not looking to degrade, but half red half green for example of the letter X to a considerable size).
I know you say you don't want a gradient but just two colors... the thing is you can use the CSS gradient "no gradient" just so there are two colors.
The gradient works automatically: you indicate a start color, optional intermediate colors and an end color, and the browser will take care of making the transition from one color to another. Now, if as intermediate colors you indicate that you want the initial and the final color, then the gradient effect disappears, leaving only the two desired colors.
The idea would be to put the first color at 0 and 0.5, and the final color at 0.5 and 1. That way there is no gradient, but you jump from one to the other directly:
This method is cleaner and allows more flexibility (you could have as many colors as you want without limiting the number of pseudo-elements), but has the drawback that its support may not be as good (it will probably crash in IE versions prior to 10, and you may need the browser prefixes for it to work in all).
And it could be simplified a bit more using
linear-gradient
instead ofgradient
, making it easier to read:::before
An easy option would be to make use of the or pseudo elements::after
for this.The idea would be to write the letter and using, for example
::before
, write the same letter on top with another color, positioning it exactly above the original letter (withposition: absolute
) and hiding the rest (withoveflow: hidden
). That way one part of the visible letter will be the pseudo-element and the other half the original element.For the letter to appear with the right half of one color and the left half of another (horizontal division of colors), the pseudo-element would need to occupy 50% of the width. If you want a vertical division of colors to appear, then it would be 50% of the height.
Here you can see it working:
* If the text is going to occupy a single row, then the example could be simplified with the vertical colors, applying the styles directly to the container without having so many labels.
From that, you can make more elaborate examples:
Do you want instead of 2 colors to be 3? They use
::before
and::after
and instead of 50%, make the pseudo-elements take up 66% and 33% respectively: