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

2683

Что я ищу:

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

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

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

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

Изображение 89

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

ОБНОВИТЬ:

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

  • 1
    Комментарии не для расширенного обсуждения; этот разговор был перенесен в чат .
  • 2
    Они спрашивали «почему», потому что они хотели знать, почему вы будете использовать CSS, а не использовать SVG или графический редактор. Ничего общего с деловыми решениями об их логотипе. По вашей ссылке на их логотип, почему вы просто не обрезали X?
Теги:
styling

19 ответов

2606
Лучший ответ

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

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

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

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

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

Изображение 2025

Демо: 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="/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. Расширенное решение - Независимые левая и правая части

Изображение 2026

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

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

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: transparent; /* hide the base character */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}

.halfStyle:before { /* creates the left part */
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    width: 50%;
    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 #af0; /* for demo purposes */
}

.halfStyle:after { /* creates the right part */
    display: block;
    direction: rtl; /* very important, will make the width to start from right */
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    width: 50%;
    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 #0af; /* for demo purposes */
}
<script src="/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)

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

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

-Horizontal Половина частей

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

    Изображение 2027

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

    Изображение 2028

// 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: transparent; /* hide the base character */
  overflow: hidden;
  white-space: pre; /* to preserve the spaces from collapsing */
}

.halfStyle:before { /* creates the top part */
  display: block;
  z-index: 2;
  position: absolute;
  top: 0;
  height: 50%;
  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 #af0; /* for demo purposes */
}

.halfStyle:after { /* creates the bottom part */
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  height: 100%;
  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 #0af; /* for demo purposes */
}
<script src="/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)

-Vertical 1/3 части

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

    Изображение 2029

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

    Изображение 2030

// 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 { /* base char and also the right 1/3 */
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: transparent; /* hide the base character */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #f0f; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

.halfStyle:before { /* creates the left 1/3 */
    display: block;
    z-index: 2;
    position: absolute;
    top: 0;
    width: 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 #af0; /* for demo purposes */
}

.halfStyle:after { /* creates the middle 1/3 */
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    width: 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 */
}
<script src="/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)

-Horizontal 1/3 части

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

    Изображение 2031

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

    Изображение 2032

// 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 { /* 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: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: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 */
}
<script src="/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)

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

Изображение 2033

// 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);
  });
});
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="/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)

-PeelingStyle улучшение HalfStyle с помощью @SamTremaine

Изображение 2034

// 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: 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: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;
}
<script src="/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 и на samtremaine.co.uk)

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

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

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

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

Изображение 2035

Также определения классов CSS-стилей соответствуют классу [-CustomClassName-] упомянутому выше, и .halfStyle с .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="/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)

Поделиться
  • 0
    Комментарии не для расширенного обсуждения; этот разговор был перенесен в чат .
  • 1
    Это очень круто. Стоит отметить, что этот метод ломает перенос слов, пробелы и межсимвольный CSS.
489

Изображение 2036


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

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

использование

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

<script src="/jquery-latest.min.js"></script>

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

<link rel="stylesheet" type="text/css" href="/splitchar.css">
<script type="text/javascript" src="/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/.

Поделиться
  • 0
    На данный момент ваше решение является самым простым для реализации для нескольких символов, но все еще не на 100%.
  • 0
    ну, вот оно: скрипка !
Показать ещё 12 комментариев
221

Изменить (октябрь 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, который может вызвать доступность, а также выбор текста/вырезать/вставить.

Поделиться
  • 31
    @MathewMacLean наша работа была бы намного проще, если бы умер только IE, а Firefox начал использовать Webkit. :)
  • 6
    @DA Chrome больше не использует webkit: wired.com/2013/04/blink
Показать ещё 8 комментариев
139

Изображение 2037

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);
}
Поделиться
  • 0
    Это аккуратно, но единственная проблема заключается в том, что контент будет динамичным.
  • 0
    Результаты варьируются в зависимости от используемого шрифта. Плюс вычисление ширины кажется проблемой.
Показать ещё 13 комментариев
92

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

Я назвал его "Strippex" для "stripe" + "text", demo: http://cdpn.io/FcIBg

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

А, и самое главное, мне было весело создавать его!

Изображение 2038

Поделиться
  • 1
    @ Luky Vj: это ваш аккаунт? Возможно, вы захотите объединить все свои сообщения в одну учетную запись, чтобы не сталкиваться с препятствиями, пытаясь редактировать свои собственные сообщения.
  • 0
    Да, на самом деле, я впервые опубликовал свой старый первый аккаунт ... И мне пришлось добавить изображение, и я не был достаточно популярен, чтобы опубликовать свое изображение ... Но вы правы, я исправлю это как можно скорее !
Показать ещё 2 комментария
70

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

Изображение 2040

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

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

Подробнее на Chris Coyer CSS Tricks и Страница Лукаса Бебера Кодепена

Поделиться
70

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

Изображение 2039

        $("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="/jquery.min.js"></script>
<div>Example Text</div>
Поделиться
  • 0
    Кстати, вы также можете использовать 0.5 для остановки красного цвета.
58

Ближе всего я могу получить:

$(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="/jquery.min.js"></script>
<span>X</span><span>X</span>

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

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

Поделиться
  • 1
    $('span').width() просто возвращает ширину первого найденного диапазона; это должно быть что-то, что вы сделали для каждой пары. Что дает мне идею ...
  • 0
    Это очень похоже на пример epascarello, найденный на jsfiddle.net/9WWsd. Как я сказал ему, Ваш пример - это шаг в правильном направлении, но использовать его в более широком масштабе было бы кошмаром.
Показать ещё 8 комментариев
55

Изображение 2041

Я просто играл с решением @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="/jquery.min.js"></script>
<span class="textToHalfStyle">Dr. Jekyll and M. Hide</span>
Поделиться
  • 1
    Только что поиграл с решением @Arbel Каковы различия с решением Arbel ? Трудно увидеть, скопировал ли ты какой-то код или улучшил его.
42

Другое решение только для 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>
Поделиться
37

Ограниченное решение 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="/jquery.min.js"></script>
<div class="half-color">This is a sentence</div>
Поделиться
  • 0
    Это имеет те же проблемы, что и другие. Это начинает становиться грязным, когда вы пытаетесь сделать это с более чем одним персонажем.
  • 0
    @MathewMacLean я знаю :( видел это тоже. Сейчас работаю над этим
Показать ещё 3 комментария
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

Хорошее решение для WebKit, использующее поддержку background-clip: text: http://jsfiddle.net/sandro_paganotti/wLkVt/

span{
   font-size: 100px;
   background: linear-gradient(to right, black, black 50%, grey 50%, grey);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}
Поделиться
  • 0
    Уже предложено в ответе DA.
23

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

Несколько примечаний:

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

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

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

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

    /li >

  • ** ОДНАКО, этот подход создает очень интересные "фигуры" с асимметричными символами. Попробуйте изменить 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);
  }
}
Поделиться
20

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

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

Изображение 2042

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>
Поделиться
16

Вы также можете сделать это с помощью 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

Поделиться
14

Это может быть достигнуто с помощью селектора CSS :before и 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

Поделиться
7

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

Изображение 2043

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>
Поделиться
2

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

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

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

<span>A</span>

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

например, посмотрите на это слово lorem внутри <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>

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

Изображение 2044

Но!

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

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

Предполагая наш первый <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>

Изображение 2045

Опять же, но!

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

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

Изображение 2046

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

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

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

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

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню