2817

私が探しているもの：

キャラクターの半分をスタイルする方法。（この場合、文字の半分が透明になります）

私が現在検索して試したもの（運が悪い）：

キャラクター/文字の半分をスタイリングする方法
CSSまたはJavaScriptを使用してキャラクターの一部にスタイルを設定する
キャラクターの50％にCSSを適用する

以下は私が取得しようとしているものの例です。

このためのCSSまたはJavaScriptソリューションはありますか、それとも画像に頼らなければなりませんか？このテキストは最終的に動的に生成されるため、イメージルートは使用しないことをお勧めします。

更新：

多くの人がなぜ私がキャラクターの半分をスタイルしたいのかと尋ねてきたので、これが理由です。私の市は最近、自分自身の新しい「ブランド」を定義するために$ 250,000を費やしました。このロゴは彼らが思いついたものです。多くの人々は、シンプルさと創造性の欠如について不満を漏らしてきました。私の目標は、このウェブサイトを冗談として思いつくことでした。「ハリファックス」と入力すると、私の意味がわかります。

javascript html css

— マシュー・マクリーン
ソース

1

コメントは詳細な議論のためのものではありません。この会話はチャットに移動しました。

— イベット

6

彼らは、なぜあなたがCSSを使い、SVGや画像エディターを使わないのかを知りたがったので、「なぜ」と尋ねました。ロゴに関するビジネス上の決定とは関係ありません。ロゴへのリンクに従って、なぜXを切り取らなかったのですか？

— user9993 2018年

1

このロゴについて文句を言うことはできません。その血まみれの灯台よりもはるかに良いです。

— Parapluie

@Parapluie同意する必要があります！

— Mathew MacLean

2939

プラグインとしてGitHubに！

ここに画像の説明を入力してくださいフォークして自由に改善してください。

デモ | Zipをダウンロード | Half-Style.com（GitHubにリダイレクト）

単一の文字の純粋なCSS
テキストまたは複数の文字の自動化に使用されるJavaScript
視覚障害者や視覚障害者のためのスクリーンリーダーのテキストアクセシビリティを維持

パート1：基本的なソリューション

テキストのハーフスタイル

デモ： 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：高度なソリューション-左右の独立したパーツ

テキストのハーフスタイル-上級-テキストシャドウあり

このソリューションを使用すると、左右のパーツを個別にスタイル設定できます。

すべてが同じで、より高度な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：ミックスマッチと改善

何が可能かがわかったところで、バリエーションをいくつか作成しましょう。

-水平ハーフパーツ

テキストシャドウなし：
各半分のテキストシャドウの独立性：

コードスニペットを表示

// 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パーツ

テキストシャドウなし：
1/3のパーツごとに独立してテキストシャドウを作成できる可能性：

コードスニペットを表示

// 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パーツ

テキストシャドウなし：
1/3のパーツごとに独立してテキストシャドウを作成できる可能性：

コードスニペットを表示

// 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デモ）

-@SamTremaineによるHalfStyleの PeelingStyleの改善

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：生産準備

カスタマイズされたさまざまなハーフスタイルスタイルセットを、同じページの目的の要素で使用できます。複数のスタイルセットを定義して、どれを使用するかをプラグインに指示できます。

プラグインは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デモ）

— アーベル
ソース

コメントは詳細な議論のためのものではありません。この会話はチャットに移動しました。

— イベット

7

これはとてもクールです。この手法は、ワードラップ、空白、文字間隔のCSSを壊すことに注意してください。

— Andrew Ensley

2

ワードアートに完全に戻ってきたのは

— 嬉しい

488

ここに画像の説明を入力してください

プラグインの開発が終わり、誰でも使用できるようになりました！お楽しみいただければ幸いです。

GitHubでプロジェクトを表示する-プロジェクトのWebサイトを表示します。（したがって、すべての分割スタイルを確認できます）

使用法

まず、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/をご覧ください。

— ラズバンB.
ソース

現在のところ、ソリューションは複数の文字を実装するのが最も簡単ですが、それでも100％ではありません。

— Mathew MacLean 2014年

@MathewMacLean emisferaには答えが必要ですよね？

— mttdbrd 2014年

3

これは、最新のフィドルでも見られるテキストの折り返しに問題があります。1つの文字が折り返されると、基本的に2つに分割されます。しかし、些細な修正である必要があります。

— BoltClock

16

jquery-latest.min.jsに依存しないでください。jQueryが更新され、プラグインが新しいもので動作しない場合、警告なしにサイトが壊れる可能性があります。代わりに、特定のバージョンを使用して、更新時に互換性を確認してください。

— Niels Bom

2

jquery-latest.jsの使用を提案しないように、回答を編集することもできます。@NielsBomが述べたように、以前は更新されたときにサイトを破壊する可能性がありました。2014年7月以降はそのようになりませんが、バージョン1.11.1でロックされており、再度更新されることがないためです。

— 役に立たないコード

237

編集（2017年10月）：background-clipまたはbackground-image optionsすべての主要なブラウザーでサポートされるようになりました：CanIUse

はい、これは1つの文字と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>

スニペットを展開

視覚的には、2つの文字を使用するすべての例（JS、CSS疑似要素、または単にHTMLを介して）は問題ありませんが、すべてがDOMにコンテンツを追加し、アクセシビリティを引き起こす可能性があることに注意してください-テキストの選択/カット/問題を貼り付けます。

— DA。
ソース

34

@MathewMacLean IEだけが死に、FirefoxがWebkitを使い始めれば、私たちの仕事ははるかに簡単になります。:)

— DA。

48

WebKitには、ほぼIE6 / IE7レベルの奇妙なバグ（SafariとChromeが最新のWebのIE6であると言うこともできます）をレンダリングし、特別な理由もなく標準から逸脱する動作をした歴史があります。IEはバージョン9からずっと良くなっているので、古いバージョンはすでに死ぬはずですが、最近のバージョンが嫌いな理由は何もありません。そして、なぜ人々がWebKit / Blinkモノカルチャーのアイデアを支持するのかは確かにわかりません（ここのコメントはおそらくおかしいですが、それを真剣に信じている人々の話を聞いたことがあります）。

— BoltClock

3

そうは言っても、レベル4モジュールの場合background-clip: textは非常に素晴らしいので、彼らはそれ（またはのようなものtext-decoration-background）を検討する必要があります。

— BoltClock

2

ええ、まばたき/ウェブキットが死に、最新のIEの+ FFレンダリングエンジンが他の方法よりも生き残っていれば幸いです。だからといって、残りのChromeが良くないと言っているのではなく、そのレンダリングが最近の最悪の束であるだけです。

— Eamon Nerbonne、2014年

2

これは、上記のハッキーライブラリよりもはるかにクリーンなソリューションです。現在、テキストグラデーションを使用できるので、これは受け入れられる答えになるはずです。

— mystrdat 2014

160

JSFiddleデモ

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

— wvandaal
ソース

これはすばらしいですが、唯一の問題はコンテンツが動的になることです。

— Mathew MacLean 2014年

結果は、使用するフォントによって異なります。さらに、幅の計算は問題のようです。

— j08691 2014年

@MathewMacLeanうーん、あなたのコンテンツは1文字だけですか？そうでない場合、各文字に同じ分割カラー効果を適用しますか、それとも特定の色のみ（つまり、最初の色）にしますか？

— wvandaal 2014年

1

@MathewMacLeanを使用すると、JSで単純なループ関数を記述して、ラッピングを実行できます。私は今、それを私の答えに追加しています。

— wvandaal 2014年

1

@MathewMacLeanテキストはどこから来ていますか？wvandaalは正解です。テキストを自分でラップできます。

— mttdbrd 2014年

96

それは無関係かもしれないし、そうでないかもしれませんが、いつか、同じことを行いますが、水平方向のjQuery関数を作成しました。

私はそれを "Strippex"と呼びました。'stripe '+' text 'の場合、デモ：http ://cdpn.io/FcIBg

これが問題の解決策であると言っているわけではありませんが、CSSを文字の半分に適用しようとしましたが、水平になっているので、考え方は同じです。

ああ、そして最も重要なのは、それを作成するのが楽しいことでした！

ここに画像の説明を入力してください

— LukyVj
ソース

2

@Luky Vj：このアカウントはあなたのものですか？自分の投稿を編集しようとするロードブロッキングに遭遇しないように、すべての投稿を1つのアカウントに統合したい場合があります。

— BoltClock

ええ、実際、私は最初に古い最初のアカウントで投稿しました..そして、画像を追加する必要がありました、そして私は自分の画像を投稿するのに十分に人気がありませんでした..しかし、あなたが正しいです！

— LukyVj

1

@LukyVj：こちらの手順に従ってアカウントをマージできます：stackoverflow.com/help/merging-accounts

— BoltClock

1

@LukyVj私は追加して機能を更新pointer-events:noneします&:nth-child(2)- &:nth-child(5)。これにより、テキストを1回だけ強調表示して、コピーを1つだけ取得できます。あなたはそれをここで見ることができます：codepen.io/anon/pen/upLaj

— Mathew MacLean

74

これに興味があるなら、Lucas BebberのGlitchは非常によく似たとてもクールな効果です：

ここに画像の説明を入力してください

次のような単純なSASS Mixinを使用して作成

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

詳細クリスCoyerのCSSのトリックとルーカスBebberのCodepenページ

— ラスキン
ソース

74

ここでは、キャンバスでの醜い実装です。私はこの解決策を試しましたが、結果は予想よりも悪いため、とにかくここにあります。

キャンバスの例

$("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赤いストップにも使えます。

— 歯ブラシ2014年

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/

1つのスパンのみを使用するバージョンを次に示します。http：//jsfiddle.net/9wxfY/4/

— 囚人
ソース

1

$('span').width()見つかった最初のスパンの幅を返すだけです。それはあなたが各ペアのためにあなたがしたものでなければなりません。これは私にアイデアを与えます...

— ポインティ

これは、jsfiddle.net/9WWsdにあるepascarelloの例とよく似ています。私が彼に言ったように、あなたの例は正しい方向への一歩ですが、より大きな規模で使用するのは悪夢です。

— Mathew MacLean 2014年

@MathewMacLean、私はそれを見ませんでした。なぜそれが悪夢なのでしょうか？これはどうですか：jsfiddle.net/9wxfY/4

— Prisoner

複数の文字を実装すると、問題が発生します。

— Mathew MacLean

素晴らしい場所だ@MathewMacLean Lettering.JSがでてくる。

— 先のとがった

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 2014年

43

別のCSSのみのソリューション（ただし、レター固有の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>

スニペットを展開

— MStrutt
ソース

38

限定的なCSSおよびjQueryソリューション

このソリューションがどれほどエレガントであるかはわかりませんが、次のようにすべてを正確に半分にします：http : //jsfiddle.net/9wxfY/11/

そうでなければ、私はあなたのための素晴らしいソリューションを作成しました...あなたがする必要があるすべてはあなたのHTMLのためにこれを持っていることです：

2016年6月13日現在の最新かつ正確な編集をご覧ください：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>

スニペットを展開

— Adjit
ソース

これには他の人が持っているのと同じ問題があります。これは、複数のキャラクターでやろうとすると乱雑になっていきます。

— Mathew MacLean 2014年

@MathewMacLean私は知っています:(それも見ました。今それで作業しています

— Adjit

@MathewMacLeanが修正しましたが、JQueryがどれほどクリーンであるかはわかりません。見てみましょう

— Adjit 2014年

@MathewMacLeanは、次のようなソリューションを使用できるもののWebkitバージョンに追加します。jsfiddle.net

— wLkVt

@MathewMacLeanスクリプトのエラーを修正しました。エラーの理由は、文字の幅ではなく、最初の要素の幅を常に使用していたためです。

— Adjit 2016年

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/

このコードをクローバーしてあらゆる種類の興味深いことを行うことができます-これは私の同僚であり、昨夜私が思いついた実装の1つにすぎません。

— サムトレメイン
ソース

27

background-clip: textサポートを利用するWebKit専用の優れたソリューション：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;
}

— サンドロパガノッティ
ソース

24

短いテキストの場合、このようなものはどうですか？

JavaScriptで文字を繰り返し、ループで何かをした場合、長いテキストでも機能します。とにかく、結果は次のようなものです：

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/

いくつかのメモ：

私がこれを行った主な理由は、自分自身をテストして、実際にOPに意味のある答えを提供しながら、キャラクターの半分をスタイリングできるかどうかを確認することでした。
これは理想的または最もスケーラブルなソリューションではなく、ここの人々によって提案されたソリューションは「現実世界」のシナリオにははるかに優れていることを私は知っています。
私が作成したCSSコードは、頭に浮かんだ最初の考えと、問題に対する私自身の個人的なアプローチに基づいています。
私の解決策は、X、A、O、Mなどの対称文字でのみ機能します。** B、C、F、Kまたは小文字のような非対称文字では機能しません。
**ただし、このアプローチでは、非対称の文字を持つ非常に興味深い「形状」が作成されます。XをKに、またはCSSのhやpのような小文字に変更してみてください。

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

これは、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で見る

— なめらかなオタク
ソース

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>

スニペットを展開

— GSB
ソース

5

ちょうど歴史の記録のために！

5〜6年前の自分の仕事の解決策、Gradextを思いついた（純粋なJavaScriptと純粋なCSS、依存関係なし）です。

技術的な説明では、次のような要素を作成できます。

<span>A</span>

テキストにグラデーションを作成する場合は、複数のレイヤーを作成する必要があります。それぞれ個別に着色され、作成されたスペクトルはグラデーション効果を示します。

たとえば、これをaの中にある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>

そして、あなたはこのパターンを長い間、そして長い段落についても続けることができます。

だが！

テキストに垂直方向のグラデーション効果を作成する場合はどうでしょうか？

次に、役立つかもしれない別の解決策があります。詳しく説明します。

<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年8月：]私はイラン出身なので、Github はそのリポジトリのgithub-pagesデモを削除しました！ここではソースコードのみが利用可能です ...

— mrReiha
ソース

キャラクターの半分にCSSを適用することは可能ですか？

プラグインとしてGitHubに！

デモ | Zipをダウンロード | Half-Style.com（GitHubにリダイレクト）

パート1：基本的なソリューション

パート2：高度なソリューション-左右の独立したパーツ

パート3：ミックスマッチと改善

-水平ハーフパーツ

テキストシャドウなし：

各半分のテキストシャドウの独立性：

-垂直1/3パーツ

テキストシャドウなし：

1/3のパーツごとに独立してテキストシャドウを作成できる可能性：

-横型1/3パーツ

テキストシャドウなし：

1/3のパーツごとに独立してテキストシャドウを作成できる可能性：

-@KevinGrangerによるハーフスタイルの改善

-@SamTremaineによるHalfStyleの PeelingStyleの改善

パート4：生産準備

GitHubでプロジェクトを表示する-プロジェクトのWebサイトを表示します。（したがって、すべての分割スタイルを確認できます）

使用法

マークアップ

カスタマイズ

JSFiddleデモ

だが！

繰り返しますが、！