सवाल क्या सीएसएस को आधे चरित्र में लागू करना संभव है?


मैं क्या देख रहा हूं:

एक शैली के लिए एक तरीका है आधा एक चरित्र का (इस मामले में, आधा पत्र पारदर्शी है)

जो मैंने वर्तमान में खोजा है और कोशिश की है (बिना किसी किस्मत के):

  • एक अक्षर / पत्र के आधे स्टाइल के लिए तरीके
  • सीएसएस या जावास्क्रिप्ट के साथ एक चरित्र का स्टाइल हिस्सा
  • सीएसएस को एक चरित्र के 50% पर लागू करें

नीचे एक उदाहरण है जो मैं प्राप्त करने की कोशिश कर रहा हूं।

x

क्या इसके लिए कोई सीएसएस या जावास्क्रिप्ट समाधान मौजूद है, या क्या मुझे छवियों का सहारा लेना होगा? मैं छवि मार्ग नहीं जाना पसंद करूंगा क्योंकि यह पाठ गतिशील रूप से उत्पन्न होने वाला होगा।


अद्यतन करें:

चूंकि कई ने पूछा है कि मैं कभी भी चरित्र के आधा शैली क्यों बनाना चाहूंगा, यही कारण है कि। मेरे शहर ने हाल ही में अपने लिए एक नया "ब्रांड" परिभाषित करने के लिए $ 250,000 खर्च किए थे। इस प्रतीक चिन्ह क्या वे साथ आए थे। कई लोगों ने सादगी और रचनात्मकता की कमी के बारे में शिकायत की है और ऐसा करना जारी रखते हैं। मेरा लक्ष्य इस के साथ आना था वेबसाइट एक चुटकुले की तरह। 'हैलिफ़ैक्स' में टाइप करें और आप देखेंगे कि मेरा क्या मतलब है। :)


2435
2018-05-09 16:16


मूल


टिप्पणियां विस्तारित चर्चा के लिए नहीं हैं; यह बातचीत हुई है चैट करने के लिए चले गए। - Yvette Colomb♦


जवाब:


अब एक प्लगइन के रूप में गिटहब पर!

enter image description here कांटा और सुधार करने के लिए स्वतंत्र महसूस करें।

डेमो | ज़िप डाउनलोड करें | Half-Style.com (गिटहब को रीडायरेक्ट करता है)


  • शुद्ध सीएसएस एकल चरित्र के लिए
  • जावास्क्रिप्ट पाठ या एकाधिक वर्णों में स्वचालन के लिए उपयोग किया जाता है
  • अंधे या दृष्टि से स्क्रीन पाठकों के लिए पाठ अभिगम्यता को संरक्षित करता है बिगड़ा हुआ

भाग 1: मूल समाधान

Half Style on text

डेमो:  http://jsfiddle.net/arbel/pd9yB/1694/


यह किसी भी गतिशील पाठ, या एक चरित्र पर काम करता है, और सभी स्वचालित है। आपको बस इतना करना है कि लक्ष्य टेक्स्ट पर एक वर्ग जोड़ें और बाकी की देखभाल की जाती है।

साथ ही, मूल पाठ की पहुंच को अंधेरे या दृष्टिहीन लोगों के लिए स्क्रीन पाठकों के लिए संरक्षित किया जाता है।

एक चरित्र के लिए स्पष्टीकरण:

शुद्ध सीएसएस। आपको बस आवेदन करने की ज़रूरत है .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 - advanced - With Text Shadow

इस समाधान के साथ आप अलग-अलग और स्वतंत्र रूप से बाएं और दाएं हिस्सों को शैलीबद्ध कर सकते हैं

सबकुछ एक जैसा है, केवल अधिक उन्नत सीएसएस जादू करता है।

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: मिक्स-मैच और सुधार करें

अब हम जानते हैं कि क्या संभव है, आइए कुछ बदलाव बनाएं।


-होरिज़ोंटल आधा भाग

  • पाठ छाया के बिना:

    Horizontal Half Parts - No Text Shadow

  • आधा भाग स्वतंत्र रूप से पाठ छाया की संभावना:

    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>

(JSFiddle डेमो)



-वर्तकीय 1/3 भाग

  • पाठ छाया के बिना:

    halfStyle - Vertical 1/3 Parts - No Text Shadow

  • स्वतंत्र रूप से प्रत्येक 1/3 भाग के लिए पाठ छाया की संभावना:

    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>

(JSFiddle डेमो)



-होरिज़ोंटल 1/3 पार्ट्स

  • पाठ छाया के बिना:

    halfStyle - Horizontal 1/3 Parts - No Text Shadow

  • स्वतंत्र रूप से प्रत्येक 1/3 भाग के लिए पाठ छाया की संभावना:

    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>

(JSFiddle डेमो)



@ केविन ग्रेनर द्वारा हाफ स्टाइल सुधार

halfStyle - KevinGranger

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

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

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

    // Reset output for appending
    output = '';

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

    // Write to DOM only once
    $el.append(output);
  });
});
body {
    background-color: black;
}

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

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

.halfStyle:before {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

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

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

(JSFiddle डेमो)



-फेलिंग स्टाइल में आधा स्टाइल का सुधार @SamTremaine

halfStyle - SamTremaine

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

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

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

    // Reset output for appending
    output = '';

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

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

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

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

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

(JSFiddle डेमो और इसपर samtremaine.co.uk)



भाग 4: उत्पादन के लिए तैयार है

अनुकूलित विभिन्न हाफ-स्टाइल स्टाइल-सेट का उपयोग उसी पृष्ठ पर वांछित तत्वों पर किया जा सकता है। आप एकाधिक स्टाइल-सेट को परिभाषित कर सकते हैं और प्लगइन को बता सकते हैं कि किस का उपयोग करना है।

प्लगइन डेटा विशेषता का उपयोग करता है data-halfstyle="[-CustomClassName-]" लक्ष्य पर .textToHalfStyle तत्व और स्वचालित रूप से सभी आवश्यक परिवर्तन करता है।

तो, बस पाठ जोड़ने वाले तत्व पर textToHalfStyle कक्षा और डेटा विशेषता data-halfstyle="[-CustomClassName-]"। प्लगइन बाकी काम करेगा।

halfStyle - Multiple on Same Page

सीएसएस शैली-सेट 'वर्ग परिभाषाएं भी मेल खाते हैं [-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 डेमो)


2650
2018-05-09 16:42



टिप्पणियां विस्तारित चर्चा के लिए नहीं हैं; यह बातचीत हुई है चैट करने के लिए चले गए। - Yvette Colomb♦


enter image description here


मैंने अभी प्लगइन विकसित करना समाप्त कर दिया है और यह हर किसी के लिए उपयोग करने के लिए उपलब्ध है! आशा है आप इसका आनंद लेंगे।

पर परियोजना देखें 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/


454
2018-05-09 16:32



अभी तक, आपका समाधान कई पात्रों के लिए लागू करना सबसे आसान है, लेकिन अभी भी 100% नहीं है। - Mathew MacLean
इसमें टेक्स्ट रैपिंग के साथ समस्याएं हैं जो नवीनतम पहेली में भी प्रदर्शित होती हैं। जब एक चरित्र लपेटता है, तो यह अनिवार्य रूप से दो में विभाजित होता है। हालांकि, एक मामूली फिक्स होना चाहिए। - BoltClock♦
@MathewMacLean इसे देखें: संपर्क :) - Razvan Balosin
Jquery-latest.min.js पर निर्भर न करें, यह jQuery को अपडेट होने पर आपकी साइटें चेतावनी के बिना तोड़ सकती है और प्लगइन नए के साथ काम नहीं करता है। इसके बजाए: एक विशिष्ट संस्करण का उपयोग करें और अद्यतन करते समय संगतता की जांच करें। - Niels Bom
आप jquery-latest.js का उपयोग करने का सुझाव देने के लिए अपना उत्तर संपादित करना चाहेंगे। जैसा कि @NielsBom ने उल्लेख किया है, अतीत में यह अपडेट होने पर आपकी साइट को तोड़ सकता है। जुलाई 2014 से, यह ऐसा नहीं करेगा लेकिन ऐसा इसलिए है यह संस्करण 1.11.1 पर बंद है और फिर कभी अपडेट नहीं किया जाएगा। - Useless Code


संपादित करें (अक्टूबर 2017): background-clip या यों कहें background-image options अब हर प्रमुख ब्राउज़र द्वारा समर्थित हैं: क्या में उपयोग कर सकता हूँ

हां, आप इसे केवल एक चरित्र और केवल सीएसएस के साथ कर सकते हैं।

वेबकिट (और क्रोम) केवल, हालांकि:

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>

दृश्यमान, दो उदाहरणों का उपयोग करने वाले सभी उदाहरण (जेएस, सीएसएस छद्म तत्व, या सिर्फ एचटीएमएल के माध्यम से) ठीक दिखते हैं, लेकिन ध्यान दें कि सभी डोम को सामग्री जोड़ते हैं जो पहुंच का कारण बन सकता है - साथ ही पाठ चयन / कट / मुद्दों को पेस्ट करें।


200
2018-05-09 16:42



@MathewMacLean हमारी नौकरियां बहुत आसान हो जाएंगी यदि केवल आईई मर जाए और फ़ायरफ़ॉक्स ने वेबकिट का उपयोग शुरू किया। :) - DA.
@ डीए क्रोम अब वेबकिट का उपयोग नहीं करता है: wired.com/2013/04/blink - Matt Harrison
वेबकिट में बग को प्रतिपादित करने का इतिहास है जो विचित्र के लगभग आईई 6 / आईई 7 स्तर हैं (आप यह भी कह सकते हैं कि सफारी और क्रोम आधुनिक वेब का आईई 6 हैं), और किसी विशेष कारण के लिए मानक से विचलित होने वाले तरीकों से व्यवहार करते हैं। आईई संस्करण 9 के बाद से काफी बेहतर रहा है, इसलिए प्राचीन संस्करणों को पहले ही मरना चाहिए, मुझे अपने हाल के संस्करणों के लिए घृणा के लिए कोई कारण नहीं दिख रहा है। और मैं निश्चित रूप से नहीं देखता कि क्यों लोग वेबकिट / ब्लिंक मोनोकल्चर के विचार का समर्थन करते हैं (यहां टिप्पणियां शायद झटके में हैं, लेकिन मैंने उन लोगों के बारे में सुना है जो गंभीरता से इसमें विश्वास करते हैं)। - BoltClock♦
ऐसा कहे जाने के बाद, background-clip: text बहुत बढ़िया है और उन्हें इस पर विचार करना चाहिए (या ऐसा कुछ जैसा text-decoration-background) एक स्तर 4 मॉड्यूल के लिए। - BoltClock♦
हाँ, अगर मैं ब्लिंक / वेबकिट की मृत्यु हो गई और आधुनिक आईई के + एफएफ रेंडरिंग इंजन दूसरे तरीके से बच गए तो मैं खुश रहूंगा। जो यह नहीं कहना है कि शेष क्रोम अच्छा नहीं है, सिर्फ यह कि प्रतिपादन आजकल गुच्छा का सबसे खराब है। - Eamon Nerbonne


Example


जेएसफिल्ड डेमो

हम सिर्फ सीएसएस छद्म चयनकर्ताओं का उपयोग करके करेंगे!

यह तकनीक गतिशील रूप से जेनरेट की गई सामग्री और विभिन्न फ़ॉन्ट आकार और चौड़ाई के साथ काम करेगी।

HTML:

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

सीएसएस:

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

139
2018-05-09 16:33



यह साफ है, लेकिन एकमात्र मुद्दा यह है कि सामग्री गतिशील होगी। - Mathew MacLean
परिणाम इस्तेमाल किए गए फ़ॉन्ट के आधार पर भिन्न होते हैं। प्लस चौड़ाई की गणना एक समस्या की तरह लगता है। - j08691
@MathewMacLean आप रैपिंग को पूरा करने के लिए जेएस में एक साधारण लूप फ़ंक्शन लिख सकते हैं। मैं इसे अपने जवाब में जोड़ रहा हूं। - wvandaal
@MathewMacLean पाठ कहां से आ रहा है? wvandaal सही है, आप स्वयं पाठ को लपेट सकते हैं। - mttdbrd
@MathewMacLean यहां एक उदाहरण है: jsfiddle.net/CL82F/5 - wvandaal


यह अप्रासंगिक हो सकता है, शायद नहीं, लेकिन कुछ समय पहले, मैंने एक jQuery फ़ंक्शन बनाया जो एक ही चीज़ करता है, लेकिन क्षैतिज रूप से।

मैंने इसे "स्ट्रिपपेक्स" कहा 'पट्टी' + 'पाठ' के लिए, डेमो: http://cdpn.io/FcIBg

मैं यह नहीं कह रहा हूं कि यह किसी भी समस्या का समाधान है, लेकिन मैंने पहले से ही चरित्र के आधे हिस्से में सीएसएस लागू करने की कोशिश की है, लेकिन क्षैतिज रूप से, तो विचार समान है, अहसास भयानक हो सकता है, लेकिन यह काम करता है।

आह, और सबसे महत्वपूर्ण, मुझे इसे बनाने में मजा आया!

enter image description here


87
2018-05-13 11:05



@ लुकी वीजे: क्या यह खाता आपका है? आप अपनी सभी पोस्ट को एक ही खाते में समेकित करना चाहते हैं ताकि आप अपनी खुद की पोस्ट संपादित करने की कोशिश कर रहे रोडब्लॉक में न आएं। - BoltClock♦
हाँ, असल में, मैंने पहली बार अपने पुराने पहले खाते के साथ पोस्ट किया .. और मुझे एक छवि जोड़नी पड़ी, और मैं अपनी छवि पोस्ट करने के लिए पर्याप्त लोकप्रिय नहीं था .. लेकिन आप सही हैं, मैं जितनी जल्दी हो सके इसे ठीक कर दूंगा ! - LukyVj
@LukyVj: आप यहां दिए गए निर्देशों का पालन करके अपने खाते मर्ज कर सकते हैं: stackoverflow.com/help/merging-accounts - BoltClock♦
@LukyVj मैंने जोड़कर अपना फ़ंक्शन अपडेट किया pointer-events:none सेवा मेरे &:nth-child(2) - &:nth-child(5)। यह ऐसा करता है ताकि पाठ केवल एक बार हाइलाइट किया जा सके और आपको केवल इसकी एक प्रति प्राप्त हो। आप इसे यहां देख सकते हैं: codepen.io/anon/pen/upLaj - Mathew MacLean


यहां कैनवास में एक बदसूरत कार्यान्वयन। मैंने इस समाधान की कोशिश की, लेकिन परिणाम मेरी अपेक्षा से भी बदतर हैं, इसलिए यहां वैसे भी है।

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



बीटीडब्ल्यू, आप इसका उपयोग कर सकते हैं 0.5 लाल रंग के स्टॉप के लिए भी। - Toothbrush


यदि आप इसमें रूचि रखते हैं, तो लुकास बेबर का गड़बड़ एक बहुत ही समान और सुपर कूल प्रभाव है:

enter image description here

एक साधारण SASS Mixin जैसे कि बनाया गया है

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

अधिक जानकारी क्रिस कोयर का सीएसएस ट्रिक्स तथा लुकास बेबर का कोडपेन पेज


60
2017-10-01 12:39