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

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

16 голосов
/ 27 июня 2011

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

mingly

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

Ответы [ 2 ]

25 голосов
/ 27 июня 2011

Мне удалось добиться этого с помощью 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 нет значения, которое будет автоматически использовать текстовый узел этого элемента. Вы можете поместить его в атрибут title и использовать attr(title) (или любой другой атрибут).

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

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

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

Если первый дочерний элемент не обязательно является текстовым узлом, вы можете использовать element.textContent || element.innerText.

11 голосов
/ 27 июня 2011

Мне очень нравится метод @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) в правильное положение, чтобы оно выглядело как белая кривая внутри текста. Затем добавлена ​​белая непрозрачность.

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

...