Câu hỏi Có thể áp dụng CSS cho một nửa số ký tự không?


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

Một cách để tạo kiểu một MỘT NỬA 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 phân 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.

x

Liệu một giải pháp CSS hay JavaScript tồn tại cho điều này, hay tôi sẽ phải sử dụng hình ảnh? Tôi không muốn đi tuyến đường hình ảnh vì văn bản này sẽ kết thúc được tạo động.


CẬP NHẬT:

Vì nhiều người đã hỏi tại sao tôi lại muốn phong cách 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ó. Điều này Logo là những gì họ nghĩ 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à tìm ra điều này trang mạng như một trò đùa. Gõ vào 'Halifax' và bạn sẽ thấy ý tôi là gì. :)


2435
2018-05-09 16:16


gốc


Nhận xét không dành cho thảo luận mở rộng; cuộc hội thoại này đã đã chuyển sang trò chuyện. - Yvette Colomb♦


Các câu trả lời:


Bây giờ trên GitHub như một Plugin!

enter image description here Cảm thấy tự do để ngã ba và cải thiện.

Bản giới thiệu | Tải xuống Zip | Half-Style.com (Chuyển hướng đến GitHub)


  • CSS tinh khiết cho một ký tự đơn
  • JavaScript được sử dụng để tự động hóa trên văn bản hoặc nhiều ký tự
  • Duy trì khả năng truy cập văn bản cho trình đọc màn hình cho người mù hoặc trực quan suy yếu

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

Half Style on text

Bản giới thiệu:  http://jsfiddle.net/arbel/pd9yB/1694/


Điều này hoạt động trên bất kỳ văn bản động nào hoặc một ký tự đơn lẻ và tất cả đều được tự động hóa. Tất cả những gì bạn cần làm là thêm một lớp vào văn bản đích và phần còn lại được chú ý.

Ngoài ra, khả năng truy cập của văn bản gốc được giữ nguyê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 ký tự đơn:

CSS tinh khiết. Tất cả những gì bạn cần làm là áp dụng .halfStyle lớp cho mỗi phần tử chứa ký tự mà bạn muốn được nửa kiểu.

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

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

Chỉ cần thêm textToHalfStyle lớp cho phần tử 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 trình diễn JSFiddle)


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

Half Style on text - advanced - With Text Shadow

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

Mọi thứ đều giống nhau, chỉ CSS nâng cao hơn mới làm được đ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 trình diễn JSFiddle)



Phần 3: Trộn lẫn và cải thiện

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


-Các bộ phận nửa ngang

  • Không có Text Shadow:

    Horizontal Half Parts - No Text Shadow

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

    halfStyle - Horizontal Half Parts - With Text Shadow

// jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
        $el = $(el);
        text = $el.text();
        chars = text.split('');

        // Set the screen-reader text
        $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

        // Reset output for appending
        output = '';

        // Iterate over all chars in the text
        for (i = 0; i < chars.length; i++) {
            // Create a styled element for each character and append to container
            output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
        }

        // Write to DOM only once
        $el.append(output);
    });
});
.halfStyle {
  position: relative;
  display: inline-block;
  font-size: 80px; /* or any font size will work */
  color: transparent; /* hide the base character */
  overflow: hidden;
  white-space: pre; /* to preserve the spaces from collapsing */
}

.halfStyle:before { /* creates the top part */
  display: block;
  z-index: 2;
  position: absolute;
  top: 0;
  height: 50%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  pointer-events: none; /* so the base char is selectable by mouse */
  color: #f00; /* for demo purposes */
  text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}

.halfStyle:after { /* creates the bottom part */
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  height: 100%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  pointer-events: none; /* so the base char is selectable by mouse */
  color: #000; /* for demo purposes */
  text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

(Bản trình diễn JSFiddle)



-Phần 1/3

  • Không có Text Shadow:

    halfStyle - Vertical 1/3 Parts - No Text Shadow

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

    halfStyle - Vertical 1/3 Parts - With Text Shadow

// jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
    $el = $(el);
    text = $el.text();
    chars = text.split('');

    // Set the screen-reader text
    $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

    // Reset output for appending
    output = '';

    // Iterate over all chars in the text
    for (i = 0; i < chars.length; i++) {
        // Create a styled element for each character and append to container
        output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    }

    // Write to DOM only once
    $el.append(output);
  });
});
.halfStyle { /* base char and also the right 1/3 */
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: transparent; /* hide the base character */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #f0f; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

.halfStyle:before { /* creates the left 1/3 */
    display: block;
    z-index: 2;
    position: absolute;
    top: 0;
    width: 33.33%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}

.halfStyle:after { /* creates the middle 1/3 */
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    width: 66.66%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

(Bản trình diễn JSFiddle)



-Các bộ phận ngang 1/3

  • Không có Text Shadow:

    halfStyle - Horizontal 1/3 Parts - No Text Shadow

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

    halfStyle - Horizontal 1/3 Parts - With Text Shadow

// jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
    $el = $(el);
    text = $el.text();
    chars = text.split('');

    // Set the screen-reader text
    $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

    // Reset output for appending
    output = '';

    // Iterate over all chars in the text
    for (i = 0; i < chars.length; i++) {
        // Create a styled element for each character and append to container
        output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    }

    // Write to DOM only once
    $el.append(output);
  });
});
.halfStyle { /* base char and also the bottom 1/3 */
  position: relative;
  display: inline-block;
  font-size: 80px; /* or any font size will work */
  color: transparent;
  overflow: hidden;
  white-space: pre; /* to preserve the spaces from collapsing */
  color: #f0f;
  text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

.halfStyle:before { /* creates the top 1/3 */
  display: block;
  z-index: 2;
  position: absolute;
  top: 0;
  height: 33.33%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  pointer-events: none; /* so the base char is selectable by mouse */
  color: #f00; /* for demo purposes */
  text-shadow: 2px -2px 0px #fa0; /* for demo purposes */
}

.halfStyle:after { /* creates the middle 1/3 */
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  height: 66.66%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  pointer-events: none; /* so the base char is selectable by mouse */
  color: #000; /* for demo purposes */
  text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

(Bản trình diễn JSFiddle)



-HalfStyle Improvement By @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>

(Bản trình diễn JSFiddle)



-PeelingStyle cải thiện HalfStyle bởi @SamTremaine

halfStyle - SamTremaine

// jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
    $el = $(el);
    text = $el.text();
    chars = text.split('');

    // Set the screen-reader text
    $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

    // Reset output for appending
    output = '';

    // Iterate over all chars in the text
    for (i = 0; i < chars.length; i++) {
        // Create a styled element for each character and append to container
        output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    }

    // Write to DOM only once
    $el.append(output);
  });
});
.halfStyle {
    position: relative;
    display: inline-block;
    font-size: 68px;
    color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    white-space: pre;
    transform: rotate(4deg);
    text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
}

.halfStyle:before { /* creates the left part */
    display: block;
    z-index: 1;
    position: absolute;
    top: -0.5px;
    left: -3px;
    width: 100%;
    content: attr(data-content);
    overflow: hidden;
    pointer-events: none;
    color: #FFF;
    transform: rotate(-4deg);
    text-shadow: 0px 0px 1px #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

(Bản trình diễn JSFiddle và hơn thế nữa samtremaine.co.uk)



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

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

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

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

halfStyle - Multiple on Same Page

Ngoài ra các định nghĩa lớp của tập hợp kiểu CSS phù hợp với [-CustomClassName-] một phần được đề cập ở trên và bị xích vào .halfStyle, vì vậy chúng tôi 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 trình diễn JSFiddle)


2650
2018-05-09 16:42



Nhận xét không dành cho thảo luận mở rộng; cuộc hội thoại này đã đã chuyển sang trò chuyện. - Yvette Colomb♦


enter image description here


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

Xem dự án trên GitHub - Xem Kế hoạch Trang mạng. (để bạn có thể thấy tất cả các kiểu tách)

Sử dụng

Trước hết, hãy đảm bảo bạn có jQuery thư viện được bao gồm. Cách tốt nhất để tải phiên bản jQuery mới nhất là cập nhật thẻ head 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ả những gì bạn phải làm là xếp hạng lớp học splitchar , theo sau là kiểu mong muốn cho phần tử bao quanh văn bản của bạn. ví dụ

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

Sau khi tất cả điều này được thực hiện, chỉ cần đảm bảo rằng bạn gọi hàm jQuery trong tệp tài liệu sẵn sàng của bạn như sau:

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

Tùy chỉnh

Để làm cho văn bản trông chính xác như bạn muốn 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ó Splitchar plugin tất cả các thiết lập. Thông tin thêm về nó tại http://razvanbalosin.com/Splitchar.js/.


454
2018-05-09 16:32



Tính đến thời điểm hiện tại, giải pháp của bạn là cách dễ nhất để triển khai cho nhiều ký tự, nhưng vẫn không có 100% ở đó. - Mathew MacLean
Điều này có vấn đề với gói văn bản được trưng bày ngay cả trong fiddle mới nhất. Khi một nhân vật kết thúc tốt đẹp, về cơ bản nó chia thành hai. Nên là một sửa chữa tầm thường, mặc dù. - BoltClock♦
@MathewMacLean Kiểm tra điều này: liên kết :) - Razvan Balosin
Không phụ thuộc vào jquery-latest.min.js, nó có thể làm cho trang web của bạn bị phá vỡ mà không cần cảnh báo nếu jQuery được cập nhật và plugin không hoạt động với phiên bản mới hơn. Thay vào đó: sử dụng một phiên bản cụ thể và kiểm tra khả năng tương thích khi cập nhật. - Niels Bom
Bạn có thể muốn chỉnh sửa câu trả lời của mình để không đề xuất sử dụng jquery-latest.js. Như @NielsBom đã đề cập, trước đây nó có thể phá vỡ trang web của bạn khi nó được cập nhật. Kể từ tháng 7 năm 2014, nó sẽ không làm điều đó nhưng đó là bởi vì nó bị khóa ở phiên bản 1.11.1 và sẽ không bao giờ được cập nhật nữa. - Useless Code


Chỉnh sửa (oct 2017): background-clip hay đúng hơn background-image options 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) chỉ, 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>

Trực quan, tất cả các ví dụ sử dụng hai ký tự (có thể là thông qua JS, các phần tử giả CSS hoặc chỉ HTML) đều tốt, nhưng lưu ý rằng tất cả 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 / dán vấn đề.


200
2018-05-09 16:42



@MathewMacLean công việc của chúng tôi sẽ dễ dàng hơn nhiều nếu chỉ có IE sẽ chết và Firefox bắt đầu sử dụng Webkit. :) - DA.
@DA Chrome không sử dụng webkit nữa: wired.com/2013/04/blink - Matt Harrison
WebKit có lịch sử hiển thị các lỗi gần như là mức IE6 / IE7 kỳ lạ (thậm chí bạn có thể nói rằng Safari và Chrome là IE6 của web hiện đại), và hành xử theo những cách khác với tiêu chuẩn không có lý do cụ thể. IE đã tốt hơn rất nhiều kể từ phiên bản 9, vì vậy trong khi các phiên bản cũ phải chết, tôi không thấy bất kỳ lý do gì cho sự ghét đối với các phiên bản gần đây của nó. Và tôi chắc chắn không thấy lý do tại sao mọi người ủng hộ ý tưởng về độc quyền WebKit / Blink (những bình luận ở đây có lẽ là đáng sợ, nhưng tôi đã nghe về những người nghiêm túc tin tưởng vào nó). - BoltClock♦
Điều đó đang được nói, background-clip: text là siêu tuyệt vời và họ nên xem xét nó (hoặc một cái gì đó tương tự như text-decoration-background) cho mô-đun cấp 4. - BoltClock♦
Vâng, tôi sẽ hạnh phúc hơn nếu blink / webkit qua đời và các công cụ dựng hình hiện đại của IE + FF sống sót theo cách khác. Mà không phải là để nói rằng phần còn lại của chrome là không tốt đẹp, chỉ là rendering của nó là khá nhiều tồi tệ nhất của bó hiện nay. - Eamon Nerbonne


Example


JSFiddle DEMO

Chúng tôi sẽ làm điều đó chỉ bằng cách sử dụng 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 phông chữ khác nhau và độ rộng.

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

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

// Wrap each letter in a span tag and return an HTML string
// that can be used to replace the original text
function wrapString(str) {
  var output = [];
  str.split('').forEach(function(letter) {
    var wrapper = document.createElement('span');
    wrapper.dataset.content = wrapper.innerHTML = letter;

    output.push(wrapper.outerHTML);
  });

  return output.join('');
}

// Replace the original text with the split-color text
window.onload = function() {
    var el  = document.querySelector('.split-color'),
        txt = el.innerHTML;

    el.innerHTML = wrapString(txt);
}

139
2018-05-09 16:33



Điều này là gọn gàng, nhưng vấn đề duy nhất là nội dung sẽ được năng động. - Mathew MacLean
Kết quả khác nhau tùy thuộc vào phông chữ được sử dụng. Cộng với tính toán chiều rộng có vẻ giống như một vấn đề. - j08691
@MathewMacLean bạn có thể viết một hàm vòng lặp đơn giản trong JS để hoàn thành gói. Tôi đang thêm nó vào câu trả lời của tôi ngay bây giờ. - wvandaal
@MathewMacLean Văn bản đến từ đâu? wvandaal là đúng, bạn có thể quấn các văn bản chính mình. - mttdbrd
@MathewMacLean đây là một ví dụ: jsfiddle.net/CL82F/5 - wvandaal


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" Đối với 'sọc' + 'văn bản', demo: http://cdpn.io/FcIBg

Tôi không nói đây là giải pháp của bất kỳ vấn đề nào, nhưng tôi đã cố gắng áp dụng css cho một nửa của một nhân vật, nhưng theo chiều ngang, Vì vậy, ý tưởng là như nhau, 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 đã vui vẻ tạo ra nó!

enter image description here


87
2018-05-13 11:05



@Luky Vj: Đây có phải là tài khoản của bạn không? Bạn có thể muốn hợp nhất tất cả các bài đăng của mình thành một tài khoản duy nhất để bạn không gặp phải các rào chắn cố gắng chỉnh sửa bài đăng của chính mình. - BoltClock♦
Vâng, trên thực tế, tôi đã đăng lần đầu tiên với tài khoản đầu tiên cũ của mình .. Và tôi phải thêm hình ảnh và tôi không đủ phổ biến để đăng hình ảnh của mình .. Nhưng bạn nói đúng, tôi sẽ sửa nó càng sớm càng tốt ! - LukyVj
@ LukyVj: Bạn có thể hợp nhất các tài khoản của mình bằng cách thực hiện theo hướng dẫn tại đây: stackoverflow.com/help/merging-accounts - BoltClock♦
@LukyVj Tôi đã cập nhật chức năng của bạn bằng cách thêm pointer-events:none đến &:nth-child(2) - - &:nth-child(5). Điều này làm cho nó để các văn bản chỉ có thể được đánh dấu một lần và bạn chỉ nhận được một bản sao của nó. Bạn có thể thấy nó ở đây: codepen.io/anon/pen/upLaj - Mathew MacLean


Đây là một triển khai xấu xí trong canvas. Tôi đã thử giải pháp này, nhưng kết quả là tồi tệ hơn tôi mong đợi, vì vậy ở đây nó là anyway.

Canvas example

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

<div>Example Text</div>

$(function(){
    $("div").each(function(){
        var CHARS = $(this).text().split('');
        $(this).html("");
        $.each(CHARS,function(index, char){
            var canvas = $("<canvas />")
                    .css("width", "40px")
                    .css("height", "40px")
                    .get(0);
            $("div").append(canvas);
            var ctx = canvas.getContext("2d");
            var gradient = ctx.createLinearGradient(0, 0, 130, 0);
            gradient.addColorStop("0", "blue");
            gradient.addColorStop("0.5", "blue");
            gradient.addColorStop("0.51", "red");
            gradient.addColorStop("1.0", "red");
            ctx.font = '130pt Calibri';
            ctx.fillStyle = gradient;
            ctx.fillText(char, 10, 130);
        });
    });
});

62
2018-05-09 19:33



BTW, bạn có thể sử dụng 0.5 cho màu đỏ dừng lại, quá. - Toothbrush


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 tuyệt vời và tương tự:

enter image description here

Được tạo bằng cách sử dụng một Mixin SASS đơ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 và Trang Codepen của Lucas Bebber


60
2017-10-01 12:39





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 giới thiệu: http://jsfiddle.net/9wxfY/2/

Heres một phiên bản chỉ sử dụng một khoảng: http://jsfiddle.net/9wxfY/4/


52
2018-05-09 16:28



$('span').width() chỉ trả về chiều rộng của khoảng đầu tiên mà nó tìm thấy; nó phải là một cái gì đó bạn đã làm cho mỗi cặp. Điều đó mang lại cho tôi một ý tưởng ... - Pointy
Điều này khá giống với ví dụ của epascarello được tìm thấy tại jsfiddle.net/9WWsd. Như tôi đã nói với anh ta, ví dụ của bạn là một bước đi đúng hướng, nhưng, nó sẽ là một cơn ác mộng để sử dụng trên một quy mô lớn hơn. - Mathew MacLean
@MathewMacLean, tôi không thấy điều đó. Tại sao nó sẽ là một cơn ác mộng? Còn cái này thì sao: jsfiddle.net/9wxfY/4 - Prisoner
Khi bạn đi để thực hiện nhiều hơn một nhân vật nó gây ra vấn đề. - Mathew MacLean
@MathewMacLean đó là nơi tuyệt vời Lettering.JS vào đi. - Pointy


Enter image description here

Tôi chỉ 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>


49
2018-05-12 20:32



Chỉ cần chơi với giải pháp @Arbel Sự khác biệt với giải pháp của Arbel là gì? Thật khó để xem bạn có chỉ sao chép một số mã hay cải thiện nó hay không. - A.L