2816

สิ่งที่ฉันกำลังมองหา:

วิธีการจัดสไตล์ครึ่งหนึ่งของอักขระ (ในกรณีนี้ตัวอักษรครึ่งตัวโปร่งใส)

สิ่งที่ฉันค้นหาและลองใช้ในปัจจุบัน (โดยไม่มีโชค):

วิธีการใส่สไตล์ครึ่งตัวอักษร / ตัวอักษร
จัดแต่งทรงผมส่วนหนึ่งของตัวละครด้วย CSS หรือ JavaScript
ใช้ CSS กับ 50% ของตัวละคร

ด้านล่างเป็นตัวอย่างของสิ่งที่ฉันพยายามที่จะได้รับ

โซลูชัน CSS หรือ JavaScript มีอยู่สำหรับสิ่งนี้หรือฉันจะต้องใช้รูปภาพ? ฉันไม่ต้องการไปตามเส้นทางของรูปภาพเนื่องจากข้อความนี้จะถูกสร้างขึ้นแบบไดนามิก

UPDATE:

เนื่องจากหลายคนถามว่าทำไมฉันถึงอยากมีสไตล์ครึ่งตัวละครนี่คือเหตุผล เมืองของฉันเพิ่งใช้จ่าย $ 250,000 เพื่อกำหนด "แบรนด์" ใหม่สำหรับตัวเอง โลโก้นี้เป็นสิ่งที่พวกเขาคิดขึ้นมา หลายคนบ่นเกี่ยวกับความเรียบง่ายและขาดความคิดสร้างสรรค์และยังคงทำเช่นนั้นต่อไป เป้าหมายของฉันคือการสร้างเว็บไซต์ตลกขึ้นมา พิมพ์ 'Halifax' แล้วคุณจะเห็นว่าฉันหมายถึงอะไร

javascript html css

— แม็ตธิวคลีน
แหล่งที่มา

1

ความคิดเห็นไม่ได้มีไว้สำหรับการอภิปรายเพิ่มเติม การสนทนานี้ได้รับการย้ายไปแชท

— Yvette

6

พวกเขาถามว่า "ทำไม" เพราะพวกเขาต้องการที่จะรู้ว่าทำไมคุณถึงใช้ CSS และไม่ใช้ SVG หรือโปรแกรมแก้ไขภาพ ไม่มีส่วนเกี่ยวข้องกับการตัดสินใจทางธุรกิจเกี่ยวกับโลโก้ของพวกเขา ตามลิงก์ไปยังโลโก้ของพวกเขาทำไมคุณไม่เพียงแค่ครอบตัด X

— user9993

1

ฉันไม่สามารถบ่นเกี่ยวกับโลโก้นี้ ดีกว่าประภาคารนองเลือดนั่นมาก

— Parapluie

@Parapluie ฉันต้องยอมรับ!

— Mathew MacLean

2938

ตอนนี้ที่ GitHub เป็นปลั๊กอิน!

ป้อนคำอธิบายรูปภาพที่นี่ รู้สึกอิสระที่จะแยกและปรับปรุง

การสาธิต | ดาวน์โหลด Zip | Half-Style.com (เปลี่ยนเส้นทางไปยัง GitHub)

CSS บริสุทธิ์สำหรับตัวละครเดียว
จาวาสคริปต์ที่ใช้สำหรับการทำงานอัตโนมัติข้ามข้อความหรือหลายตัว
รักษาความสามารถในการเข้าถึงข้อความสำหรับโปรแกรมอ่านหน้าจอสำหรับคนตาบอดหรือผู้พิการทางสายตา

ส่วนที่ 1: โซลูชันพื้นฐาน

สไตล์ครึ่งตัวบนข้อความ

ตัวอย่าง: http://jsfiddle.net/arbel/pd9yB/1694/

สิ่งนี้ใช้ได้กับข้อความไดนามิกหรืออักขระเดียวและเป็นแบบอัตโนมัติทั้งหมด สิ่งที่คุณต้องทำคือเพิ่มคลาสบนข้อความเป้าหมายและส่วนที่เหลือจะได้รับการดูแล

นอกจากนี้ความสามารถในการเข้าถึงข้อความต้นฉบับจะถูกสงวนไว้สำหรับโปรแกรมอ่านหน้าจอสำหรับคนตาบอดหรือผู้พิการทางสายตา

คำอธิบายสำหรับอักขระเดียว:

CSS บริสุทธิ์ สิ่งที่คุณต้องทำคือการใช้.halfStyleคลาสกับองค์ประกอบแต่ละตัวที่มีตัวละครที่คุณต้องการให้มีสไตล์ครึ่งตัว

สำหรับแต่ละองค์ประกอบช่วงที่มีตัวละครคุณสามารถสร้างแอตทริบิวต์ข้อมูลเช่นที่นี่data-content="X"และในองค์ประกอบหลอกใช้content: attr(data-content);เพื่อให้.halfStyle:beforeชั้นเรียนจะเป็นแบบไดนามิกและคุณไม่จำเป็นต้องรหัสยากสำหรับทุกกรณี

คำอธิบายสำหรับข้อความใด ๆ :

เพียงแค่เพิ่มtextToHalfStyleคลาสให้กับองค์ประกอบที่มีข้อความ

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

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

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

    // Reset output for appending
    output = '';

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

    // Write to DOM only once
    $el.append(output);
  });
});

.halfStyle {
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: black; /* or transparent, any color */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}

.halfStyle:before {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    color: #f00;
}

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

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

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

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

ขยายตัวอย่างข้อมูล

( การสาธิต JSFiddle )

ส่วนที่ 2: การแก้ปัญหาขั้นสูง - ชิ้นส่วนด้านซ้ายและขวาอิสระ

Half Style on text - ขั้นสูง - ด้วย Text Shadow

ด้วยวิธีนี้คุณสามารถสไตล์ซ้ายและชิ้นส่วนที่เหมาะสมเป็นรายบุคคลและเป็นอิสระ

ทุกอย่างเหมือนกันมีเพียง CSS ขั้นสูงเท่านั้นที่มหัศจรรย์

แสดงตัวอย่างโค้ด

jQuery(function($) {
    var text, chars, $el, i, output;

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

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

        // Reset output for appending
        output = '';

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

        // Write to DOM only once
        $el.append(output);
    });
});

.halfStyle {
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: transparent; /* hide the base character */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}

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

.halfStyle:after { /* creates the right part */
    display: block;
    direction: rtl; /* very important, will make the width to start from right */
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

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

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

ขยายตัวอย่างข้อมูล

( การสาธิต JSFiddle )

ส่วนที่ 3: จับคู่แบบผสมและปรับปรุง

ตอนนี้เรารู้แล้วว่าอะไรเป็นไปได้ลองมาสร้างความแตกต่างกันบ้าง

- ครึ่งแนวนอนแนวนอน

ไม่มีเงาข้อความ:
ความเป็นไปได้ของ Text Shadow สำหรับแต่ละครึ่งโดยอิสระ

แสดงตัวอย่างโค้ด

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

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

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

        // Reset output for appending
        output = '';

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

        // Write to DOM only once
        $el.append(output);
    });
});

.halfStyle {
  position: relative;
  display: inline-block;
  font-size: 80px; /* or any font size will work */
  color: transparent; /* hide the base character */
  overflow: hidden;
  white-space: pre; /* to preserve the spaces from collapsing */
}

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

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

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

ขยายตัวอย่างข้อมูล

( การสาธิต JSFiddle )

- ชิ้นส่วนแนวตั้ง 1/3

ไม่มีเงาข้อความ:
ความเป็นไปได้ของ Text Shadow สำหรับแต่ละส่วน 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 ส่วน

ไม่มีเงาข้อความ:
ความเป็นไปได้ของ Text Shadow สำหรับแต่ละส่วน 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 )

-HalfStyle Improvement โดย @KevinGranger

ครึ่งสไตล์ - 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 )

-PeelingStyle การปรับปรุง HalfStyle โดย@SamTremaine

ครึ่งสไตล์ - SamTremaine

แสดงตัวอย่างโค้ด

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

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

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

    // Reset output for appending
    output = '';

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

    // Write to DOM only once
    $el.append(output);
  });
});

.halfStyle {
    position: relative;
    display: inline-block;
    font-size: 68px;
    color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    white-space: pre;
    transform: rotate(4deg);
    text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
}

.halfStyle:before { /* creates the left part */
    display: block;
    z-index: 1;
    position: absolute;
    top: -0.5px;
    left: -3px;
    width: 100%;
    content: attr(data-content);
    overflow: hidden;
    pointer-events: none;
    color: #FFF;
    transform: rotate(-4deg);
    text-shadow: 0px 0px 1px #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

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

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

ขยายตัวอย่างข้อมูล

( การสาธิต JSFiddleและsamtremaine.co.uk )

ตอนที่ 4: พร้อมสำหรับการผลิต

ชุดสไตล์แบบต่าง ๆ ที่กำหนดเองสามารถใช้กับองค์ประกอบที่ต้องการในหน้าเดียวกัน คุณสามารถกำหนดหลายชุดสไตล์และบอกปลั๊กอินที่จะใช้

ปลั๊กอินใช้ data data data-halfstyle="[-CustomClassName-]"ใน.textToHalfStyleองค์ประกอบเป้าหมายและทำการเปลี่ยนแปลงที่จำเป็นทั้งหมดโดยอัตโนมัติ

ดังนั้นเพียงแค่ในองค์ประกอบที่มีข้อความเพิ่มชั้นเรียนและข้อมูลแอตทริบิวต์textToHalfStyle data-halfstyle="[-CustomClassName-]"ปลั๊กอินจะทำงานที่เหลือ

halfStyle - หลายรายการในหน้าเดียวกัน

นอกจากนี้คำจำกัดความของชุดคลาส CSS สไตล์ตรงกับ[-CustomClassName-]ส่วนที่กล่าวถึงข้างต้นและถูกผูกมัด.halfStyleดังนั้นเราจะมี.halfStyle.[-CustomClassName-]

jQuery(function($) {
    var halfstyle_text, halfstyle_chars, $halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_style;

    // Iterate over all class occurrences
    $('.textToHalfStyle').each(function(idx, halfstyle_el) {
        $halfstyle_el = $(halfstyle_el);
        halfstyle_style = $halfstyle_el.data('halfstyle') || 'hs-base';
        halfstyle_text = $halfstyle_el.text();
        halfstyle_chars = halfstyle_text.split('');

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

        // Reset output for appending
        halfstyle_output = '';

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

        // Write to DOM only once
        $halfstyle_el.append(halfstyle_output);
    });
});

/* start half-style hs-base */

.halfStyle.hs-base {
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #000; /* for demo purposes */
}

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

/* end half-style hs-base */


/* start half-style hs-horizontal-third */

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

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

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

/* end half-style hs-horizontal-third */


/* start half-style hs-PeelingStyle, by user SamTremaine on Stackoverflow.com */

.halfStyle.hs-PeelingStyle {
  position: relative;
  display: inline-block;
  font-size: 68px;
  color: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  white-space: pre;
  transform: rotate(4deg);
  text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
}

.halfStyle.hs-PeelingStyle:before { /* creates the left part */
  display: block;
  z-index: 1;
  position: absolute;
  top: -0.5px;
  left: -3px;
  width: 100%;
  content: attr(data-content);
  overflow: hidden;
  pointer-events: none;
  color: #FFF;
  transform: rotate(-4deg);
  text-shadow: 0px 0px 1px #000;
}

/* end half-style hs-PeelingStyle */


/* start half-style hs-KevinGranger, by user KevinGranger on StackOverflow.com*/

.textToHalfStyle.hs-KevinGranger {
  display: block;
  margin: 200px 0 0 0;
  text-align: center;
}

.halfStyle.hs-KevinGranger {
  font-family: 'Libre Baskerville', serif;
  position: relative;
  display: inline-block;
  width: 1;
  font-size: 70px;
  color: black;
  overflow: hidden;
  white-space: pre;
  text-shadow: 1px 2px 0 white;
}

.halfStyle.hs-KevinGranger:before {
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  width: 50%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  color: white;
}

/* end half-style hs-KevinGranger

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-base">Half-style, please.</span>
</p>
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-horizontal-third">Half-style, please.</span>
</p>
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-PeelingStyle">Half-style, please.</span>
</p>
<p style="background-color:#000;">
    <span class="textToHalfStyle" data-halfstyle="hs-KevinGranger">Half-style, please.</span>
</p>

ขยายตัวอย่างข้อมูล

( การสาธิต JSFiddle )

— Arbel
แหล่งที่มา

ความคิดเห็นไม่ได้มีไว้สำหรับการอภิปรายเพิ่มเติม การสนทนานี้ได้รับการย้ายไปแชท

— Yvette

7

นี่มันเจ๋งมาก เป็นที่น่าสังเกตว่าเทคนิคนี้แบ่งการตัดคำเว้นวรรคและ CSS ระยะห่างอักขระ

— แอนดรูว์ 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/

— รัซวานบี
แหล่งที่มา

ณ ตอนนี้วิธีการแก้ปัญหาของคุณเป็นวิธีที่ง่ายที่สุดสำหรับการใช้งานหลายตัวอักษร แต่ยังไม่ถึง 100%

— Mathew MacLean

@MathewMacLean emisfera ต้องมีคำตอบใช่มั้ย

— mttdbrd

3

ปัญหานี้มีปัญหากับการตัดข้อความที่แสดงแม้ในซอล่าสุด เมื่อตัวละครตัวหนึ่งพันตัวมันก็แยกออกเป็นสองส่วน ควรจะแก้ไขเล็กน้อย

— BoltClock

16

อย่าพึ่งพา jquery-latest.min.js มันสามารถทำให้ไซต์ของคุณแตกโดยไม่มีการเตือนหากมีการอัพเดต jQuery และปลั๊กอินไม่สามารถใช้งานได้กับปลั๊กอินรุ่นใหม่ ใช้เวอร์ชันที่ระบุแทนและตรวจสอบความเข้ากันได้เมื่อทำการอัปเดต

— Niels Bom

2

คุณอาจต้องการแก้ไขคำตอบของคุณเพื่อไม่แนะนำให้ใช้ jquery-latest.js ดังที่ @NielsBom พูดถึงในอดีตมันอาจทำให้ไซต์ของคุณเสียหายเมื่อมีการอัปเดต ตั้งแต่เดือนกรกฎาคม 2014 มันจะไม่ทำอย่างนั้น แต่นั่นเป็นเพราะมันถูกล็อคที่เวอร์ชั่น 1.11.1และจะไม่อัพเดทอีกเลย

— รหัสที่ไร้ประโยชน์

237

แก้ไข (ต.ค. 2560): background-clipหรือมากกว่าbackground-image optionsนั้นรองรับทุกเบราว์เซอร์หลัก: CanIUse

ใช่คุณสามารถทำได้ด้วยตัวละครเพียงตัวเดียวและ CSS เท่านั้น

แม้ว่า Webkit (และ Chrome) เท่านั้น:

http://jsbin.com/rexoyice/1/

h1 {
  display: inline-block;
  margin: 0; /* for demo snippet */
  line-height: 1em; /* for demo snippet */
  font-family: helvetica, arial, sans-serif;
  font-weight: bold;
  font-size: 300px;
  background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h1>X</h1>

ขยายตัวอย่างข้อมูล

ดูตัวอย่างทั้งหมดที่ใช้อักขระสองตัว (ไม่ว่าจะผ่านทาง JS, CSS หลอกองค์ประกอบหรือเพียงแค่ HTML) ดูดี แต่โปรดทราบว่าทั้งหมดเพิ่มเนื้อหาใน DOM ซึ่งอาจทำให้เกิดการเข้าถึง - เช่นเดียวกับการเลือกข้อความ / ตัด / วางปัญหา

— DA
แหล่งที่มา

34

@MathewMacLean งานของเราจะง่ายกว่านี้มากถ้ามีเพียง IE เท่านั้นที่จะตายและ Firefox เริ่มใช้ Webkit :)

— ดา

48

WebKit มีประวัติของการแสดงผลบั๊กที่เกือบจะเป็นระดับ IE6 / IE7 ที่แปลกประหลาด (คุณสามารถพูดได้ว่า Safari และ Chrome เป็น IE6 ของเว็บที่ทันสมัย) และประพฤติตัวในลักษณะที่เบี่ยงเบนจากมาตรฐานโดยไม่มีเหตุผลเฉพาะ IE ดีขึ้นมากตั้งแต่รุ่นที่ 9 ดังนั้นในขณะที่รุ่นโบราณควรจะตายไปแล้วฉันไม่เห็นเหตุผลที่จะเกลียดรุ่นล่าสุด และแน่นอนฉันไม่เห็นว่าทำไมผู้คนถึงสนับสนุนแนวคิดของการเลี้ยงแบบเชิงเดี่ยวของ WebKit / Blink (ความคิดเห็นที่นี่อาจเป็นเรื่องตลก แต่ฉันได้ยินคนที่เชื่อในเรื่องนี้อย่างจริงจัง)

— BoltClock

3

ที่กล่าวว่าbackground-clip: textเป็นสุดยอดและพวกเขาควรพิจารณา (หรือสิ่งที่คล้ายกันtext-decoration-background) สำหรับโมดูลระดับ 4

— BoltClock

2

ใช่ฉันจะมีความสุขมากขึ้นถ้ากะพริบ / webkit เสียชีวิตและเอ็นจิ้นการแสดงผล + FF ของ IE รุ่นใหม่รอดชีวิตมากกว่าวิธีอื่น ๆ ซึ่งไม่ได้บอกว่าส่วนที่เหลือของโครเมี่ยมไม่ดีเพียงแค่การเรนเดอร์มันค่อนข้างแย่ที่สุดในทุกวันนี้

— Eamon Nerbonne

2

นี่เป็นวิธีที่สะอาดกว่าไลบรารีแฮ็กข้างต้นควรเป็นคำตอบที่ยอมรับได้เนื่องจากการไล่ระดับสีข้อความใช้งานได้ทุกวันนี้

— mystrdat

160

ตัวอย่าง

JSFiddle DEMO

เราจะใช้ CSS ตัวเลือกหลอก!

เทคนิคนี้จะทำงานกับเนื้อหาที่สร้างขึ้นแบบไดนามิกและขนาดตัวอักษรและความกว้างที่แตกต่างกัน

HTML:

<div class='split-color'>Two is better than one.</div>

CSS:

.split-color > span {
    white-space: pre-line;
    position: relative;
    color: #409FBF;
}

.split-color > span:before {
    content: attr(data-content);
    pointer-events: none;  /* Prevents events from targeting pseudo-element */
    position: absolute;
    overflow: hidden;
    color: #264A73;
    width: 50%;
    z-index: 1;
}

ในการตัดสตริงที่สร้างขึ้นแบบไดนามิกคุณสามารถใช้ฟังก์ชันดังนี้:

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

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

  return output.join('');
}

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

    el.innerHTML = wrapString(txt);
}

— wvandaal
แหล่งที่มา

นี่เป็นระเบียบ แต่ปัญหาเดียวคือเนื้อหาจะเป็นแบบไดนามิก

— Mathew MacLean

ผลลัพธ์จะแตกต่างกันไปตามแบบอักษรที่ใช้ บวกกับการคำนวณความกว้างดูเหมือนเป็นปัญหา

— j08691

@MathewMacLean อืมเนื้อหาของคุณจะเป็นตัวเดียวหรือไม่ ถ้าไม่คุณต้องการให้ตัวละครแต่ละตัวมีเอฟเฟกต์สีแบบแยกกันหรือตัวอักษรบางตัวเท่านั้น (เช่นตัวแรก)

— wvandaal

1

@MathewMacLean คุณสามารถเขียนฟังก์ชันลูปง่าย ๆ ใน JS เพื่อให้การตัดคำสำเร็จ ฉันกำลังเพิ่มลงในคำตอบของฉันตอนนี้

— wvandaal

1

@MathewMacLean ข้อความมาจากไหน wvandaal ถูกต้องคุณสามารถพันคำด้วยตัวคุณเองได้

— mttdbrd

96

มันอาจจะไม่เกี่ยวข้องอาจจะไม่ใช่ แต่เมื่อก่อนผมเคยสร้างฟังก์ชั่น jQuery ที่ทำสิ่งเดียวกัน แต่เป็นแนวนอน

ฉันเรียกมันว่า "Strippex" สำหรับ 'แถบ' + 'ข้อความ' ตัวอย่าง: 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

— Mathew MacLean

74

หากคุณสนใจสิ่งนี้แล้ว Glas ของ Lucas Bebber ก็เป็นเอฟเฟกต์ที่คล้ายกันและยอดเยี่ยม

ป้อนคำอธิบายรูปภาพที่นี่

สร้างโดยใช้ SASS Mixin อย่างง่ายเช่น

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

รายละเอียดเพิ่มเติมได้ที่เคล็ดลับ CSS ของ Chris Coyerและเพจ Codepen ของ Lucas Bebber

— รัสกิน
แหล่งที่มา

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>

ขยายตัวอย่างข้อมูล

— Fiambre
แหล่งที่มา

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

นี่คล้ายกับตัวอย่างของ epascarello ที่ jsfiddle.net/9WWsd อย่างที่ฉันบอกเขาตัวอย่างของคุณเป็นขั้นตอนในทิศทางที่ถูกต้อง แต่มันจะเป็นฝันร้ายที่จะใช้ในขนาดที่ใหญ่ขึ้น

— Mathew MacLean

@MathewMacLean ฉันไม่เห็นว่า ทำไมมันถึงเป็นฝันร้าย เกี่ยวกับสิ่งนี้: jsfiddle.net/9wxfY/4

— นักโทษ

เมื่อคุณใช้ตัวละครมากกว่าหนึ่งตัวมันจะทำให้เกิดปัญหา

— Mathew MacLean

@MathewMacLean นั่นคือที่มาของตัวอักษรที่ยอดเยี่ยม 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>

ขยายตัวอย่างข้อมูล

— Shipow
แหล่งที่มา

4

เพิ่งเล่นกับโซลูชัน @Arbelความแตกต่างของโซลูชันของ Arbel คืออะไร เป็นการยากที่จะดูว่าคุณเพียงคัดลอกโค้ดบางส่วนหรือปรับปรุงมัน

— อัล

43

โซลูชัน CSS-only อื่น (แม้ว่าจำเป็นต้องใช้ data-attribute หากคุณไม่ต้องการเขียน 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 นี้:

ดูล่าสุดและแม่นยำแก้ไข ณ วันที่ 6/13/2559: http://jsfiddle.net/9wxfY/43/

สำหรับ CSS มันมีข้อ จำกัด มาก ... คุณจะต้องใช้มันเท่านั้น :nth-child(even)

$(function(){
  var $hc = $('.half-color');
  var str = $hc.text();
  $hc.html("");

  var i = 0;
  var chars;
  var dupText;

  while(i < str.length){
    chars = str[i];
    if(chars == " ") chars = "&nbsp;";
    dupText = "<span>" + chars + "</span>";

    var firstHalf = $(dupText);
    var secondHalf = $(dupText);

    $hc.append(firstHalf)
    $hc.append(secondHalf)

    var width = firstHalf.width()/2;

    firstHalf.width(width);
    secondHalf.css('text-indent', -width);

    i++;
  }
});

.half-color span{
  font-size: 2em;
  display: inline-block;
  overflow: hidden;
}
.half-color span:nth-child(even){
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="half-color">This is a sentence</div>

ขยายตัวอย่างข้อมูล

— Adjit
แหล่งที่มา

สิ่งนี้มีปัญหาแบบเดียวกันกับที่คนอื่นมี สิ่งนี้เริ่มยุ่งเมื่อคุณพยายามทำมันด้วยตัวละครมากกว่าหนึ่งตัว

— Mathew MacLean

@MathewMacLean ฉันรู้ว่า :( เห็นเช่นกันทำงานกับมันตอนนี้

— Adjit

@MathewMacLean แก้ไขแล้ว แต่ไม่แน่ใจว่าการล้าง JQuery ตอนนี้เป็นอย่างไร ลองดู

— Adjit

@MathewMacLean เพิ่มไปยังรุ่น webkit ของสิ่งที่คุณสามารถใช้โซลูชันเช่นนี้: jsfiddle.net/wLkVt/1

— Adjit

@MathewMacLean แก้ไขข้อผิดพลาดในสคริปต์ของฉัน เหตุผลของข้อผิดพลาดคือฉันได้รับความกว้างขององค์ประกอบแรกตลอดเวลาแทนที่จะเป็นความกว้างตัวอักษร

— Adjit

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/

คุณสามารถชะแลงรหัสนี้เพื่อทำสิ่งที่น่าสนใจทุกอย่าง - นี่เป็นเพียงการดำเนินการอย่างหนึ่งของฉันและฉันก็มาด้วยเมื่อคืนนี้

— แซมเทรเมน
แหล่งที่มา

27

โซลูชัน WebKit เดียวที่ดีที่ใช้ประโยชน์จากการbackground-clip: textสนับสนุน: 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;
}

— Sandro Paganotti
แหล่งที่มา

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>

ขยายตัวอย่างข้อมูล

— Alireza
แหล่งที่มา

23

FWIW นี่คือสิ่งที่ฉันทำได้เมื่อใช้ CSS เท่านั้น: http://codepen.io/ricardozea/pen/uFbts/

หมายเหตุหลายประการ:

เหตุผลหลักที่ฉันทำสิ่งนี้คือเพื่อทดสอบตัวเองและดูว่าฉันสามารถจัดแต่งทรงผมได้ครึ่งตัวหรือไม่ในขณะที่ให้คำตอบที่มีความหมายกับ OP
ฉันรู้ว่านี่ไม่ใช่ทางออกที่ดีที่สุดหรือปรับขนาดได้มากที่สุดและโซลูชันที่เสนอโดยผู้คนที่นี่ดีกว่ามากสำหรับสถานการณ์ "โลกแห่งความจริง"
รหัส CSS ที่ฉันสร้างขึ้นนั้นขึ้นอยู่กับความคิดแรกที่อยู่ในใจของฉันและวิธีการส่วนตัวของฉันในการแก้ไขปัญหา
โซลูชันของฉันใช้ได้กับอักขระที่มีความสมมาตรเช่น X, A, O, M ** ไม่สามารถใช้กับอักขระที่ไม่สมมาตรเช่น B, C, F, K หรืออักษรตัวพิมพ์เล็ก
** อย่างไรก็ตามวิธีการนี้สร้าง 'รูปร่าง' ที่น่าสนใจอย่างมากด้วยอักขระที่ไม่สมมาตร ลองเปลี่ยน X ไปยัง K หรือตัวอักษรกรณีที่ต่ำกว่าเช่นHหรือพีในแบบ 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);
  }
}

— Ricardo Zea
แหล่งที่มา

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

— Nic Bell
แหล่งที่มา

16

นี้สามารถทำได้มีเพียง CSS เลือกและ:beforecontent property value

.halfed, .halfed1 {
  float: left;
}

.halfed, .halfed1 {
  font-family: arial;
  font-size: 300px;
  font-weight: bolder;
  width: 200px;
  height: 300px;
  position: relative; /* To help hold the content value within */
  overflow: hidden;
  color: #000;
}




.halfed:before, .halfed1:before   {
  width: 50%; /* How much we'd like to show */
  overflow: hidden; /* Hide what goes beyond our dimension */  
  content: 'X'; /* Halfed character */
  height: 100%;
  position: absolute;
  color: #28507D;

}



/* For Horizontal cut off */ 

.halfed1:before   {
  width: 100%;
  height: 55%;
  
}

<div class="halfed"> X </div>

<div class="halfed1"> X </div>

ขยายตัวอย่างข้อมูล

>> ดูที่ jsFiddle

— เงางาม
แหล่งที่มา

8

คุณสามารถใช้รหัสด้านล่าง ในตัวอย่างนี้ฉันใช้h1แท็กและเพิ่มแอททริบิวdata-title-text="Display Text"ซึ่งจะปรากฏพร้อมข้อความสีที่แตกต่างในh1องค์ประกอบข้อความแท็ก

body {
  text-align: center;
  margin: 0;
}

h1 {
  color: #111;
  font-family: arial;
  position: relative;
  font-family: 'Oswald', sans-serif;
  display: inline-block;
  font-size: 2.5em;
}

h1::after {
  content: attr(data-title-text);
  color: #e5554e;
  position: absolute;
  left: 0;
  top: 0;
  clip: rect(0, 1000px, 30px, 0);
}

<h1 data-title-text="Display Text">Display Text</h1>

ขยายตัวอย่างข้อมูล

— ธนาคารออมสิน
แหล่งที่มา

5

เพียงเพื่อบันทึกในประวัติศาสตร์!

ฉันคิดวิธีแก้ปัญหาสำหรับงานของตัวเองตั้งแต่ 5-6 ปีที่แล้วซึ่งก็คือGradext (จาวาสคริปต์แท้ๆและ CSS บริสุทธิ์ไม่มีการพึ่งพา)

คำอธิบายทางเทคนิคคือคุณสามารถสร้างองค์ประกอบดังนี้:

<span>A</span>

ตอนนี้ถ้าคุณต้องการสร้างการไล่ระดับสีบนข้อความคุณต้องสร้างหลาย ๆ เลเยอร์แต่ละสีที่มีเอกลักษณ์เฉพาะและสเปกตรัมที่สร้างขึ้นจะแสดงผลการไล่ระดับสี

เช่นดูที่นี่เป็นคำ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 สิงหาคม:] Github ลบการสาธิตgithub-pagesของที่เก็บนั้นเพราะฉันมาจากอิหร่าน! มีซอร์สโค้ดเฉพาะที่นี่เท่านั้น ...

— mrReiha
แหล่งที่มา

เป็นไปได้ไหมที่จะใช้ CSS กับอักขระครึ่งตัว?

ตอนนี้ที่ GitHub เป็นปลั๊กอิน!

การสาธิต | ดาวน์โหลด Zip | Half-Style.com (เปลี่ยนเส้นทางไปยัง GitHub)

ส่วนที่ 1: โซลูชันพื้นฐาน

ส่วนที่ 2: การแก้ปัญหาขั้นสูง - ชิ้นส่วนด้านซ้ายและขวาอิสระ

ส่วนที่ 3: จับคู่แบบผสมและปรับปรุง

- ครึ่งแนวนอนแนวนอน

ไม่มีเงาข้อความ:

ความเป็นไปได้ของ Text Shadow สำหรับแต่ละครึ่งโดยอิสระ

- ชิ้นส่วนแนวตั้ง 1/3

ไม่มีเงาข้อความ:

ความเป็นไปได้ของ Text Shadow สำหรับแต่ละส่วน 1/3 อิสระ:

แนวนอน 1/3 ส่วน

ไม่มีเงาข้อความ:

ความเป็นไปได้ของ Text Shadow สำหรับแต่ละส่วน 1/3 อิสระ:

-HalfStyle Improvement โดย @KevinGranger

-PeelingStyle การปรับปรุง HalfStyle โดย@SamTremaine

ตอนที่ 4: พร้อมสำหรับการผลิต

ดูโครงการGitHub - ดูโครงการเว็บไซต์ (เพื่อให้คุณเห็นสไตล์การแยกทั้งหมด)

การใช้

มาร์กอัป

การปรับแต่ง

JSFiddle DEMO

แต่!

อีกครั้ง แต่!