Возможно ли с помощью css+html сделать двух-цветные буквы шрифта?

#html #css #шрифты #color

Необходимо сделать на странице двух- (а, возможно, потом и трёх-) цветные буквы,
по такому принципу:



Букв будет много и разных цветов, не хочется использовать изображения.
Пожалуйста, подскажите, возможно ли это сделать средствами CSS и HTML (ну ещё может
JavaScript как-то помочь, если первых недостаточно)?
    

Ответы

Ответ 1

Еще как вариант 



h1 {
  font-size: 72px;
  width:  50px;
  color: blue;
  position: relative;
  display: inline-block;
  vertical-align: top;
}
h1:before,
h1:after{
    content: 'A';
    position: absolute; top: 0; left: 0;
    color: red;
    width: 50%;
    overflow: hidden;
}

.gradient-3:before,
.gradient-3:after{
    width: 33.333%;
}
.gradient-3:after{    
    left: 50%;
    color: green;       
    transform: translateX(-50%);
    text-align: center;        
    text-indent: -33.333%;
}
/* hack for ff */
@-moz-document url-prefix() { 
  .gradient-3:after {
     text-indent: -100%;
  }
}
A
A


Ответ 2

Так?



h1 {
  font-size: 72px;
  width:  50px;
  background: -webkit-linear-gradient(left, red 49%, blue 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
A




UPD: Добавил вертикальное деление. Не самое идеальное решение, может кто-то предложит
и получше.

UPD2: Оставлю и горизонтальный вариант, мало ли кому пригодится.



h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(red 49%, blue 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
A


 

UPD3: Код для 3 цветов



h1 {
  font-size: 72px;
  width:  50px;
  background: -webkit-linear-gradient(left, red 30%, green 30%, green 60%, blue 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
A


Ответ 3

Для кроссбразурной работы и без возни с абсолютно позиционированными элементами используйте SVG:








Тут в принципе несложно, просто игра с отступами градиентов.


Ответ 4

С псевдоэлементами, и дублированием текста в атрибут можно реализовать и не только
для отдельных букв.

Суть метода в том, чтобы клонировать текст в псевдоэлементы через content: attr(data-text),
сам текст сделать прозрачным и отобразить только текст из :before и :after. А дальше
остается только разнести их в разные части блока и выставить отрицательный z-index,
чтобы текст можно было нормально выделить.



p[data-text] {
  position: relative;
  font-size: 45px;
  color: transparent;
  font-weight: bold;
}

p[data-text]:before,
p[data-text]:after {
  position: absolute;
  content: attr(data-text);
  left: 0;
  bottom: 0;
  color: #000;
  height: 50%;
  overflow: hidden;
  z-index: -1;
}

p[data-text]:before {
  line-height: 0;
}

p[data-text]:after {
  top: 0;
  color: red;
}
Doublecolor text