Можно ли применить CSS к половине символа?


2819

Что я ищу:

Способ стилизовать одну половину персонажа. (В этом случае половина буквы будет прозрачной)

Что я сейчас искал и пробовал (Без удачи):

  • Методы оформления половины символа / буквы
  • Стилизация части персонажа с помощью CSS или JavaScript
  • Применить CSS к 50% персонажа

Ниже приведен пример того, что я пытаюсь получить.

Икс

Существует ли для этого решение CSS или JavaScript, или мне придется прибегнуть к изображениям? Я предпочел бы не идти по пути изображения, поскольку этот текст будет генерироваться динамически.


ОБНОВИТЬ:

Поскольку многие спрашивают, почему я бы хотел придать стиль половине персонажа, вот почему. Мой город недавно потратил 250 000 долларов, чтобы определить для себя новый «бренд». Этот логотип - то, что они придумали. Многие люди жаловались на простоту и нехватку творчества и продолжают это делать. Моей целью было придумать этот сайт как шутку. Введите «Галифакс», и вы поймете, что я имею в виду.


1
Комментарии не для расширенного обсуждения; этот разговор был перенесен в чат .
Иветт

6
Они спрашивали «почему», потому что они хотели знать, почему вы будете использовать CSS, а не использовать SVG или графический редактор. Ничего общего с деловыми решениями об их логотипе. По вашей ссылке на их логотип, почему вы просто не обрезали X?
user9993

1
Я не могу пожаловаться на этот логотип. Намного лучше, чем этот кровавый маяк.
Parapluie

@Parapluie Я бы согласился!
Мэтью Маклин

Ответы:


2941

Теперь на GitHub в качестве плагина!

введите описание изображения здесь Не стесняйтесь раскошелиться и улучшить.

Демо | Скачать Zip | Half-Style.com (Перенаправляет на GitHub)


  • Чистый CSS для одного персонажа
  • JavaScript используется для автоматизации текста или нескольких символов
  • Сохраняет текстовую доступность для программ чтения с экрана для слепых или слабовидящих

Часть 1: Основное решение

Половина стиля по тексту

Демо: http://jsfiddle.net/arbel/pd9yB/1694/


Это работает с любым динамическим текстом или одним символом и все автоматизировано. Все, что вам нужно сделать, это добавить класс к целевому тексту, а об остальном позаботятся.

Кроме того, доступность исходного текста сохраняется для программ чтения с экрана для слепых или слабовидящих.

Объяснение для одного персонажа:

Чистый CSS. Все, что вам нужно сделать, это применить .halfStyleкласс к каждому элементу, который содержит символ, который вы хотите использовать в половинном стиле.

Для каждого элемента span, содержащего символ, вы можете создать атрибут данных, например здесь data-content="X", и при использовании псевдоэлемента, content: attr(data-content);чтобы .halfStyle:beforeкласс был динамическим, и вам не нужно было жестко кодировать его для каждого экземпляра.

Пояснения к любому тексту:

Просто добавьте textToHalfStyleкласс к элементу, содержащему текст.


// jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
    $el = $(el);
    text = $el.text();
    chars = text.split('');

    // Set the screen-reader text
    $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

    // Reset output for appending
    output = '';

    // Iterate over all chars in the text
    for (i = 0; i < chars.length; i++) {
        // Create a styled element for each character and append to container
        output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    }

    // Write to DOM only once
    $el.append(output);
  });
});
.halfStyle {
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: black; /* or transparent, any color */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}

.halfStyle:before {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

( JSFiddle demo )


Часть 2. Расширенное решение - Независимые левая и правая части

Половина стиля на тексте - продвинутый - с текстовой тенью

С помощью этого решения вы можете стилизовать левую и правую части, индивидуально и независимо .

Все то же самое, только более продвинутый CSS делает волшебство.

( JSFiddle demo )



Часть 3: смешивать и улучшать

Теперь, когда мы знаем, что возможно, давайте создадим несколько вариантов.


Горизонтальные половины

  • Без тени текста:

    Горизонтальные половинки - без тени текста

  • Возможность Text Shadow для каждой половины части независимо:

    halfStyle - Горизонтальные половинки - с текстовой тенью

( JSFiddle demo )



Вертикальные 1/3 части

  • Без тени текста:

    halfStyle - Вертикальные 1/3 части - без тени текста

  • Возможность Text Shadow для каждой 1/3 части независимо:

    halfStyle - Вертикальные 1/3 части - С тенью текста

( JSFiddle demo )



-Горизонтальные 1/3 части

  • Без тени текста:

    halfStyle - Горизонтальные 1/3 части - без тени текста

  • Возможность Text Shadow для каждой 1/3 части независимо:

    halfStyle - Горизонтальные 1/3 части - С текстовой тенью

( JSFiddle demo )



-HalfStyle Улучшение @KevinGranger

halfStyle - КевинГрангер

( JSFiddle demo )



-PeelingStyle улучшение HalfStyle от @SamTremaine

halfStyle - СамТремейн

( JSFiddle demo и на samtremaine.co.uk )



Часть 4: Готов к производству

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

Плагин использует атрибут data data-halfstyle="[-CustomClassName-]"для целевых .textToHalfStyleэлементов и автоматически вносит все необходимые изменения.

Итак, просто к элементу, содержащему текст, добавьте textToHalfStyleкласс и атрибут данных data-halfstyle="[-CustomClassName-]". Плагин сделает всю остальную работу.

halfStyle - несколько на одной странице

Также определения классов CSS-стилей соответствуют [-CustomClassName-]части, упомянутой выше, и .halfStyleсвязаны с ними , поэтому мы будем иметь.halfStyle.[-CustomClassName-]

jQuery(function($) {
    var halfstyle_text, halfstyle_chars, $halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_style;

    // Iterate over all class occurrences
    $('.textToHalfStyle').each(function(idx, halfstyle_el) {
        $halfstyle_el = $(halfstyle_el);
        halfstyle_style = $halfstyle_el.data('halfstyle') || 'hs-base';
        halfstyle_text = $halfstyle_el.text();
        halfstyle_chars = halfstyle_text.split('');

        // Set the screen-reader text
        $halfstyle_el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + halfstyle_text + '</span>');

        // Reset output for appending
        halfstyle_output = '';

        // Iterate over all chars in the text
        for (halfstyle_i = 0; halfstyle_i < halfstyle_chars.length; halfstyle_i++) {
            // Create a styled element for each character and append to container
            halfstyle_output += '<span aria-hidden="true" class="halfStyle ' + halfstyle_style + '" data-content="' + halfstyle_chars[halfstyle_i] + '">' + halfstyle_chars[halfstyle_i] + '</span>';
        }

        // Write to DOM only once
        $halfstyle_el.append(halfstyle_output);
    });
});
/* start half-style hs-base */

.halfStyle.hs-base {
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #000; /* for demo purposes */
}

.halfStyle.hs-base:before {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    pointer-events: none; /* so the base char is selectable by mouse */
    overflow: hidden;
    color: #f00; /* for demo purposes */
}

/* end half-style hs-base */


/* start half-style hs-horizontal-third */

.halfStyle.hs-horizontal-third { /* base char and also the bottom 1/3 */
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: transparent;
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #f0f;
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

.halfStyle.hs-horizontal-third:before { /* creates the top 1/3 */
    display: block;
    z-index: 2;
    position: absolute;
    top: 0;
    height: 33.33%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #fa0; /* for demo purposes */
}

.halfStyle.hs-horizontal-third:after { /* creates the middle 1/3 */
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    height: 66.66%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}

/* end half-style hs-horizontal-third */


/* start half-style hs-PeelingStyle, by user SamTremaine on Stackoverflow.com */

.halfStyle.hs-PeelingStyle {
  position: relative;
  display: inline-block;
  font-size: 68px;
  color: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  white-space: pre;
  transform: rotate(4deg);
  text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
}

.halfStyle.hs-PeelingStyle:before { /* creates the left part */
  display: block;
  z-index: 1;
  position: absolute;
  top: -0.5px;
  left: -3px;
  width: 100%;
  content: attr(data-content);
  overflow: hidden;
  pointer-events: none;
  color: #FFF;
  transform: rotate(-4deg);
  text-shadow: 0px 0px 1px #000;
}

/* end half-style hs-PeelingStyle */


/* start half-style hs-KevinGranger, by user KevinGranger on StackOverflow.com*/

.textToHalfStyle.hs-KevinGranger {
  display: block;
  margin: 200px 0 0 0;
  text-align: center;
}

.halfStyle.hs-KevinGranger {
  font-family: 'Libre Baskerville', serif;
  position: relative;
  display: inline-block;
  width: 1;
  font-size: 70px;
  color: black;
  overflow: hidden;
  white-space: pre;
  text-shadow: 1px 2px 0 white;
}

.halfStyle.hs-KevinGranger:before {
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  width: 50%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  color: white;
}

/* end half-style hs-KevinGranger
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-base">Half-style, please.</span>
</p>
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-horizontal-third">Half-style, please.</span>
</p>
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-PeelingStyle">Half-style, please.</span>
</p>
<p style="background-color:#000;">
    <span class="textToHalfStyle" data-halfstyle="hs-KevinGranger">Half-style, please.</span>
</p>

( JSFiddle demo )


Комментарии не для расширенного обсуждения; этот разговор был перенесен в чат .
Иветт

7
Это очень круто. Стоит отметить, что эта техника ломает перенос слов, пробелы и межсимвольный CSS.
Эндрю Энсли

2
Приятно видеть, что мы прошли полный круг обратно к WordArt: D
Ровыко

488

введите описание изображения здесь


Я только что закончил разработку плагина, и он доступен для всех желающих! Надеюсь, вам это понравится.

Просмотр проекта на GitHub - Просмотр веб-сайта проекта . (так что вы можете увидеть все стили разделения)

Применение

Прежде всего, убедитесь, что jQueryбиблиотека включена. Лучший способ получить последнюю версию jQuery - обновить тег head:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

После загрузки файлов убедитесь, что вы включили их в свой проект:

<link rel="stylesheet" type="text/css" href="css/splitchar.css">
<script type="text/javascript" src="js/splitchar.js"></script>

наценка

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

<h1 class="splitchar horizontal">Splitchar</h1>

После того, как все это будет сделано, просто убедитесь, что вы вызываете функцию jQuery в вашем документе готового файла следующим образом:

$(".splitchar").splitchar();

Пользовательская настройка

Чтобы текст выглядел именно так, как вы хотите, все, что вам нужно сделать, это применить свой дизайн следующим образом:

.horizontal { /* Base CSS - e.g font-size */ }
.horizontal:before { /* CSS for the left half */ }
.horizontal:after { /* CSS for the right half */ }


Это оно! Теперь у вас есть Splitcharплагин все готово. Больше информации об этом на http://razvanbalosin.com/Splitchar.js/ .


На данный момент ваше решение является самым простым для реализации для нескольких символов, но все еще не на 100%.
Мэтью Маклин

@ MathewMacLean Эмисфера должна иметь ответ, верно?
mttdbrd

3
Это имеет проблемы с переносом текста, что проявляется даже в последней скрипке. Когда один персонаж переносится, он по сути делится на два. Должно быть, тривиальное исправление.
BoltClock

16
Не зависите от jquery-latest.min.js, он может заставить ваши сайты ломаться без предупреждения, если jQuery обновлен и плагин не работает с более новым. Вместо этого: используйте конкретную версию и проверьте совместимость при обновлении.
Нильс Бом

2
Вы можете отредактировать свой ответ, чтобы не предлагать использовать jquery-latest.js. Как упоминал @NielsBom, в прошлом он мог сломать ваш сайт, когда он был обновлен. С июля 2014 года этого делать не будет, но это потому, что он заблокирован в версии 1.11.1 и больше никогда не будет обновляться.
бесполезный код

237

Изменить (октябрь 2017 г.): background-clipточнее background-image options, теперь поддерживаются всеми основными браузерами: CanIUse

Да, вы можете сделать это только с одним символом и только CSS.

Только Webkit (и Chrome):

http://jsbin.com/rexoyice/1/

h1 {
  display: inline-block;
  margin: 0; /* for demo snippet */
  line-height: 1em; /* for demo snippet */
  font-family: helvetica, arial, sans-serif;
  font-weight: bold;
  font-size: 300px;
  background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<h1>X</h1>

Визуально все примеры, в которых используются два символа (будь то через JS, псевдоэлементы CSS или просто HTML), выглядят хорошо, но обратите внимание, что все это добавляет контент в DOM, который может вызвать доступность, а также выделение текста / вырезать / вставьте вопросы.


34
@MathewMacLean наша работа была бы намного проще, если бы умер только IE, и Firefox начал использовать Webkit. :)
ДА.

48
WebKit имеет историю ошибок рендеринга, которые являются почти причудливыми уровнями IE6 / IE7 (можно даже сказать, что Safari и Chrome являются IE6 современной сети) и ведут себя способами, которые отклоняются от стандарта без особой причины. IE стал намного лучше с 9-й версии, поэтому, хотя старые версии уже должны были умереть, я не вижу причин для ненависти к его последним версиям. И я, конечно, не понимаю, почему люди поддерживают идею монокультуры WebKit / Blink (комментарии здесь, вероятно, в шутку, но я слышал о людях, которые серьезно в это верят).
BoltClock

3
Это, как говорится, background-clip: textсупер круто, и они должны рассмотреть это (или что-то подобное text-decoration-background) для модуля уровня 4.
BoltClock

2
Да, я был бы счастлив, если бы blink / webkit умерли, и современные движки IE + FF рендеринга выжили, чем наоборот. Это не означает, что остальная часть Chrome не хороша, просто ее рендеринг в наши дни является в значительной степени худшим.
Имон Нербонн

2
Это гораздо более чистое решение, чем приведенные выше хакерские библиотеки, и это должно быть приемлемым ответом, поскольку в настоящее время можно использовать текстовые градиенты.
Mystrdat

160

пример


JSFiddle DEMO

Мы сделаем это, используя только псевдо-селекторы CSS!

Этот метод будет работать с динамически генерируемым контентом и различными размерами шрифта и шириной.

HTML:

<div class='split-color'>Two is better than one.</div>

CSS:

.split-color > span {
    white-space: pre-line;
    position: relative;
    color: #409FBF;
}

.split-color > span:before {
    content: attr(data-content);
    pointer-events: none;  /* Prevents events from targeting pseudo-element */
    position: absolute;
    overflow: hidden;
    color: #264A73;
    width: 50%;
    z-index: 1;
}

Чтобы обернуть динамически сгенерированную строку, вы можете использовать такую ​​функцию:

// Wrap each letter in a span tag and return an HTML string
// that can be used to replace the original text
function wrapString(str) {
  var output = [];
  str.split('').forEach(function(letter) {
    var wrapper = document.createElement('span');
    wrapper.dataset.content = wrapper.innerHTML = letter;

    output.push(wrapper.outerHTML);
  });

  return output.join('');
}

// Replace the original text with the split-color text
window.onload = function() {
    var el  = document.querySelector('.split-color'),
        txt = el.innerHTML;

    el.innerHTML = wrapString(txt);
}

Это аккуратно, но единственная проблема заключается в том, что контент будет динамичным.
Мэтью Маклин

Результаты варьируются в зависимости от используемого шрифта. Плюс вычисление ширины кажется проблемой.
j08691

@MathewMacLean хмм, ваш контент будет когда-либо только одним персонажем? Если нет, хотите ли вы, чтобы у каждого персонажа был одинаковый цветовой эффект или только определенные (то есть первый)?
wvandaal

1
@MathewMacLean вы можете написать простую функцию цикла в JS для выполнения переноса. Я добавляю его в свой ответ сейчас.
wvandaal

1
@MathewMacLean Откуда приходит текст? wvandaal прав, вы можете обернуть текст самостоятельно.
mttdbrd

96

Это может быть неактуально, а может и нет, но некоторое время назад я создал функцию jQuery, которая делает то же самое, но горизонтально.

Я назвал это «Strippex» Для «полоса» + «текст», демо: http://cdpn.io/FcIBg

Я не говорю, что это решение любых проблем, но я уже пытался применить css к половине персонажа, но по горизонтали. Так что идея та же, реализация может быть ужасной, но она работает.

Ах, и самое главное, я получал удовольствие, создавая его!

введите описание изображения здесь


2
@ Luky Vj: это ваш аккаунт? Возможно, вы захотите объединить все свои сообщения в одну учетную запись, чтобы не сталкиваться с препятствиями, пытаясь редактировать свои собственные сообщения.
BoltClock

Да, на самом деле, я впервые опубликовал свой старый первый аккаунт ... И мне пришлось добавить изображение, и я не был достаточно популярен, чтобы опубликовать свое изображение ... Но вы правы, я исправлю это как можно скорее !
LukyVj

1
@ LukyVj: Вы можете объединить свои учетные записи, выполнив следующие инструкции: stackoverflow.com/help/merging-accounts
BoltClock

1
@ LukyVj Я обновил вашу функцию, добавив pointer-events:noneв &:nth-child(2)- &:nth-child(5). Это делает так, что текст может быть выделен только один раз, и вы получите только одну его копию. Вы можете увидеть это здесь: codepen.io/anon/pen/upLaj
Мэтью Маклин

74

Если вы заинтересованы в этом, то Glitch Лукаса Беббера - очень похожий и очень крутой эффект:

введите описание изображения здесь

Создано с использованием простого SASS Mixin, такого как

.example-one {
  font-size: 100px;
  @include textGlitch("example-one", 17, white, black, red, blue, 450, 115);
}

Подробнее на CSS Tricks Криса Coyer в и странице Codepen Lucas Bebber в


74

Здесь уродливая реализация в canvas. Я попробовал это решение, но результаты оказались хуже, чем я ожидал, так что здесь все равно.

Пример холста

$("div").each(function() {
  var CHARS = $(this).text().split('');
  $(this).html("");
  $.each(CHARS, function(index, char) {
    var canvas = $("<canvas />")
      .css("width", "40px")
      .css("height", "40px")
      .get(0);
    $("div").append(canvas);
    var ctx = canvas.getContext("2d");
    var gradient = ctx.createLinearGradient(0, 0, 130, 0);
    gradient.addColorStop("0", "blue");
    gradient.addColorStop("0.5", "blue");
    gradient.addColorStop("0.51", "red");
    gradient.addColorStop("1.0", "red");
    ctx.font = '130pt Calibri';
    ctx.fillStyle = gradient;
    ctx.fillText(char, 10, 130);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Example Text</div>


1
Кстати, вы можете использовать 0.5для остановки красного цвета тоже.
Зубная щетка

62

Ближайший я могу получить:

$(function(){
  $('span').width($('span').width()/2);
  $('span:nth-child(2)').css('text-indent', -$('span').width());
});
body{
  font-family: arial;
}
span{
  display: inline-block;
  overflow: hidden;
}
span:nth-child(2){
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>X</span><span>X</span>

Демо: http://jsfiddle.net/9wxfY/2/

Вот версия, которая использует только один диапазон: http://jsfiddle.net/9wxfY/4/


1
$('span').width()просто возвращает ширину первого найденного промежутка; это должно быть что-то, что вы сделали для каждой пары. Что дает мне идею ...
Pointy

Это очень похоже на пример epascarello, найденный на jsfiddle.net/9WWsd. Как я сказал ему, Ваш пример - это шаг в правильном направлении, но это будет кошмар для использования в более широком масштабе.
Мэтью Маклин

@ MathewMacLean, я этого не видел. Почему это будет кошмар? Как насчет этого: jsfiddle.net/9wxfY/4
Заключенный

Когда вы реализуете более одного символа, это вызывает проблемы.
Мэтью Маклин

@MathewMacLean, вот где приходит сказочная надпись .JS .
Pointy

53

Введите описание изображения здесь

Я только что поиграл с решением @ Arbel:

var textToHalfStyle = $('.textToHalfStyle').text();
var textToHalfStyleChars = textToHalfStyle.split('');
$('.textToHalfStyle').html('');
$.each(textToHalfStyleChars, function(i,v){
    $('.textToHalfStyle').append('<span class="halfStyle" data-content="' + v + '">' + v + '</span>');
});
body{
    background-color: black;
}
.textToHalfStyle{
    display:block;
    margin: 200px 0 0 0;
    text-align:center;
}
.halfStyle {
    font-family: 'Libre Baskerville', serif;
    position:relative;
    display:inline-block;
    width:1;
    font-size:70px;
    color: black;
    overflow:hidden;
    white-space: pre;
    text-shadow: 1px 2px 0 white;
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<span class="textToHalfStyle">Dr. Jekyll and M. Hide</span>


4
Только что поиграл с решением @Arbel Каковы отличия от решения Arbel ? Трудно понять, вставили ли вы какой-либо код или улучшили его.
AL

43

Другое решение только для CSS (хотя атрибут data необходим, если вы не хотите писать CSS для письма). Этот работает больше по всем направлениям (протестировано IE 9/10, последняя версия Chrome и последняя версия FF)

span {
  position: relative;
  color: rgba(50,50,200,0.5);
}

span:before {
  content: attr(data-char);
  position: absolute;
  width: 50%;
  overflow: hidden;
  color: rgb(50,50,200);
}
<span data-char="X">X</span>


38

Ограниченное решение CSS и jQuery

Я не уверен, насколько элегантно это решение, но оно разрезает все ровно пополам: http://jsfiddle.net/9wxfY/11/

В противном случае, я создал хорошее решение для вас ... Все, что вам нужно сделать, это иметь это для вашего HTML:

Взгляните на эту самую последнюю и точную редакцию от 13.06.2016: http://jsfiddle.net/9wxfY/43/

Что касается CSS, он очень ограничен ... Вам нужно только применить его к :nth-child(even)

$(function(){
  var $hc = $('.half-color');
  var str = $hc.text();
  $hc.html("");

  var i = 0;
  var chars;
  var dupText;

  while(i < str.length){
    chars = str[i];
    if(chars == " ") chars = "&nbsp;";
    dupText = "<span>" + chars + "</span>";

    var firstHalf = $(dupText);
    var secondHalf = $(dupText);

    $hc.append(firstHalf)
    $hc.append(secondHalf)

    var width = firstHalf.width()/2;

    firstHalf.width(width);
    secondHalf.css('text-indent', -width);

    i++;
  }
});
.half-color span{
  font-size: 2em;
  display: inline-block;
  overflow: hidden;
}
.half-color span:nth-child(even){
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="half-color">This is a sentence</div>


Это имеет те же проблемы, что и другие. Это становится грязным, когда вы пытаетесь сделать это с более чем одним персонажем.
Мэтью Маклин

@MathewMacLean Я знаю :( Видел это тоже.
Работаю

@MathewMacLean исправил это, но не уверен, насколько чист JQuery сейчас. Посмотрите
отрегулируйте

@MathewMacLean добавление в версию webkit вещей, которые вы могли бы использовать, например, такое решение: jsfiddle.net/wLkVt/1
отрегулируйте

@MathewMacLean Исправлена ​​ошибка в моем скрипте. Причиной ошибки было то, что я все время брал ширину самого первого элемента вместо ширины букв.
Настроить

30
.halfStyle {
    position:relative;
    display:inline-block;
    font-size:68px; /* or any font size will work */
    color: rgba(0,0,0,0.8); /* or transparent, any color */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    transform:rotate(4deg);
    -webkit-transform:rotate(4deg);
    text-shadow:2px 1px 3px rgba(0,0,0,0.3);
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:-0.5px;
    left:-3px;
    width: 100%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: white;
    transform:rotate(-4deg);
    -webkit-transform:rotate(-4deg);
    text-shadow:0 0 1px black;

}

http://experimental.samtremaine.co.uk/half-style/

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



24

Как насчет этого для более короткого текста?

Это может даже работать для более длинного текста, если вы делаете что-то с циклом, повторяя символы с помощью JavaScript. В любом случае, результат будет примерно таким:

Можно ли применить CSS к половине символа?

p.char {
  position: relative;
  display: inline-block;
  font-size: 60px;
  color: red;
}

p.char:before {
  position: absolute;
  content: attr(char);
  width: 50%;
  overflow: hidden;
  color: black;
}
<p class="char" char="S">S</p>
<p class="char" char="t">t</p>
<p class="char" char="a">a</p>
<p class="char" char="c">c</p>
<p class="char" char="k">k</p>
<p class="char" char="o">o</p>
<p class="char" char="v">v</p>
<p class="char" char="e">e</p>
<p class="char" char="r">r</p>
<p class="char" char="f">f</p>
<p class="char" char="l">l</p>
<p class="char" char="o">o</p>
<p class="char" char="w">w</p>


23

FWIW, вот мой взгляд на это, делая это только с помощью CSS: http://codepen.io/ricardozea/pen/uFbts/

Несколько заметок:

  • Основная причина, по которой я это сделал, состояла в том, чтобы проверить себя и посмотреть, смогу ли я выполнить стилизацию половины персонажа, в то же время фактически предоставив содержательный ответ ОП.

  • Я знаю, что это не идеальное и не самое масштабируемое решение, и решения, предлагаемые людьми здесь, намного лучше для сценариев "реального мира".

  • Код CSS, который я создал, основан на моих первых мыслях и моем личном подходе к проблеме.

  • Мое решение работает только с симметричными символами, такими как X, A, O, M. ** Оно не работает с асимметричными символами, такими как B, C, F, K или строчными буквами.

  • ** ОДНАКО, этот подход создает очень интересные «фигуры» с асимметричными символами. Попробуйте изменить X на K или на строчную букву, например, h или p в CSS :)

HTML

<span class="half-letter"></span>

SCSS

.half-character { 
  display: inline-block;
  font: bold 350px/.8 Arial;
  position: relative;

  &:before, &:after {
    content: 'X'; //Change character here
    display: inline-block;
    width: 50%;
    overflow: hidden;
    color: #7db9e8;
  }
  &:after {
    position: absolute;
    top: 0;
    left: 50%;
    color: #1e5799;
    transform: rotateY(-180deg);
  }
}

17

Вы также можете сделать это с помощью SVG, если хотите:

var title = document.querySelector('h1'),
    text = title.innerHTML,
    svgTemplate = document.querySelector('svg'),
    charStyle = svgTemplate.querySelector('#text');

svgTemplate.style.display = 'block';

var space = 0;

for (var i = 0; i < text.length; i++) {
  var x = charStyle.cloneNode();
  x.textContent = text[i];
  svgTemplate.appendChild(x);
  x.setAttribute('x', space);
  space += x.clientWidth || 15;
}

title.innerHTML = '';
title.appendChild(svgTemplate);
<svg style="display: none; height: 100px; width: 100%" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs id="FooDefs">
        <linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="50%" stop-color="blue" />
            <stop offset="50%" stop-color="red" />
        </linearGradient>
    </defs>
    <text y="50%" id="text" style="font-size: 72px; fill: url(#MyGradient)"></text>
</svg>

<h1>This is not a solution X</h1>

http://codepen.io/nicbell/pen/jGcbq


16

Это может быть достигнуто только с помощью :beforeселектора CSS и content property value.

.halfed, .halfed1 {
  float: left;
}

.halfed, .halfed1 {
  font-family: arial;
  font-size: 300px;
  font-weight: bolder;
  width: 200px;
  height: 300px;
  position: relative; /* To help hold the content value within */
  overflow: hidden;
  color: #000;
}




.halfed:before, .halfed1:before   {
  width: 50%; /* How much we'd like to show */
  overflow: hidden; /* Hide what goes beyond our dimension */  
  content: 'X'; /* Halfed character */
  height: 100%;
  position: absolute;
  color: #28507D;

}



/* For Horizontal cut off */ 

.halfed1:before   {
  width: 100%;
  height: 55%;
  
}
<div class="halfed"> X </div>

<div class="halfed1"> X </div>

>> Смотрите на jsFiddle


8

Вы можете использовать приведенный ниже код. Здесь, в этом примере, я использовал h1тег и добавил атрибут, data-title-text="Display Text"который будет отображаться с текстом другого цвета в h1текстовом элементе тега, что дает эффект полуцветного текста, как показано в примере ниже.

введите описание изображения здесь

body {
  text-align: center;
  margin: 0;
}

h1 {
  color: #111;
  font-family: arial;
  position: relative;
  font-family: 'Oswald', sans-serif;
  display: inline-block;
  font-size: 2.5em;
}

h1::after {
  content: attr(data-title-text);
  color: #e5554e;
  position: absolute;
  left: 0;
  top: 0;
  clip: rect(0, 1000px, 30px, 0);
}
<h1 data-title-text="Display Text">Display Text</h1>


5

Просто для записи в истории!

Я придумал решение для моей собственной работы 5-6 лет назад - Gradext (чистый javascript и чистый css, никакой зависимости).

Техническое объяснение состоит в том, что вы можете создать такой элемент:

<span>A</span>

Теперь, если вы хотите создать градиент для текста, вам нужно создать несколько слоев, каждый из которых будет индивидуально окрашен, а созданный спектр будет иллюстрировать эффект градиента.

например, посмотрите на это слово lorem внутри a <span>и оно вызовет эффект горизонтального градиента ( посмотрите примеры ):

 <span data-i="0" style="color: rgb(153, 51, 34);">L</span>
 <span data-i="1" style="color: rgb(154, 52, 35);">o</span>
 <span data-i="2" style="color: rgb(155, 53, 36);">r</span>
 <span data-i="3" style="color: rgb(156, 55, 38);">e</span>
 <span data-i="4" style="color: rgb(157, 56, 39);">m</span>

и вы можете продолжать делать этот шаблон в течение длительного времени, а также длинный абзац.

введите описание изображения здесь

Но!

Что если вы хотите создать эффект вертикального градиента для текстов?

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

Предположим, наш первый <span>снова. но содержание не должно быть буквами индивидуально; содержание должно быть целым текстом, и теперь мы собираемся скопировать то же самое<span>снова и снова (количество пролетов будут определять качество вашего градиента, больше срока, лучший результат, но низкую производительность). Посмотри на это:

<span data-i="6" style="color: rgb(81, 165, 39); overflow: hidden; height: 11.2px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="7" style="color: rgb(89, 174, 48); overflow: hidden; height: 12.8px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="8" style="color: rgb(97, 183, 58); overflow: hidden; height: 14.4px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="9" style="color: rgb(105, 192, 68); overflow: hidden; height: 16px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="10" style="color: rgb(113, 201, 78); overflow: hidden; height: 17.6px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="11" style="color: rgb(121, 210, 88); overflow: hidden; height: 19.2px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>

введите описание изображения здесь

Опять же, но!

Что, если вы хотите заставить эти эффекты градиента двигаться и создавать из них анимацию?

ну, есть и другое решение для этого тоже. Вы должны обязательно проверить animation: trueили даже .hoverable()метод, который приведет к градиенту, чтобы начать на основе позиции курсора! (звучит круто xD)

введите описание изображения здесь

это просто, как мы создаем градиенты (линейные или радиальные) на текстах. Если вам понравилась идея или вы хотите узнать о ней больше, вам следует проверить предоставленные ссылки.


Возможно, это не лучший вариант, может быть, не самый эффективный способ сделать это, но он откроет некоторое пространство для создания захватывающих и восхитительных анимаций, чтобы вдохновить других людей на лучшее решение.

Это позволит вам использовать стиль градиента для текстов, который поддерживается даже в IE8!

Здесь вы можете найти работающую живую демоверсию, а оригинальный репозиторий находится здесь, на GitHub, с открытым исходным кодом и готов получить некоторые обновления (: D)

Это мой первый раз (да, после 5 лет, вы правильно поняли) упоминать этот репозиторий где-нибудь в Интернете, и я очень рад этому!


[Обновление - август 2019 года:] Github удалил демоверсию github-страниц этого хранилища, потому что я из Ирана! Только исходный код доступен здесь, хотя ...

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.