Питання Чи можна застосувати CSS до половини символу?


Що я шукаю:

Спосіб стильувати один ПОЛОВИНА характеру. (У цьому випадку половина букви прозора)

Те, що я в даний час шукав і намагався (без щастя):

  • Методи стилізації половини символу / листа
  • Стильова частина персонажа з CSS або JavaScript
  • Застосувати CSS до 50% символу

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

x

Для цього існує рішення CSS або JavaScript, або я повинен буде вдатися до зображень? Я вважаю за краще не піти на маршрут зображення, оскільки цей текст буде створено динамічно.


UPDATE:

Оскільки багато хто поцікавився, чому я коли-небудь хотів би стильувати половину персонажа, саме тому. Моє місто нещодавно витратило 250 000 доларів на визначення нового "бренда" для себе. Це логотип це те, що вони придумали. Багато людей поскаржились на простоту та відсутність творчості і продовжують це робити. Моя мета полягала в тому, щоб придумати це веб-сайт як жарт Введіть "Галіфакс", і ви побачите, що я маю на увазі. :)


2435
2018-05-09 16:16


походження


Коментарі не для розширеної дискусії; ця розмова була переїхав в чат. - Yvette Colomb♦


Відповіді:


Тепер на GitHub як плагін!

enter image description here Не соромтеся розгорнути і покращити.

Демонстрація | Завантажити Zip | Half-Style.com (Перенаправлення до GitHub)


  • Чистий CSS для одного символу
  • JavaScript, який використовується для автоматизації через текст чи кілька символів
  • Зберігає доступ до тексту для читачів екрана для сліпих або візуально порушено

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

Half Style on text

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


Це працює на будь-якому динамічному тексті або одному символі, і все це автоматично. Все, що вам потрібно зробити, це додати клас до цільового тексту, а решту подбає про це.

Також, доступ до оригінального тексту зберігається для читачів екрана для сліпих або людей з вадами зору.

Пояснення для одного персонажа:

Чистий CSS. Все, що вам потрібно зробити, це подати заявку .halfStyle клас для кожного елемента, який містить символ, який ви хочете наполовину стильувати.

Для кожного окремого елемента, що містить символ, ви можете створити атрибут даних, наприклад, тут 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 демо)


Частина 2: Розширене рішення - незалежні лівий та правий частини

Half Style on text - advanced - With Text Shadow

За допомогою цього рішення ви можете стиркувати ліву та праву частини окремо та незалежно.

Все все одно, тільки чарівність робить лише більш просунута 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="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 демо)



Частина 3: Змішування та покращення

Тепер, коли ми знаємо, що можливо, давайте створимо деякі варіанти.


- Горизонтальні половина розділів

  • Без текстової тіні:

    Horizontal Half Parts - No Text Shadow

  • Можливість текстової тіні для кожної половини самостійно:

    halfStyle - Horizontal Half Parts - With Text Shadow

// 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="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 демо)



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

  • Без текстової тіні:

    halfStyle - Vertical 1/3 Parts - No Text Shadow

  • Можливість текстової тіні для кожної 1/3 частини самостійно:

    halfStyle - Vertical 1/3 Parts - With Text Shadow

// 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="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 демо)



Горизонтальний 1/3 частин

  • Без текстової тіні:

    halfStyle - Horizontal 1/3 Parts - No Text Shadow

  • Можливість текстової тіні для кожної 1/3 частини самостійно:

    halfStyle - Horizontal 1/3 Parts - With Text Shadow

// 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="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 демо)



Підвищення напівстану за @KevinGranger

halfStyle - KevinGranger

// 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="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 демо)



-Пелінг-Стиль покращення HalfStyle до @SamTremaine

halfStyle - SamTremaine

// 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="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 демо і далі samtremaine.co.uk)



Частина 4: Готова до виробництва

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

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

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

halfStyle - Multiple on Same Page

Також визначень класу 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 демо)


2650
2018-05-09 16:42



Коментарі не для розширеної дискусії; ця розмова була переїхав в чат. - Yvette Colomb♦


enter image description here


Я тільки що закінчив розробку плагіна, і він доступний для всіх! Сподіваюся, вам сподобається.

Переглянути проект на GitHub - Переглянути проект Веб-сайт. (щоб ви могли бачити всі розбиті стилі)

Використання

Перш за все, переконайтеся, що у вас є jQuery бібліотека включена. Найкращий спосіб отримати останню версію jQuery - оновити головний тег за допомогою:

<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/.


454
2018-05-09 16:32



На сьогоднішній день ваше рішення найлегше здійснити для декількох символів, але там ще не 100%. - Mathew MacLean
У цьому виникають проблеми з обгорткою тексту, яка виставляється навіть у новітній скрипці. Коли один персонаж обгортає, він по суті сплітається на два. Проте має бути тривіальний виправлення. - BoltClock♦
@MathewMacLean Перевірте це: посилання :) - Razvan Balosin
Не залежить від jquery-latest.min.js, це може зробити ваш сайт без попередження, якщо jQuery оновлюється, і плагін не працює з більш новим. Замість цього: використовуйте конкретну версію та перевірте сумісність при оновленні. - Niels Bom
Ви можете відредагувати свою відповідь, щоб не рекомендувати використовувати jquery-latest.js. Як згадував @NielsBom, у минулому це може призвести до порушення вашого сайту, коли воно було оновлено. Починаючи з липня 2014 року, це не відбудеться, але це тому, що він заблоковано у версії 1.11.1 і ніколи не буде оновлено. - Useless Code


Редагувати (жовтень 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, який може викликати доступність, а також текст / вставити питання


200
2018-05-09 16:42



@MathewMacLean наша робота буде набагато простішою, якщо тільки IE помирає, і Firefox почав використовувати Webkit. :) - DA.
@DA Chrome більше не використовує webkit: wired.com/2013/04/blink - Matt Harrison
WebKit має історію виявлення помилок, які практично незрозумілі рівні IE6 / IE7 (можна навіть сказати, що Safari та Chrome - це IE6 сучасної мережі), і вони поводяться таким чином, що відхиляються від стандарту без особливої ​​причини. IE було набагато краще після версії 9, так що, хоча древні версії повинні вже вмерти, я не бачу причин ненависті для своїх останніх версій. І я, звичайно, не розумію, чому люди підтримують ідею монокультури WebKit / Blink (коментарі тут, ймовірно, в жарт, але я чув про людей, які серйозно вірять в це). - BoltClock♦
Це сумно, background-clip: text супер супер, і вони повинні це розглянути (або щось подібне, як text-decoration-background) для модуля рівня 4. - BoltClock♦
Так, я був би щасливим, якщо blink / webkit помер і сучасні двигуни рендеринга IE + FF вижили, ніж навпаки. Що не можна сказати, що решта хрому не є приємною, лише те, що її рендеринг на сьогодні є найгіршим з цієї групи. - Eamon Nerbonne


Example


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);
}

139
2018-05-09 16:33



Це акуратно, але єдине питання - вміст буде динамічним. - Mathew MacLean
Результати варіюються залежно від використовуваного шрифту. Плюс розрахунок ширини здається проблемою. - j08691
@MathewMacLean ви можете написати просту функцію циклу в JS для виконання обгортки. Я додаю його до моєї відповіді зараз. - wvandaal
@MathewMacLean Звідки походить текст? wvandaal правильно, ви можете обернути текст самостійно. - mttdbrd
@ Матвей МакЛіан ось приклад: jsfiddle.net/CL82F/5 - wvandaal


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

Я назвав його "Strippex" Для "смужки" + "текст", демонстрація: http://cdpn.io/FcIBg

Я не кажу, що це рішення будь-яких проблем, але я вже намагався застосувати CSS до половини символу, але горизонтально, тому ідея однакова, реалізація може бути жахливою, але вона працює.

Ах, і найголовніше, мені було цікаво створити його!

enter image description here


87
2018-05-13 11:05



@ Луки В'ю: це ваш рахунок? Можливо, вам доведеться консолідувати всі ваші публікації в одному обліковому записі, щоб ви не потрапили в блокноти, намагаючись відредагувати власні повідомлення. - BoltClock♦
Так, по суті, я спочатку розмістив зі своїм старим першим обліковим записом .. І мені довелося додати зображення, і мені не достатньо популярності, щоб опублікувати моє зображення .. Але ви маєте рацію, я її виправити якомога швидше ! - LukyVj
@LukyVj: Ви можете об'єднати свої облікові записи, дотримуючись інструкцій тут: stackoverflow.com/help/merging-accounts - BoltClock♦
@LukyVj Я оновив вашу функцію, додавши pointer-events:none до &:nth-child(2) - &:nth-child(5). Це робить його так, що текст можна виділити лише один раз, і ви отримаєте лише одну його копію. Ви можете побачити його тут: codepen.io/anon/pen/upLaj - Mathew MacLean


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

Canvas example

http://jsfiddle.net/kLXmL/2/

<div>Example Text</div>

$(function(){
    $("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);
        });
    });
});

62
2018-05-09 19:33



До речі, ви можете використовувати 0.5 за червоний колір зупинки теж. - Toothbrush


Якщо ви зацікавлені в цьому, то Глюк Лукаса Беббера - це дуже схожий і надзвичайний ефект:

enter image description here

Створено за допомогою простого SASS Mixin, такого як

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

Більш детальна інформація на CSS трюки Кріса Койєра і Сторінка Codepen Лукаса Бебера


60
2017-10-01 12:39





Найближче я можу отримати:

$(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/


52
2018-05-09 16:28



$('span').width() просто повертає ширину першого проміжку, який він знаходить; це повинно бути те, що ви зробили для кожної пари. Що дає мені ідею ... - Pointy
Це дуже схоже на приклад епаскарело, що знаходиться на jsfiddle.net/9WWsd. Як я вже сказав йому, ваш приклад є кроком у правильному напрямку, але це буде кошмар для використання у більшій гамі. - Mathew MacLean
@MatewMacLean, я цього не бачив. Чому це буде кошмар? Як про це: jsfiddle.net/9wxfY/4 - Prisoner
Коли ви йдете, щоб здійснити більше одного символу, це спричиняє проблеми. - Mathew MacLean
@MathewMacLean це де казкові Букв.Я. входить - Pointy


Enter image description here

Я просто грав з рішенням Арбеля:

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>


49
2018-05-12 20:32



Просто грав з рішення @Arbel Яка різниця з рішенням Арбеля? Важко зрозуміти, чи ви копіювали лише коду або вдосконалили його. - A.L


Ще одне рішення CSS (хоча атрибут даних потрібен, якщо ви не бажаєте писати CSS для конкретного листа). Це працює більше на платі (тестовано IE 9/10, Chrome latest & 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>


40
2018-05-12 18:44





Обмежений CSS та jQuery Solution

Я не впевнений, наскільки елегантним є це рішення, але він скоротить все рівно вдвічі: 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>


33
2018-05-09 16:39



Це має ті самі проблеми, що і інші. Це стає брудним, коли ви намагаєтесь зробити це більш ніж одним символом. - Mathew MacLean
@MathewMacLean Я знаю: (я бачив це теж, працюючи над ним зараз - Adjit
@MathewMacLean виправлено, але не впевнений, як очистити JQuery зараз. Поглянь - Adjit
@MathewMacLean додаючи в webkit версію речей, які можна використати для такого рішення: jsfiddle.net/wLkVt/1 - Adjit
@MathewMacLean Виправлена ​​помилка в моєму скрипті. Причина помилки полягала в тому, що весь час я приймав ширину самого першого елемента, а не ширину літер. - Adjit