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

Question

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

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

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

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

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

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

---

अपडेट करें:

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

Comments

टिप्पणियाँ विस्तारित चर्चा के लिए नहीं हैं; इस वार्तालाप को बातचीत में स्थानांतरित कर दिया गया है ।

— यवेटे

वे "क्यों" पूछ रहे थे क्योंकि वे जानना चाहते थे कि आप सीएसएस का उपयोग क्यों करेंगे और एसवीजी या एक छवि संपादक का उपयोग नहीं करेंगे। उनके लोगो के बारे में व्यापारिक निर्णयों से कोई लेना देना नहीं है। उनके लोगो के लिए आपके लिंक के अनुसार, आपने सिर्फ एक्स को क्रॉप क्यों नहीं किया?

— user9993

मैं इस लोगो के बारे में शिकायत नहीं कर सकता। तो उस खूनी प्रकाशस्तंभ से बहुत बेहतर।

— परपलू

@Parapluie मुझे सहमत होना होगा!

— मैथ्यू मैकलेन

Answer 1

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

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

डेमो | ज़िप डाउनलोड करें | आधा-tyle.com ( गिटहब पर पुनर्निर्देशन)

---

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

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

डेमो: 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: उन्नत समाधान - स्वतंत्र बाएँ और दाएँ भाग

इस समाधान के साथ आप व्यक्तिगत और स्वतंत्र रूप से बाएं और दाएं हिस्सों को स्टाइल कर सकते हैं ।

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

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

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

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

        // Reset output for appending
        output = '';

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

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

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

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

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

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

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

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

( JSFiddle डेमो )

---

---

भाग 3: मिक्स-मैच और सुधार

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

---

-हार्जरी हाफ पार्ट्स

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

  

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

  

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

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

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

        // Reset output for appending
        output = '';

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

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

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

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

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

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

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

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

( JSFiddle डेमो )

---

---

-विविध 1/3 भाग

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

  

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

  

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

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

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

    // Reset output for appending
    output = '';

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

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

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

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

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

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

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

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

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

( JSFiddle डेमो )

---

---

-Hor क्षैतिज 1/3 भाग

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

  

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

  

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

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

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

    // Reset output for appending
    output = '';

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

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

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

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

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

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

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

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

( JSFiddle डेमो )

---

---

-Hfftytyle सुधार @ केविनग्रेनर द्वारा

// 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 का सुधार

// 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-]"। प्लगइन बाकी काम करेगा।

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

Comments

टिप्पणियाँ विस्तारित चर्चा के लिए नहीं हैं; इस वार्तालाप को बातचीत में स्थानांतरित कर दिया गया है ।

— यवेटे

यह बहुत अच्छा है। यह ध्यान देने योग्य है कि यह तकनीक वर्ड-रैपिंग, व्हाइट-स्पेस और कैरेक्टर-स्पेसिंग सीएसएस को तोड़ती है।

— एंड्रयू एनस्ले

यह देखकर अच्छा लगा कि हम वर्डआर्ट में पूर्ण सर्कल वापस आ गए हैं: डी

— रोवीको

Answer 2

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

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/ पर इसके बारे में अधिक जानकारी ।

Comments

फिलहाल, आपका समाधान कई पात्रों के लिए लागू करना सबसे आसान है, लेकिन अभी भी 100% नहीं है।

— मैथ्यू मैकलीन

@ मैथ्यू मैकलीन एमिफेरा के पास जवाब है, है ना?

— mttdbrd

इससे टेक्स्ट रैपिंग की समस्या होती है जो नवीनतम फ़िडेल में भी प्रदर्शित होती है। जब एक वर्ण लपेटता है, तो यह अनिवार्य रूप से दो में विभाजित हो जाता है। एक तुच्छ निर्धारण होना चाहिए, यद्यपि।

— BoltClock

Jquery-latest.min.js पर निर्भर न हों, यह आपकी साइटों को बिना चेतावनी के तोड़ सकता है यदि jQuery को अपडेट किया जाता है और प्लगइन नए के साथ काम नहीं करता है। इसके बजाय: अपडेट करते समय एक विशिष्ट संस्करण का उपयोग करें और संगतता की जांच करें।

— नील्स

आप jquery-latest.js का उपयोग न करने के लिए अपने उत्तर को संपादित करना चाह सकते हैं। जैसा कि @NielsBom ने उल्लेख किया है, अतीत में यह अपडेट होने पर आपकी साइट को तोड़ सकता है। 2014 के जुलाई से, यह ऐसा नहीं करेगा, लेकिन ऐसा इसलिए है क्योंकि यह संस्करण 1.11.1 पर बंद है और इसे फिर से अपडेट नहीं किया जाएगा।

— बेकार कोड

Answer 3

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

हां, आप ऐसा केवल एक वर्ण और केवल CSS के साथ कर सकते हैं।

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

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

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

<h1>X</h1>

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

Comments

@MathewMacLean हमारी नौकरी इतनी आसान होगी अगर केवल IE की मृत्यु हो जाए और फ़ायरफ़ॉक्स वेबकिट का उपयोग करना शुरू कर दे। :)

— डीए।

WebKit में बग्स को रेंडर करने का इतिहास है जो विचित्र के लगभग IE6 / IE7 स्तर हैं (आप यह भी कह सकते हैं कि Safari और Chrome आधुनिक वेब के IE6 हैं), और बिना किसी विशेष कारण के मानक से विचलन करने वाले तरीकों का व्यवहार करते हैं। संस्करण 9 के बाद से IE बहुत बेहतर रहा है, इसलिए जबकि प्राचीन संस्करणों को पहले से ही मरना चाहिए, मुझे इसके हाल के संस्करणों के लिए नफरत का कोई कारण नहीं दिखता है। और मैं निश्चित रूप से यह नहीं देखता कि लोग एक WebKit / ब्लिंक मोनोकल्चर के विचार का समर्थन क्यों करते हैं (यहाँ टिप्पणियाँ शायद मजाक में हैं, लेकिन मैंने ऐसे लोगों के बारे में सुना है जो इस पर गंभीरता से विश्वास करते हैं)।

— BoltClock

यह कहा जा रहा है, background-clip: textसुपर कमाल है और उन्हें text-decoration-backgroundएक स्तर 4 मॉड्यूल के लिए इस पर विचार करना चाहिए (या ऐसा ही कुछ )।

— BoltClock

यदि ब्लिंक / वेबकिट की मृत्यु हो गई और आधुनिक IE का + FF रेंडरिंग इंजन अन्य तरीकों से बच गया, तो मुझे खुशी होगी। यह कहना नहीं है कि बाकी क्रोम अच्छा नहीं है, बस इसका प्रतिपादन आजकल बहुत बुरा है।

— ईमोन नेरबोन

यह हैकी पुस्तकालयों की तुलना में कहीं अधिक क्लीनर समाधान है, एक स्वीकृत जवाब होना चाहिए क्योंकि आजकल पाठ ग्रेडर उपयोग करने योग्य हैं।

— रहस्योदय

Answer 4

---

JSFiddle डेमो

हम इसे केवल CSS छद्म चयनकर्ताओं का उपयोग करके करेंगे!

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

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

Comments

यह साफ-सुथरा है, लेकिन एकमात्र मुद्दा यह है कि सामग्री गतिशील होगी।

— मैथ्यू मैकलीन

उपयोग किए गए फ़ॉन्ट के आधार पर परिणाम भिन्न होते हैं। साथ ही चौड़ाई की गणना एक समस्या की तरह लगती है।

— j08691

@MathewMacLean हम्म, क्या आपकी सामग्री केवल कभी एक वर्ण होगी? यदि नहीं, तो क्या आप चाहते हैं कि प्रत्येक वर्ण समान रूप से विभाजित रंग प्रभाव या केवल कुछ (यानी पहले) हो?

— वंदावल

@MathewMacLean आप रैपिंग को पूरा करने के लिए JS में एक साधारण लूप फ़ंक्शन लिख सकते हैं। मैं इसे अब अपने उत्तर में जोड़ रहा हूं।

— वंदावल

@MathewMacLean पाठ कहाँ से आ रहा है? wvandaal सही है, आप पाठ को स्वयं लपेट सकते हैं।

— mttdbrd

Answer 5

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

मैंने इसे "स्ट्रिपेक्स" फॉर 'स्ट्राइप' + 'टेक्स्ट', डेमो: http://cdpn.io/FcIBg

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

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

Comments

@ लुकी Vj: क्या यह खाता आपका है? आप अपने सभी पदों को एक एकल खाते में समेकित करना चाह सकते हैं ताकि आप अपने स्वयं के पदों को संपादित करने की कोशिशों में बाधा न बनें।

— BoltClock

हाँ, वास्तव में, मैंने सबसे पहले अपने पुराने पहले खाते के साथ पोस्ट किया था .. और मुझे एक छवि जोड़ना था, और मैं अपनी छवि को पोस्ट करने के लिए पर्याप्त लोकप्रिय नहीं था .. लेकिन आप सही हैं, मैं इसे जल्द से जल्द ठीक करूंगा !

— लुक्विज

: @LukyVj: आप अपने खाते यहां निर्देशों का पालन करके विलय कर सकते हैं stackoverflow.com/help/merging-accounts

— BoltClock

@LukyVj मैंने - pointer-events:noneको जोड़कर अपने फ़ंक्शन को अपडेट किया । यह बनाता है ताकि पाठ केवल एक बार हाइलाइट किया जा सके और आपको केवल इसकी एक प्रति मिल सके। आप इसे यहाँ देख सकते हैं: codepen.io/anon/pen/upLaj&:nth-child(2)&:nth-child(5)

— मैथ्यू मैकलीन

Answer 6

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

इस तरह के रूप में एक सरल पास मिश्रण का उपयोग कर बनाया गया

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

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

Answer 7

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

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

Comments

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

— टूथब्रश

Answer 8

निकटतम मैं प्राप्त कर सकता हूं:

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

Comments

$('span').width()अभी जो पहला स्पैन मिला है उसकी चौड़ाई लौटाता है; यह प्रत्येक जोड़ी के लिए आपने कुछ किया होगा। जो मुझे एक विचार देता है ...

— नुकीले

यह काफी हद तक jsfiddle.net/9WWsd में पाए जाने वाले उदाहरण के समान है। जैसा कि मैंने उनसे कहा, आपका उदाहरण सही दिशा में एक कदम है, लेकिन, यह एक बड़े पैमाने पर उपयोग करने के लिए एक बुरा सपना होगा।

— मैथ्यू मैकलीन

@ मैथ्यू मैकलीन, मैंने ऐसा नहीं देखा। यह एक बुरा सपना क्यों होगा? इस बारे में कैसे: jsfiddle.net/9wxfY/4

— कैदी

जब आप एक से अधिक चरित्रों को लागू करने के लिए जाते हैं तो यह समस्याओं का कारण बनता है।

— मैथ्यू मैकलीन

कि के @MathewMacLean जहां शानदार Lettering.JS में आता है।

— नुकीले

Answer 9

मैंने अभी @ अरबेल के समाधान के साथ खेला:

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>

Comments

सिर्फ @Arbel समाधान के साथ खेला जाता है Arbel के समाधान के साथ क्या अंतर हैं? यह देखना मुश्किल है कि क्या आपने केवल किसी कोड को कॉपी-पेस्ट किया है या उसमें सुधार किया है।

— अल

Answer 10

यदि आप पत्र-विशिष्ट CSS लिखना नहीं चाहते हैं, तो एक और CSS-only समाधान (हालांकि डेटा-विशेषता की आवश्यकता है)। यह बोर्ड भर में अधिक काम करता है (आईई 9/10 का परीक्षण किया गया, क्रोम नवीनतम और एफएफ नवीनतम)

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>

Answer 11

सीमित सीएसएस और jQuery समाधान

मुझे यकीन नहीं है कि यह समाधान कितना सुरुचिपूर्ण है, लेकिन यह आधे हिस्से में बिल्कुल कटौती करता है: http://jsfiddle.net/9wxfY/11/

अन्यथा, मैंने आपके लिए एक अच्छा समाधान बनाया है ... आपको बस इतना करना है कि आपके HTML के लिए यह है:

इस सबसे हाल ही में एक नज़र डालें, और सटीक, 6/13/2016 के रूप में संपादित करें: 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>

Comments

यह वही मुद्दे हैं जो दूसरों के पास हैं। जब आप इसे एक से अधिक वर्णों के साथ करने का प्रयास करते हैं, तो यह गड़बड़ हो जाता है।

— मैथ्यू मैकलीन

@ मैथ्यू मैक्लेन मुझे पता है :( देखा कि वह भी अब इस पर काम कर रहा है

— Adjit

@MathewMacLean ने इसे ठीक कर दिया है, लेकिन निश्चित नहीं है कि JQuery अब कितना साफ है।

— जरा

@MathewMacLean आप इस तरह से एक समाधान का उपयोग कर सकते हैं चीजों के वेबकिट संस्करण में जोड़ने: jsfiddle.net/wLkVt/1

— Adjit

@MathewMacLean ने मेरी स्क्रिप्ट में त्रुटि को ठीक किया। त्रुटि का कारण, यह था कि मैं अक्षरों की चौड़ाई के बजाय हर समय बहुत पहले तत्व की चौड़ाई ले रहा था।

— अदिति

Answer 12

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

आप इस कोड को सभी प्रकार की दिलचस्प चीजों में क्राउन कर सकते हैं - यह सिर्फ एक कार्यान्वयन है जो मेरे सहयोगी हैं और मैं कल रात आया था।

Answer 13

एक अच्छा WebKit-only समाधान जो 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;
}

Answer 14

कैसे छोटे पाठ के लिए इस तरह के बारे में कुछ?

यदि आप किसी लूप के साथ कुछ करते हैं तो जावास्क्रिप्ट के साथ वर्णों को दोहराते हुए यह लंबे समय तक पाठ के लिए भी काम कर सकता है। वैसे भी, परिणाम कुछ इस तरह है:

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>

Answer 15

FWIW, यहाँ मेरा यह केवल CSS के साथ कर रहा है पर ले: http://codepen.io/ricardozea/pen/uFts/

कई नोट:

• मुख्य कारण मैंने यह किया कि मैं खुद को परखूं और देखूं कि क्या मैं वास्तव में ओपी को सार्थक उत्तर प्रदान करते हुए किसी पात्र की स्टाइलिंग को आधा कर पा रहा हूं या नहीं।

• मुझे पता है कि यह एक आदर्श या सबसे स्केलेबल समाधान नहीं है और यहां के लोगों द्वारा प्रस्तावित समाधान "वास्तविक दुनिया" परिदृश्यों के लिए बेहतर हैं।

• मेरे द्वारा बनाया गया CSS कोड पहले विचारों पर आधारित है जो मेरे दिमाग में आया था और समस्या के लिए मेरा अपना व्यक्तिगत दृष्टिकोण था।

• मेरा समाधान केवल सममित वर्णों पर काम करता है, जैसे X, A, O, M. ** यह B, C, F, K या कम केस अक्षर जैसे असममित वर्णों पर काम नहीं करता है।

• ** फिर भी, यह दृष्टिकोण असममित वर्णों के साथ बहुत दिलचस्प 'आकार' बनाता है। CSS में h या p की तरह X को K या निचले केस अक्षर में बदलने का प्रयास करें :)

एचटीएमएल

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

एससीएसएस

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

Answer 16

यदि आप चाहें तो आप एसवीजी का उपयोग भी कर सकते हैं:

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

Answer 17

यह सिर्फ CSS :beforeचयनकर्ता और के साथ प्राप्त किया जा सकता है content property value।

.halfed, .halfed1 {
  float: left;
}

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




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

}



/* For Horizontal cut off */ 

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

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

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

>> jsFiddle पर देखें

Answer 18

आप नीचे दिए गए कोड का उपयोग कर सकते हैं। यहाँ इस उदाहरण में मैंने 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>

Answer 19

सिर्फ इतिहास में रिकॉर्ड के लिए!

मैं 5-6 साल पहले से अपने खुद के काम के लिए एक समाधान के साथ आया हूं, जो कि ग्रेडटेक्स्ट (शुद्ध जावास्क्रिप्ट और शुद्ध सीएसएस, कोई निर्भरता नहीं है)।

तकनीकी व्याख्या आप इस तरह से एक तत्व बना सकते हैं:

<span>A</span>

अब यदि आप पाठ पर एक ढाल बनाना चाहते हैं, तो आपको कुछ विशेष परतों को बनाने की आवश्यकता है, प्रत्येक को विशेष रूप से रंगीन और बनाया गया वर्णक्रम प्रभाव को चित्रित करेगा।

उदाहरण के लिए इस पर लोरेम शब्द के अंदर देखो <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 साल बाद, आपने इसे सही सुना है) इंटरनेट पर कहीं भी इस रिपॉजिटरी का उल्लेख करने के लिए, और मैं इसके बारे में उत्साहित हूं!

---

[अपडेट - २०१ ९ अगस्त:] जीथब ने उस भंडार के गिथब-पन्नों के डेमो को हटा दिया क्योंकि मैं ईरान से हूं! केवल स्रोत कोड यहाँ उपलब्ध है ...