2816

내가 찾고있는 것 :

캐릭터의 절반 을 스타일링하는 방법 . (이 경우 글자의 반은 투명합니다)

내가 현재 검색하고 시도한 것 (행운 없음) :

문자 / 글자의 절반 스타일링 방법
CSS 또는 JavaScript를 사용하여 문자 스타일링
캐릭터의 50 %에 CSS 적용

아래는 내가 얻으려고하는 예입니다.

이를 위해 CSS 또는 JavaScript 솔루션이 있습니까, 아니면 이미지를 사용해야합니까? 이 텍스트는 동적으로 생성되므로 이미지 경로를 사용하지 않는 것이 좋습니다.

최신 정보:

많은 사람들이 왜 캐릭터의 절반을 스타일링하고 싶은지 물었으므로 이것이 바로 그 이유입니다. 우리 도시는 최근 새로운 "브랜드"를 정의하기 위해 25 만 달러를 소비했습니다. 이 로고 는 그들이 만들어 낸 것입니다. 많은 사람들이 단순성과 창의성 부족에 대해 불평했으며 계속 그렇게하고 있습니다. 저의 목표는이 웹 사이트 를 농담으로 만드는 것이 었습니다 . '할리팩스'를 입력하면 무슨 뜻인지 알 수 있습니다.

javascript html css

— 매튜 맥린
소스

1

의견은 긴 토론을위한 것이 아닙니다. 이 대화는 채팅 으로 이동 되었습니다 .

— Yvette

6

그들은 왜 CSS를 사용하고 SVG 나 이미지 편집기를 사용하지 않는지 알고 싶기 때문에 "왜"를 묻고있었습니다. 로고에 대한 비즈니스 결정과는 아무런 관련이 없습니다. 로고 링크에 따라 왜 X를 자르지 않았습니까?

— user9993

1

이 로고에 대해 불평 할 수 없습니다. 피의 등대보다 훨씬 낫다.

— Parapluie

@Parapluie 동의해야합니다!

— Mathew MacLean

2938

이제 플러그인으로 GitHub에!

여기에 이미지 설명을 입력하십시오 자유롭게 포크하고 개선하십시오.

데모 | Zip 다운로드 | Half-Style.com (GitHub로 리디렉션)

단일 문자를위한 순수 CSS
텍스트 또는 여러 문자의 자동화에 사용되는 JavaScript
시각 장애인을위한 스크린 리더를위한 텍스트 접근성 유지

1 부 : 기본 솔루션

텍스트의 하프 스타일

데모 : http://jsfiddle.net/arbel/pd9yB/1694/

이것은 모든 동적 텍스트 또는 단일 문자에서 작동하며 모두 자동화됩니다. 대상 텍스트에 클래스를 추가하기 만하면 나머지는 처리됩니다.

또한 맹인 또는 시각 장애인을위한 화면 판독기의 경우 원본 텍스트의 접근성이 유지됩니다.

단일 문자에 대한 설명 :

순수한 CSS. .halfStyle반 스타일을 원하는 문자가 포함 된 각 요소에 클래스 를 적용 하기 만하면됩니다.

캐릭터를 포함하는 각 span 요소에 대해 here 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 의 필링 스타일 개선

halfStyle-샘 트레 마인

코드 스 니펫 표시

// 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요소 에서 data 속성 을 사용 하고 필요한 모든 사항을 자동으로 변경합니다.

따라서 텍스트 추가 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 데모 )

— 아벨
소스

의견은 긴 토론을위한 것이 아닙니다. 이 대화는 채팅 으로 이동 되었습니다 .

— Yvette

7

이것은 매우 시원합니다. 이 기술은 단어 줄 바꿈, 공백 및 문자 간격 CSS를 깨뜨립니다.

— Andrew Ensley

2

우리가 WordArt : D

— rovyko

487

여기에 이미지 설명을 입력하십시오

플러그인 개발을 마쳤으며 누구나 사용할 수 있습니다! 당신이 그것을 즐기시기 바랍니다.

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/ 에 대한 자세한 정보 .

— 라즈 반 B.
소스

현재 귀하의 솔루션은 여러 문자를 구현하는 것이 가장 쉽지만 100 %는 아닙니다.

— Mathew MacLean

@MathewMacLean emisfera가 답을 가져야합니다.

— mttdbrd

3

이것은 최신 바이올린에서도 나타나는 텍스트 줄 바꿈에 문제가 있습니다. 한 문자가 줄 바꿈되면 본질적으로 두 문자로 나뉩니다. 그러나 사소한 수정이되어야합니다.

— BoltClock

16

jquery-latest.min.js에 의존하지 마십시오. jQuery가 업데이트되고 플러그인이 최신 플러그인과 작동하지 않으면 경고없이 사이트가 중단 될 수 있습니다. 대신 : 특정 버전을 사용하고 업데이트 할 때 호환성을 확인하십시오.

— Niels Bom

2

jquery-latest.js 사용을 제안하지 않도록 답변을 편집하고 싶을 수도 있습니다. @NielsBom이 언급했듯이 과거에는 업데이트 될 때 사이트가 손상 될 수 있습니다. 2014 년 7 월부터는 그렇게하지 않지만 버전 1.11.1에서 잠겨 있기 때문에 다시 업데이트되지 않기 때문입니다 .

— 쓸모없는 코드

237

편집 (oct 2017) : background-clip또는 background-image options모든 주요 브라우저에서 지원됩니다 : CanIUse

예, 하나의 문자와 CSS만으로이 작업을 수행 할 수 있습니다.

그러나 웹킷 및 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에 컨텐츠를 추가한다는 점에 유의하십시오. 붙여 넣기 문제.

— DA.
소스

34

IE 만 죽고 Firefox가 Webkit을 사용하기 시작하면 @MathewMacLean 작업이 훨씬 쉬워집니다. :)

— DA.

48

WebKit은 IE6 / IE7 수준의 기괴한 버그 (Safari와 Chrome이 최신 웹의 IE6이라고 말할 수 있음)를 렌더링하고 특별한 이유없이 표준에서 벗어난 방식으로 동작하는 역사를 가지고 있습니다. IE는 버전 9부터 훨씬 나아 졌으므로 고대 버전은 이미 죽어야하지만 최신 버전에 대한 증오의 이유는 없습니다. 그리고 왜 사람들이 왜 WebKit / Blink 단일 문화의 아이디어를지지하는지 알지 못합니다 (여기의 의견은 농담이지만, 그것을 진지하게 믿는 사람들에 대해 들었습니다).

— BoltClock

3

그것은 background-clip: text매우 훌륭하고 text-decoration-background레벨 4 모듈에 대해 고려해야합니다 (또는 이와 비슷한 것 ).

— BoltClock

2

네, 깜박임 / 웹킷이 죽고 현대의 IE + FF 렌더링 엔진이 다른 방법보다 살아남 으면 더 행복 할 것입니다. 크롬의 나머지 부분이 좋지 않다는 말은 아닙니다. 오늘날의 렌더링은 거의 최악입니다.

— Eamon Nerbonne

2

이것은 위의 해키 라이브러리보다 훨씬 깨끗한 솔루션입니다. 요즘에는 텍스트 그라디언트를 사용할 수 있기 때문에 허용되는 답변이어야합니다.

— mystrdat

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

— 밴달
소스

이것은 깔끔하지만, 유일한 문제는 컨텐츠가 동적이라는 것입니다.

— Mathew MacLean

사용 된 글꼴에 따라 결과가 다릅니다. 또한 너비를 계산하는 데 문제가있는 것 같습니다.

— j08691

@MathewMacLean 흠, 당신의 컨텐츠는 한 캐릭터 일까? 그렇지 않은 경우 각 문자가 동일한 분할 색상 효과 또는 특정 효과 (예 : 첫 번째) 만 갖기를 원하십니까?

— wvandaal

1

@MathewMacLean 당신은 줄 바꿈을 달성하기 위해 JS에서 간단한 루프 함수를 작성할 수 있습니다. 지금 내 대답에 추가하고 있습니다.

— wvandaal

1

@MathewMacLean 텍스트는 어디에서 왔습니까? wvandaal이 맞습니다. 텍스트를 직접 감쌀 수 있습니다.

— mttdbrd

96

그것은 관련이 없을 수도 있지만 아닐 수도 있지만 언젠가는 같은 일을하지만 수평으로하는 jQuery 함수를 만들었습니다.

나는 "스트라이프"라고 불렀습니다. 'stripe'+ 'text'데모 : http://cdpn.io/FcIBg

나는 이것이 어떤 문제의 해결책이라고 말하지는 않지만 이미 문자의 절반에 CSS를 적용하려고했지만 수평 적으로 아이디어는 동일합니다. 구현은 끔찍할 수도 있지만 작동합니다.

아, 그리고 가장 중요한, 나는 그것을 만드는 재미가 있었다!

여기에 이미지 설명을 입력하십시오

— LukyVj
소스

2

@Luky Vj :이 계정은 귀하의 계정입니까? 모든 게시물을 단일 계정으로 통합하여 자신의 게시물을 수정하려는로드 블록이 발생하지 않도록 할 수 있습니다.

— BoltClock

예, 사실, 나는 처음으로 내 첫 번째 계정으로 게시했습니다. 그리고 나는 이미지를 추가해야했고, 이미지를 게시 할만큼 인기가 없었습니다.하지만 당신은 옳습니다. 가능한 빨리 수정하겠습니다. !

— LukyVj

1

@LukyVj : 다음 지침에 따라 계정을 병합 할 수 있습니다. stackoverflow.com/help/merging-accounts

— BoltClock

1

@LukyVj 나는 추가하여 기능을 업데이트 pointer-events:none에 &:nth-child(2)- &:nth-child(5). 이렇게하면 텍스트를 한 번만 강조 표시 할 수 있으며 한 부만 얻을 수 있습니다. 당신은 여기에서 볼 수 있습니다 codepen.io/anon/pen/upLaj

— 매튜 맥클레인

74

이것에 관심이 있다면 Lucas Bebber의 Glitch는 매우 유사하고 멋진 효과입니다.

여기에 이미지 설명을 입력하십시오

다음과 같은 간단한 SASS Mixin을 사용하여 생성

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

Chris Coyer의 CSS 트릭 과 Lucas 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

BTW, 0.5빨간색 정지에도 사용할 수 있습니다 .

— 칫솔

62

내가 얻을 수있는 가장 가까운 :

$(function(){
  $('span').width($('span').width()/2);
  $('span:nth-child(2)').css('text-indent', -$('span').width());
});

body{
  font-family: arial;
}
span{
  display: inline-block;
  overflow: hidden;
}
span:nth-child(2){
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>X</span><span>X</span>

스 니펫 확장

데모 : http://jsfiddle.net/9wxfY/2/

하나의 범위 만 사용하는 버전은 다음과 같습니다. http://jsfiddle.net/9wxfY/4/

— 죄인
소스

1

$('span').width()찾은 첫 번째 범위의 너비 만 반환합니다. 그것은 당신이 각 쌍에 대해 한 일이어야합니다. 나에게 아이디어를 제공합니다 ...

— Pointy

이것은 jsfiddle.net/9WWsd에있는 epascarello의 예제와 매우 유사합니다. 내가 그에게 말했듯이, 당신의 모범은 올바른 방향으로 나아가는 단계이지만 더 큰 규모로 사용하는 것은 악몽 일 것입니다.

— Mathew MacLean

@MathewMacLean, 나는 그것을 보지 못했습니다. 왜 악몽일까요? 어떻습니까 : jsfiddle.net/9wxfY/4

— 죄수

둘 이상의 문자를 구현하려고하면 문제가 발생합니다.

— Mathew MacLean

@MathewMacLean 멋진 Lettering.JS 가 나오는 곳입니다.

— Pointy

53

여기에 이미지 설명을 입력하십시오

@Arbel의 솔루션으로 방금 연주했습니다.

var textToHalfStyle = $('.textToHalfStyle').text();
var textToHalfStyleChars = textToHalfStyle.split('');
$('.textToHalfStyle').html('');
$.each(textToHalfStyleChars, function(i,v){
    $('.textToHalfStyle').append('<span class="halfStyle" data-content="' + v + '">' + v + '</span>');
});

body{
    background-color: black;
}
.textToHalfStyle{
    display:block;
    margin: 200px 0 0 0;
    text-align:center;
}
.halfStyle {
    font-family: 'Libre Baskerville', serif;
    position:relative;
    display:inline-block;
    width:1;
    font-size:70px;
    color: black;
    overflow:hidden;
    white-space: pre;
    text-shadow: 1px 2px 0 white;
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<span class="textToHalfStyle">Dr. Jekyll and M. Hide</span>

스 니펫 확장

— 선적
소스

4

@Arbel 솔루션으로 방금 연주 Arbel 솔루션과의 차이점은 무엇입니까? 일부 코드 만 복사하여 붙여 넣거나 개선했는지 확인하기가 어렵습니다.

— AL

43

다른 CSS 전용 솔루션 (문자 별 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>

스 니펫 확장

— 아지트
소스

이것은 다른 사람들과 같은 문제를 가지고 있습니다. 둘 이상의 캐릭터로 시도하면 혼란스러워지기 시작합니다.

— Mathew MacLean

@MathewMacLean 알아요 :( 이것도 보았습니다. 지금 작업 중

— Adjit

@MathewMacLean이 해결했지만 JQuery가 얼마나 깨끗한 지 확실하지 않습니다. 보세요

— Adjit

@MathewMacLean 다음과 같은 솔루션을 사용할 수있는 웹킷 버전에 추가 : jsfiddle.net/wLkVt/1

— Adjit

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

이 코드를 crowbar하여 모든 종류의 흥미로운 일을 수행 할 수 있습니다. 이것은 내 동료 일뿐이며 지난 밤에 생각해 냈습니다.

— 샘 트레 마인
소스

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 또는 소문자와 같은 비대칭 문자에서는 작동하지 않습니다.
** 그러나이 방법은 비대칭 문자로 매우 흥미로운 '모양'을 만듭니다. CSS에서 X를 K 또는 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 참조

— 매끄러운 eek
소스

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 (순수한 자바 스크립트와 순수 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 데모를 제거했습니다 ! 여기서는 소스 코드 만 사용할 수 있습니다 .

— 레 이하
소스

문자의 절반에 CSS를 적용 할 수 있습니까?

이제 플러그인으로 GitHub에!

데모 | Zip 다운로드 | Half-Style.com (GitHub로 리디렉션)

1 부 : 기본 솔루션

2 부 : 고급 솔루션-독립적 인 좌우 부품

3 부 : 믹스 매치 및 개선

수평 절반 부품

텍스트 그림자가없는 경우 :

각 절반 부분에 대한 텍스트 그림자의 가능성 :

-세로 1/3 부분

텍스트 그림자가없는 경우 :

1/3 부분마다 독립적으로 텍스트 그림자 가능성 :

수평 1/3 부

텍스트 그림자가없는 경우 :

1/3 부분마다 독립적으로 텍스트 그림자 가능성 :

-KevinGranger의 하프 스타일 개선

@SamTremaine에 의한 HalfStyle 의 필링 스타일 개선

파트 4 : 생산 준비

GitHub에서 프로젝트보기 – 프로젝트 웹 사이트 보기 . (따라서 모든 분할 스타일을 볼 수 있습니다)

용법

마크 업

커스터마이징

JSFiddle 데모

그러나!

그러나 다시!