Những gì tôi đang tìm kiếm:

Một cách để tạo kiểu cho một HALF của một nhân vật. (Trong trường hợp này, một nửa chữ cái trong suốt)

Những gì tôi hiện đang tìm kiếm và thử (Không có may mắn):

• Phương pháp tạo kiểu một nửa ký tự / chữ cái
• Tạo kiểu cho một nhân vật bằng CSS hoặc JavaScript
• Áp dụng CSS cho 50% ký tự

Dưới đây là một ví dụ về những gì tôi đang cố gắng để có được.

Liệu một giải pháp CSS hoặc JavaScript có tồn tại cho điều này không, hay tôi sẽ phải dùng đến hình ảnh? Tôi không muốn đi theo con đường hình ảnh vì văn bản này cuối cùng sẽ được tạo ra một cách linh hoạt.

CẬP NHẬT:

Vì nhiều người đã hỏi tại sao tôi muốn tạo kiểu cho một nửa nhân vật, đây là lý do tại sao. Thành phố của tôi gần đây đã chi 250.000 đô la để xác định một "thương hiệu" mới cho chính nó. Đây biểu tượng là những gì họ đã đưa ra. Nhiều người đã phàn nàn về sự đơn giản và thiếu sáng tạo và tiếp tục làm như vậy. Mục tiêu của tôi là đến với trang web này như một trò đùa. Nhập vào 'Halifax' và bạn sẽ thấy những gì tôi muốn nói.

Bây giờ trên GitHub là một Plugin!

Hãy ngã ba và cải thiện.

Bản trình diễn | Tải xuống Zip | Half-Style.com (Chuyển hướng đến GitHub)

• CSS thuần cho một ký tự
• JavaScript được sử dụng để tự động hóa trên văn bản hoặc nhiều ký tự
• Giữ gìn khả năng truy cập văn bản cho trình đọc màn hình cho người khiếm thị hoặc khiếm thị

Phần 1: Giải pháp cơ bản

Bản trình diễn: http://jsfiddle.net/arbel/pd9yB/1694/

Điều này hoạt động trên bất kỳ văn bản động, hoặc một ký tự duy nhất, và tất cả đều tự động. Tất cả bạn cần làm là thêm một lớp trên văn bản đích và phần còn lại được chăm sóc.

Ngoài ra, khả năng truy cập của văn bản gốc được bảo tồn cho trình đọc màn hình cho người khiếm thị hoặc khiếm thị.

Giải thích cho một nhân vật duy nhất:

CSS thuần túy. Tất cả những gì bạn cần làm là áp dụng .halfStylelớp cho từng thành phần có chứa ký tự bạn muốn được tạo kiểu một nửa.

Đối với mỗi phần tử span chứa ký tự, bạn có thể tạo một thuộc tính dữ liệu, ví dụ ở đây data-content="X"và trên phần tử giả sử dụng content: attr(data-content);để .halfStyle:beforelớp sẽ động và bạn sẽ không cần phải mã hóa cứng cho mọi trường hợp.

Giải thích cho bất kỳ văn bản:

Đơn giản chỉ cần thêm textToHalfStylelớp vào thành phần có chứa văn bản.

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

( Bản demo của JSFiddle )

Phần 2: Giải pháp nâng cao - Phần bên trái và bên phải độc lập

Với giải pháp này, bạn có thể tạo kiểu cho các phần bên trái và bên phải, riêng lẻ và độc lập .

Mọi thứ đều giống nhau, chỉ có CSS ​​cao cấp hơn mới làm nên điều kỳ diệu.

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>

( Bản demo của JSFiddle )

Phần 3: Kết hợp và cải thiện

Bây giờ chúng ta đã biết những gì có thể, hãy tạo một số biến thể.

Phần nửa ngang

• Không có bóng văn bản:

  

• Khả năng của Shadow Shadow cho mỗi nửa phần độc lập:

  

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

( Bản demo của JSFiddle )

-Phần 1/3 dọc

• Không có bóng văn bản:

  

• Khả năng của Shadow Shadow cho mỗi phần 1/3 một cách độc lập:

  

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

( Bản demo của JSFiddle )

-Phần 1/3

• Không có bóng văn bản:

  

• Khả năng của Shadow Shadow cho mỗi phần 1/3 một cách độc lập:

  

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

( Bản demo của JSFiddle )

-HalfStyle Cải thiện bởi @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>

( Bản demo của JSFiddle )

Cải thiện -PeelingStyle của HalfStyle bởi @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>

( Bản demo của JSFiddle và trên samtremaine.co.uk )

Phần 4: Sẵn sàng cho sản xuất

Có thể sử dụng các bộ kiểu Half-Style khác nhau được tùy chỉnh trên các phần tử mong muốn trên cùng một trang. Bạn có thể xác định nhiều bộ kiểu và cho biết plugin nào sẽ sử dụng.

Plugin sử dụng thuộc tính dữ liệu data-halfstyle="[-CustomClassName-]"trên các .textToHalfStylethành phần đích và tự động thực hiện tất cả các thay đổi cần thiết.

Vì vậy, chỉ cần trên phần tử chứa văn bản thêm textToHalfStylelớp và thuộc tính dữ liệu data-halfstyle="[-CustomClassName-]". Các plugin sẽ làm phần còn lại của công việc.

Ngoài ra, các định nghĩa lớp của bộ kiểu CSS khớp với [-CustomClassName-]phần được đề cập ở trên và được nối kết với nhau .halfStyle, vì vậy chúng ta sẽ có.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>

( Bản demo của JSFiddle )

Tôi vừa hoàn thành việc phát triển plugin và nó có sẵn cho mọi người sử dụng! Hy vọng bạn sẽ thích nó.

Xem dự án trên GitHub - Xem trang web dự án . (để bạn có thể thấy tất cả các kiểu phân chia)

Sử dụng

Trước hết, hãy chắc chắn rằng bạn có jQuerythư viện được bao gồm. Cách tốt nhất để có phiên bản jQuery mới nhất là cập nhật thẻ đầu của bạn với:

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

Sau khi tải xuống các tệp, hãy đảm bảo bạn đưa chúng vào dự án của mình:

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

Đánh dấu

Tất cả bạn phải làm là để sắp xếp lớp splitchar, theo sau là kiểu mong muốn cho thành phần bao bọc văn bản của bạn. ví dụ

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

Sau khi hoàn thành, chỉ cần đảm bảo bạn gọi hàm jQuery trong tệp sẵn sàng tài liệu của bạn như thế này:

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

Tùy chỉnh

Để làm cho văn bản trông chính xác như bạn muốn, tất cả những gì bạn phải làm là áp dụng thiết kế của bạn như thế này:

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

Đó là nó! Bây giờ bạn đã có Splitchartất cả các plugin. Thông tin thêm về nó tại http://razvanbalosin.com/Splitchar.js/ .

Chỉnh sửa (oct 2017): background-cliphay đúng hơn background-image optionslà hiện được hỗ trợ bởi mọi trình duyệt chính: CanIUse

Có, bạn có thể làm điều này chỉ với một ký tự và chỉ CSS.

Webkit (và Chrome), mặc dù:

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>

Về mặt trực quan, tất cả các ví dụ sử dụng hai ký tự (có thể thông qua JS, các phần tử giả CSS hoặc chỉ HTML) đều ổn, nhưng lưu ý rằng tất cả đều thêm nội dung vào DOM có thể gây ra khả năng truy cập - cũng như chọn / cắt văn bản / vấn đề dán.

DEMO

Chúng tôi sẽ làm điều đó bằng cách sử dụng chỉ các bộ chọn giả CSS!

Kỹ thuật này sẽ hoạt động với nội dung được tạo động và kích thước và độ rộng phông chữ khác nhau.

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

Để gói chuỗi được tạo động, bạn có thể sử dụng một hàm như thế này:

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

Nó có thể không liên quan, có thể không, nhưng đôi khi trước đây, tôi đã tạo ra một hàm jQuery làm điều tương tự, nhưng theo chiều ngang.

Tôi đã gọi nó là "Strippex" cho 'sọc' + 'văn bản', bản demo: http://cdpn.io/FcIBg

Tôi không nói rằng đây là giải pháp cho bất kỳ vấn đề nào, nhưng tôi đã cố gắng áp dụng css cho một nửa nhân vật, nhưng theo chiều ngang, Vì vậy, ý tưởng là như vậy, việc thực hiện có thể là khủng khiếp, nhưng nó hoạt động.

Ah, và quan trọng nhất, tôi đã rất vui khi tạo ra nó!

Nếu bạn quan tâm đến điều này, thì Glitch của Lucas Bebber là một hiệu ứng rất giống và cực hay:

Được tạo bằng SASS Mixin đơn giản như

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

Thêm chi tiết tại Thủ thuật CSS của Chris Coyer's và trang Codepen của Lucas Bebber

Đây là một thực hiện xấu xí trong vải. Tôi đã thử giải pháp này, nhưng kết quả tồi tệ hơn tôi mong đợi, vì vậy đây là dù sao đi nữa.

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

Gần nhất tôi có thể nhận được:

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

Bản trình diễn: http://jsfiddle.net/9wxfY/2/

Đây là phiên bản chỉ sử dụng một nhịp: http://jsfiddle.net/9wxfY/4/

Tôi vừa chơi với giải pháp của @ 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>

Một giải pháp khác chỉ dành cho CSS (mặc dù thuộc tính dữ liệu là cần thiết nếu bạn không muốn viết CSS dành riêng cho chữ cái). Công cụ này hoạt động nhiều hơn trên bảng (Đã kiểm tra IE 9/10, Chrome mới nhất & FF mới nhất)

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>

Giải pháp CSS và jQuery hạn chế

Tôi không chắc giải pháp này thanh lịch đến mức nào, nhưng nó cắt giảm mọi thứ chính xác một nửa: http://jsfiddle.net/9wxfY/11/

Mặt khác, tôi đã tạo ra một giải pháp tốt cho bạn ... Tất cả những gì bạn cần làm là có cái này cho HTML của bạn:

Hãy xem bản chỉnh sửa mới nhất và chính xác nhất này kể từ ngày 13 tháng 6 năm 2016: http://jsfiddle.net/9wxfY/43/

Đối với CSS, nó rất hạn chế ... Bạn chỉ cần áp dụng nó cho :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>

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

Bạn có thể sử dụng mã này để thực hiện tất cả các loại điều thú vị - đây chỉ là một triển khai mà cộng sự của tôi và tôi đã nghĩ ra tối qua.

Một giải pháp tốt đẹp chỉ dành cho WebKit tận dụng sự background-clip: texthỗ trợ: 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;
}

Làm thế nào về một cái gì đó như thế này cho văn bản ngắn hơn?

Nó thậm chí có thể hoạt động với văn bản dài hơn nếu bạn làm điều gì đó với một vòng lặp, lặp lại các ký tự bằng JavaScript. Dù sao, kết quả là như thế này:

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>

FWIW, đây là tôi đảm nhận việc này chỉ với CSS: http://codepen.io/ricardozea/pen/uFbts/

Một số lưu ý:

• Lý do chính tôi đã làm điều này là để kiểm tra bản thân và xem liệu tôi có thể hoàn thành một nửa kiểu nhân vật hay không trong khi thực sự cung cấp một câu trả lời có ý nghĩa cho OP.

• Tôi biết rằng đây không phải là một giải pháp lý tưởng hay có khả năng mở rộng nhất và các giải pháp được đề xuất bởi người dân ở đây tốt hơn nhiều cho các kịch bản "thế giới thực".

• Mã CSS mà tôi tạo ra dựa trên những suy nghĩ đầu tiên xuất hiện trong đầu và cách tiếp cận cá nhân của riêng tôi đối với vấn đề.

• Giải pháp của tôi chỉ hoạt động trên các ký tự đối xứng, như X, A, O, M. ** Nó không hoạt động trên các ký tự không đối xứng như B, C, F, K hoặc chữ thường.

• ** TUY NHIÊN, cách tiếp cận này tạo ra các 'hình dạng' rất thú vị với các ký tự không đối xứng. Hãy thử thay đổi X thành K hoặc thành chữ thường như h hoặc p trong CSS :)

HTML

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

SCSS

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

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

Bạn cũng có thể làm điều đó bằng cách sử dụng SVG, nếu bạn muốn:

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

Điều này có thể đạt được chỉ với :beforebộ chọn CSS và 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>

>> Xem trên jsFiddle

Bạn có thể sử dụng mã dưới đây. Ở đây trong ví dụ này tôi đã sử dụng h1thẻ và thêm một thuộc tính data-title-text="Display Text"sẽ xuất hiện với văn bản màu khác nhau trên thành h1phần văn bản thẻ, điều này tạo ra hiệu ứng văn bản nửa màu như trong ví dụ dưới đây

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>

Chỉ cho hồ sơ trong lịch sử!

Tôi đã đưa ra một giải pháp cho công việc của riêng tôi từ 5-6 năm trước, đó là Gradext (javascript thuần và css thuần túy, không phụ thuộc).

Giải thích kỹ thuật là bạn có thể tạo một yếu tố như thế này:

<span>A</span>

Bây giờ nếu bạn muốn tạo một gradient trên văn bản, bạn cần tạo một số lớp, mỗi lớp được tô màu riêng biệt và phổ được tạo sẽ minh họa hiệu ứng gradient.

ví dụ, hãy xem đây là từ lorem bên trong a <span>và sẽ gây ra hiệu ứng gradient ngang ( kiểm tra các ví dụ ):

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

và bạn có thể tiếp tục thực hiện mô hình này trong một thời gian dài và cả đoạn văn dài.

Nhưng!

Điều gì nếu bạn muốn tạo một hiệu ứng gradient dọc trên văn bản?

Sau đó, có một giải pháp khác có thể hữu ích. Tôi sẽ mô tả chi tiết.

Giả sử đầu tiên của chúng tôi <span>một lần nữa. nhưng nội dung không nên là các chữ cái riêng lẻ; các nội dung cần được toàn bộ văn bản, và bây giờ chúng ta sẽ sao chép cùng <span>một lần nữa và một lần nữa (count của nhịp sẽ xác định chất lượng của gradient, khoảng hơn, kết quả tốt hơn, nhưng hiệu suất kém). Có một cái nhìn tại đây:

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

Một lần nữa, nhưng!

Điều gì nếu bạn muốn làm cho các hiệu ứng gradient này di chuyển và tạo một hình ảnh động từ nó?

tốt, có một giải pháp khác cho nó quá. Bạn chắc chắn nên kiểm tra animation: truehoặc thậm chí .hoverable()phương pháp sẽ dẫn đến một gradient để bắt đầu dựa trên vị trí con trỏ! (âm thanh tuyệt vời xD)

đây chỉ đơn giản là cách chúng ta tạo độ dốc (tuyến tính hoặc xuyên tâm) trên văn bản. Nếu bạn thích ý tưởng hoặc muốn biết thêm về nó, bạn nên kiểm tra các liên kết được cung cấp.

Có thể đây không phải là lựa chọn tốt nhất, có thể không phải là cách hiệu quả nhất để làm điều này, nhưng nó sẽ mở ra một không gian để tạo ra những hình ảnh động thú vị và thú vị để truyền cảm hứng cho một số người khác để có giải pháp tốt hơn.

Nó sẽ cho phép bạn sử dụng kiểu gradient trên các văn bản, được hỗ trợ bởi ngay cả IE8!

Tại đây bạn có thể tìm thấy một bản demo trực tiếp hoạt động và kho lưu trữ ban đầu cũng có ở đây trên GitHub, nguồn mở và sẵn sàng nhận một số cập nhật (: D)

Đây là lần đầu tiên của tôi (vâng, sau 5 năm, bạn đã nghe đúng) để đề cập đến kho lưu trữ này ở bất cứ đâu trên Internet và tôi rất vui mừng về điều đó!

[Cập nhật - 2019 tháng 8:] Github đã xóa bản demo trang github của kho lưu trữ đó vì tôi đến từ Iran! Chỉ có mã nguồn có sẵn ở đây ...