1

If I have : <p>A</p>

Is there any way in html or css or Javascript which I am able to paint half of "A" white and the other black or any other color.

Thanks

Roger Coll
  • 51
  • 1
  • 8
  • 3
    https://www.w3schools.com/css/css3_gradients.asp – Robbie Milejczak Nov 08 '17 at 16:49
  • Need some sample design – tamilselvancst Nov 08 '17 at 16:50
  • 1
    @Robbie That is for `background` not `color` which is what is used for font color. – zgood Nov 08 '17 at 16:51
  • 2
    @RobbieMilejczak How is a background gradient relevant to the OPs issue? Also, please don't use W3Schools as a reference. Their articles are often outdated and sometimes just plain wrong. MDN is far more comprehensive and accurate: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient – Rory McCrossan Nov 08 '17 at 16:51
  • @j08691 yea, I was totally baffled as to how that got upvotes – Maharkus Nov 08 '17 at 16:54
  • Try SVG this is the best solution to solve it. – H. Pauwelyn Nov 08 '17 at 16:54
  • https://jsfiddle.net/robbiemilejczak/xwh9ey4y/ it is – Robbie Milejczak Nov 08 '17 at 16:55
  • The answer is pretty much explained in [Is it possible to apply CSS to half of a character?](https://stackoverflow.com/questions/23569441/is-it-possible-to-apply-css-to-half-of-a-character?rq=1). Basically it's possible but pretty hard. – Imme Nov 08 '17 at 16:55
  • @RobbieMilejczak while your solution works, you didn't address the most important point which is the background-clip. Don't just post links and assume everything is understood. – Maharkus Nov 08 '17 at 16:57

1 Answers1

2

You can try it with gradients as Robbie suggested. There is only one down side of this. You won't be able to use text-shadow property (except with another hack - make duplicate of text and give it the shadow property)

Edited on request... 

p {
  font-size: 12px;
  background: -webkit-linear-gradient(#000, #DDD);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Source code can be found here https://css-tricks.com/snippets/css/gradient-text/

Smuk3c
  • 132
  • 7