Двухцветная раскраска шрифтов в CSS?

Мне очень нравится внешний вид двухцветных кнопок и шрифтов. Я думаю, когда верхняя половина шрифта является одним цветом, а нижняя половина - вариацией одного цвета. Например, посмотрите большинство кнопок на iPhone или логотип здесь http://ming.ly.

mingly

Можно ли воссоздать этот эффект в CSS? Альтернативно есть ли бесплатный инструмент, который я могу использовать для создания шрифтов, которые выглядят так?

ОТВЕТЫ

Ответ 1

Мне удалось добиться этого с помощью CSS...

Пример

Example

CSS

div {
    position: relative;  
    color: #0f0;
    font-size: 28px;
}

div span {
    height: 50%;
    position: absolute;
    color: #f00;
    overflow: hidden;  
}

HTML

<div>
    <span>Hello</span>
    Hello
</div>

jsFiddle.

Протестировано в Firefox 5.

Имейте в виду, что не очень семантично повторять текст, который будет отображаться один раз.

В зависимости от браузеров, которые вам нужно поддерживать, вы можете вырезать этот внутренний span для чего-то подобного в CSS...

div:before {
    content: "Hello";
    height: 50%;
    position: absolute;
    color: #f00;
    overflow: hidden;   
}

jsFiddle.

Насколько я знаю, для content нет значения, которое будет автоматически использовать этот текст элемента node. Вы можете поместить его в атрибут title и использовать attr(title) (или любой другой атрибут).

Вы также можете использовать JavaScript для повторения.

var textRepeat = document.createElement('span'),
    textRepeatTextNode = document.createTextNode(element.firstChild.data);

element.appendChild(textRepeat.appendChild(textRepeatNode));

Если первый ребенок не обязательно был текстовым node, вы могли бы использовать element.textContent || element.innerText.

Ответ 2

Мне очень нравится метод @alex. Альтернативное решение, поддерживающее белую кривую, но не перекрестный браузер, я предполагаю * на данный момент, может быть следующим:

CSS

#text {
    color: #5283CA;
    font-size: 70px;
    height: 100px;
    overflow: hidden;
    width: 210px;
}
#curve {
    -moz-transform: rotate(60deg);
    -webkit-transform:rotate(60deg);
    -o-transform:rotate(60deg);
    -ms-transform:rotate(60deg);
    background: none repeat scroll 0 0 white;
    border-radius: 200px 20px 80px 20px;
    bottom: 270px;
    display: block;
    height: 1000px;
    opacity: 0.5;
    filter: alpha(opacity=50);
    position: relative;
    right: 330px;
    width: 200px;
}

HTML

<div id="text">Mingly<div id="curve"></div>

Демо: http://jsfiddle.net/ENPnU/

Я не знаю никакого свойства css, которое может сделать границу изогнутой. Поэтому я использовал закругленные углы, которые я могу создать с помощью css. Затем я поворачиваю элемент с закругленными углами (в данном случае #curve) в правильное положение, чтобы выглядеть как белая кривая внутри текста. Затем добавлена ​​белая непрозрачность.

* Я попробовал, чтобы он работал с ie, но я не нашел полного решения, вы можете найти результат здесь: http://jsfiddle.net/3TpeA/ p >