কোনও অক্ষরের অর্ধে সিএসএস প্রয়োগ করা কি সম্ভব?

Question

আমি যা খুঁজছি:

একটি চরিত্রের এক HALF স্টাইল করার একটি উপায় A (এক্ষেত্রে অর্ধেক চিঠি স্বচ্ছ হচ্ছে)

আমি বর্তমানে যা অনুসন্ধান করেছি এবং চেষ্টা করেছি (কোনও ভাগ্য ছাড়াই):

• অক্ষর / অক্ষরের অর্ধেক স্টাইল করার পদ্ধতিগুলি
• সিএসএস বা জাভাস্ক্রিপ্ট সহ একটি চরিত্রের স্টাইলিং অংশ
• একটি অক্ষরের 50% সিএসএস প্রয়োগ করুন

নীচে আমি কী অর্জন করার চেষ্টা করছি তার একটি উদাহরণ দেওয়া হল।

এটির জন্য কি কোনও সিএসএস বা জাভাস্ক্রিপ্ট সমাধান বিদ্যমান, বা আমি কি চিত্রগুলি অবলম্বন করতে যাচ্ছি? আমি চিত্রের পথে না যেতে পছন্দ করব কারণ এই পাঠ্যটি গতিশীলভাবে উত্পন্ন হবে।

---

হালনাগাদ:

যেহেতু অনেকেই জিজ্ঞাসা করেছেন যে আমি কেন কখনও কোনও চরিত্রের অর্ধেকটি স্টাইল করতে চাই, এ কারণেই। আমার শহর সম্প্রতি নিজের জন্য একটি নতুন "ব্র্যান্ড" সংজ্ঞায়িত করতে $ 250,000 ব্যয় করেছে। এই লোগোটি তারা যা নিয়ে আসে। অনেকে সরলতা এবং সৃজনশীলতার অভাব সম্পর্কে অভিযোগ করেছেন এবং তা চালিয়ে যান। আমার লক্ষ্য ছিল এই ওয়েবসাইটটি একটি রসিকতা হিসাবে উপস্থিত করা। 'হ্যালিফ্যাক্স' টাইপ করুন এবং আপনি কী বলতে চাইছেন তা আপনি দেখতে পাবেন।

Comments

মন্তব্যগুলি বর্ধিত আলোচনার জন্য নয়; এই কথোপকথন চ্যাটে সরানো হয়েছে ।

— Yvette

তারা "কেন" জিজ্ঞাসা করছিল কারণ তারা জানতে চেয়েছিল যে আপনি কেন সিএসএস ব্যবহার করবেন এবং এসভিজি বা কোনও চিত্র সম্পাদক ব্যবহার করবেন না। তাদের লোগো সম্পর্কে ব্যবসায়ের সিদ্ধান্ত নিয়ে কিছুই করার নেই। তাদের লোগোতে আপনার লিঙ্ক অনুসারে, আপনি কেবল এক্স ক্রপ করেননি কেন?

— ব্যবহারকারী 9993

আমি এই লোগো সম্পর্কে অভিযোগ করতে পারি না। রক্তাক্ত বাতিঘরটির থেকে অনেক ভাল।

— প্যারাপলুই

@ প্যারাপ্লুয়ি আমাকে একমত হতে হবে!

— ম্যাথিউ ম্যাকলিয়ান

Answer 1

প্লাগিন হিসাবে এখন গিটহাবে!

কাঁটাচামচ এবং উন্নত নির্দ্বিধায়।

ডেমো | ডাউনলোড জিপ | হাফ-স্টাইল ডটকম (গিটহাবের পুনঃনির্দেশ)

---

• একটি একক চরিত্রের জন্য খালি সিএসএস
• পাঠ্য বা একাধিক অক্ষর জুড়ে অটোমেশনের জন্য জাভাস্ক্রিপ্ট ব্যবহৃত হয়েছে
• অন্ধ বা দৃষ্টি প্রতিবন্ধীদের স্ক্রিন পাঠকদের জন্য পাঠ্য অ্যাক্সেসযোগ্যতা সংরক্ষণ করে

পর্ব 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>

( জেএসফিডাল ডেমো )

---

পার্ট 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>

( জেএসফিডাল ডেমো )

---

---

পার্ট 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>

( জেএসফিডাল ডেমো )

---

---

-উক্ষীয় 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>

( জেএসফিডাল ডেমো )

---

---

-অক্ষমতাণীয় 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>

( জেএসফিডাল ডেমো )

---

---

-হ্যালফস্টাইল উন্নতি @ কেভিন গ্র্যাঞ্জার দ্বারা

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

( জেএসফিডাল ডেমো )

---

---

@ স্যামট্রেমাইন দ্বারা হাফস্টাইলের পিলিংস্টাইলের উন্নতি

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

( জেএসফিডাল ডেমো এবং সমট্রেমাইন.কম.উইকে )

---

---

অংশ 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>

( জেএসফিডাল ডেমো )

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% নয়।

— ম্যাথিউ ম্যাকলিয়ান

@ ম্যাথিউম্যাকলিন এমিসফিরের উত্তর আছে, তাই না?

— mtdbrd

এটিতে টেক্সট মোড়ানোর ক্ষেত্রে সমস্যা রয়েছে যা সর্বশেষতম ফিডলে প্রদর্শিত হয়। যখন একটি চরিত্র মোড়ানো হয়, এটি মূলত দুটিতে বিভক্ত হয়। যদিও তুচ্ছ ফিক্স হওয়া উচিত।

— বোল্টক্লক

Jquery-latest.min.js এর উপর নির্ভর করবেন না, যদি jQuery আপডেট হয় এবং প্লাগইনটি নতুনের সাথে কাজ না করে তবে এটি সতর্কতা ছাড়াই আপনার সাইটগুলিকে ভাঙ্গতে পারে। পরিবর্তে: একটি নির্দিষ্ট সংস্করণ ব্যবহার করুন এবং আপডেট করার সময় সামঞ্জস্যতা পরীক্ষা করুন।

— নীলস বোম

আপনি jquery-latest.js ব্যবহার না করার পরামর্শ দিতে নিজের উত্তরটি সম্পাদনা করতে চাইতে পারেন। @ নিলস বম যেমন উল্লেখ করেছেন, অতীতে এটি আপডেট করা হলে এটি আপনার সাইটটিকে ভেঙে দিতে পারে। ২০১৪ সালের জুলাই থেকে, এটি এটি করবে না তবে এটি এটি 1.11.1 সংস্করণে লক করা আছে এবং এটি আর কখনও আপডেট হবে না।

— অকেজো কোড

Answer 3

সম্পাদনা (oct 2017): background-clipবা বরং background-image optionsএখন প্রতিটি বড় ব্রাউজার দ্বারা সমর্থিত: CanIUse

হ্যাঁ, আপনি কেবল একটি অক্ষর এবং কেবল সিএসএস দিয়ে এটি করতে পারেন।

কেবল ওয়েবকিট (এবং ক্রোম), যদিও:

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>

দৃশ্যত, দুটি অক্ষর ব্যবহার করে এমন সমস্ত উদাহরণ (এটি জেএস, সিএসএস সিউডো উপাদান বা কেবল এইচটিএমএল এর মাধ্যমে হওয়া) সূক্ষ্ম দেখায় তবে মনে রাখবেন যে সমস্ত ডিওমে এমন সামগ্রী যুক্ত করে যা অ্যাক্সেসযোগ্যতার কারণ হতে পারে - পাশাপাশি পাঠ্য নির্বাচন / কাট / পেস্ট সমস্যা।

Comments

@ ম্যাথিউম্যাকলিন আমাদের কাজগুলি এত সহজ হতে পারে যদি কেবল আইই মারা যায় এবং ফায়ারফক্স ওয়েবকিট ব্যবহার শুরু করে। :)

— ডিএ

ওয়েবকিটের কাছে প্রায়শই আইআই / / আইই 7 স্তরের উদ্ভট বাঙ্গালগুলির ইতিহাস রয়েছে (আপনি এমনকি বলতে পারেন যে সাফারি এবং ক্রোম আধুনিক ওয়েবের আই 6)), এবং কোনও নির্দিষ্ট কারণ ছাড়াই মান থেকে বিচ্যুত হয়ে এমন আচরণ করে ving আইই সংস্করণ 9 এর থেকে অনেক ভাল হয়েছে, সুতরাং প্রাচীন সংস্করণগুলি ইতিমধ্যে মারা যাওয়ার উচিত ছিল, তবে এর সাম্প্রতিক সংস্করণগুলির জন্য ঘৃণার কোনও কারণ আমি দেখতে পাচ্ছি না। এবং আমি অবশ্যই দেখতে পাচ্ছি না কেন লোকেরা ওয়েবকিট / ব্লিঙ্ক একচেটিয়া সংস্কৃতির ধারণাকে সমর্থন করে (এখানে মন্তব্যগুলি সম্ভবত ঠাট্টা-বিদ্রূপের মধ্যে রয়েছে, তবে আমি শুনেছি যারা গুরুতরভাবে এটি বিশ্বাস করে)।

— BoltClock

যা বলা হচ্ছে, background-clip: textদুর্দান্ত দুর্দান্ত এবং তাদের এটি (বা এর মতো কিছু text-decoration-background) স্তর 4 মডিউলটির জন্য বিবেচনা করা উচিত ।

— বোলটলক

হ্যাঁ, ব্লিঙ্ক / ওয়েবকিট মারা গেলে এবং আধুনিক IE এর + এফএফ রেন্ডারিং ইঞ্জিনগুলি অন্য চারপাশের চেয়ে বেঁচে থাকলে আমি আরও খুশি হব। যেটি বলার অপেক্ষা রাখে না যে বাকী ক্রোমটি খুব ভাল নয়, কেবল এটিই এর রেন্ডারিং আজকাল গুচ্ছের সবচেয়ে খারাপ।

— ইমন নের্বোন

এটি উপরের হ্যাকি লাইব্রেরিগুলির তুলনায় অনেক পরিষ্কার সমাধান, এটি একটি গ্রহণযোগ্য উত্তর হওয়া উচিত কারণ আজকাল পাঠ্য গ্রেডিয়েন্টগুলি ব্যবহারযোগ্য।

— mystrdat

Answer 4

---

জেএসফিডাল ডেমো

আমরা এটি কেবল সিএসএস সিউডো নির্বাচক ব্যবহার করে করব!

এই কৌশলটি গতিশীল উত্পাদিত সামগ্রী এবং বিভিন্ন ফন্টের আকার এবং প্রস্থের সাথে কাজ করবে।

এইচটিএমএল:

<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

@ ম্যাথিউম্যাকলিন হুম, আপনার সামগ্রীগুলি কি কেবল একটি চরিত্র হতে পারে? যদি তা না হয় তবে আপনি কি প্রতিটি চরিত্রের একই বিভক্ত রঙের প্রভাব বা কেবল নির্দিষ্ট কিছু (যেমন প্রথম) দেখতে চান?

— ওয়াভান্ডাল

@ ম্যাথিউম্যাকলিন আপনি মোড়কের কাজটি সম্পন্ন করতে JS এ একটি সাধারণ লুপ ফাংশন লিখতে পারেন। আমি এখন এটি আমার উত্তরে যুক্ত করছি।

— wvandaal

@ ম্যাথিউম্যাকলিন পাঠ্যটি কোথা থেকে আসছে? ডাব্লুওয়ানডাল ঠিক আছে, আপনি নিজেই টেক্সট গুটিয়ে রাখতে পারেন।

— mtdbrd

Answer 5

এটি অপ্রাসঙ্গিক হতে পারে, নাও হতে পারে তবে কিছু আগে আগে আমি একটি jQuery ফাংশন তৈরি করেছি যা একই কাজ করে তবে অনুভূমিকভাবে।

আমি এটিকে "স্ট্রিপপেক্স" বলেছি 'স্ট্রিপেক্স' + 'পাঠ্যের' জন্য, ডেমো: http://cdpn.io/FcIBg

আমি বলছি না এটি কোনও সমস্যার সমাধান, তবে আমি ইতিমধ্যে একটি চরিত্রের অর্ধেকের জন্য সিএসএস প্রয়োগ করার চেষ্টা করেছি, তবে অনুভূমিকভাবে, সুতরাং ধারণাটি একই, উপলব্ধিটি ভয়াবহ হতে পারে, তবে এটি কার্যকর হয়।

আহ, এবং সবচেয়ে গুরুত্বপূর্ণ, আমি এটি তৈরি করতে মজা পেয়েছিলাম!

Comments

@ লুকি ভিজে: এই অ্যাকাউন্টটি কি আপনার? আপনি আপনার সমস্ত পোস্ট একক অ্যাকাউন্টে একীভূত করতে চাইতে পারেন যাতে আপনি নিজের পোস্ট সম্পাদনা করার চেষ্টা করে রোডব্লকগুলিতে না চলে যান।

— BoltClock

হ্যাঁ, আসলে, আমি প্রথমত আমার পুরানো প্রথম অ্যাকাউন্টটি দিয়ে পোস্ট করেছি .. এবং আমাকে একটি চিত্র যোগ করতে হয়েছিল, এবং আমি আমার চিত্র পোস্ট করার পক্ষে যথেষ্ট জনপ্রিয় ছিলাম না .. তবে আপনি ঠিক বলেছেন, আমি যত তাড়াতাড়ি সম্ভব এটি ঠিক করব !

— LukyVj

: @LukyVj: আপনি আপনার অ্যাকাউন্ট এখানে নির্দেশাবলী অনুসরণ করে মার্জ করতে পারবেন stackoverflow.com/help/merging-accounts

— BoltClock

@LukyVj আমি যোগ করে আপনার ফাংশন আপডেট pointer-events:noneকরার &:nth-child(2)- &:nth-child(5)। এটি এটি তৈরি করে যাতে পাঠ্যটি একবারে হাইলাইট করা যায় এবং আপনি কেবল তার একটি অনুলিপি পান। আপনি এটি এখানে দেখতে পারেন: codepen.io/anon/pen/upLaj

— ম্যাথিউ ম্যাকলিন

Answer 6

যদি আপনি এটিতে আগ্রহী হন, তবে লুকাস বেবারের গ্লিচ একটি খুব অনুরূপ এবং সুপার শীতল প্রভাব:

একটি সাধারণ SASS মিক্সিন ব্যবহার করে তৈরি করা হয়েছে

.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

স্রেফ @ আরবেল সলিউশনের সাথে খেলেছেন আরবেলের সমাধানের সাথে পার্থক্যগুলি কী? আপনি কেবল কিছু কোড অনুলিপি করেছেন বা এটি উন্নত করেছেন কিনা তা দেখতে শক্ত।

— এএল

Answer 10

আর একটি সিএসএস-কেবল সমাধান (যদিও আপনি চিঠি-নির্দিষ্ট সিএসএস লিখতে না চান তবে ডেটা-অ্যাট্রিবিউট প্রয়োজন)। এটি বোর্ড জুড়ে আরও কাজ করে (পরীক্ষিত আইই 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/

সিএসএসের হিসাবে এটি খুব সীমাবদ্ধ ... আপনার কেবল এটি প্রয়োগ করা দরকার :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

এটি অন্যদের যদিও একই সমস্যা আছে। আপনি যখন একাধিক চরিত্রের সাহায্যে এটি করার চেষ্টা করেন এটি অগোছালো হতে শুরু করে।

— ম্যাথিউ ম্যাকলিয়ান

@ ম্যাথিউম্যাকলিন আমি জানি :( তাও দেখেছি। এখন এটি নিয়ে কাজ করছেন

— অদজিৎ

@ ম্যাথিউম্যাকলিন এটি ঠিক করেছে, তবে জিকুয়েরি এখন কতটা পরিষ্কার তা নিশ্চিত নয়। একবার দেখুন

— অদজিৎ

@ ম্যাথিউম্যাকলিন আপনার ওয়েবকিট সংস্করণগুলিতে এমন কিছু যুক্ত করে যা আপনি এই জাতীয় সমাধান ব্যবহার করতে পারেন: jsfiddle.net/wLkVt/1

— অদজিৎ

@ ম্যাথিউম্যাকলিন আমার স্ক্রিপ্টে ত্রুটিটি ঠিক করেছে। ত্রুটির কারণ হ'ল আমি অক্ষরের প্রস্থের পরিবর্তে সর্বদা প্রথম উপাদানটির প্রস্থ গ্রহণ করে যাচ্ছিলাম।

— অদজিৎ

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

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

এফডব্লিউআইডাব্লু, এখানে কেবল সিএসএস দিয়ে আমার কাজটি করা হচ্ছে: http://codepen.io/ricardozea/pen/uFbts/

কয়েকটি নোট:

• আমি এটি করার মূল কারণটি ছিল আমার নিজের পরীক্ষা করা এবং দেখার জন্য যে আমি আসলে ওপিকে একটি অর্থপূর্ণ উত্তর সরবরাহ করার সময় কোনও চরিত্রের অর্ধেকটি স্টাইলিং করতে সক্ষম হয়েছিল কিনা।

• আমি সচেতন যে এটি একটি আদর্শ বা সর্বাধিক মাপের পরিমাণে সমাধান নয় এবং এখানকার লোকেরা প্রস্তাবিত সমাধানগুলি "সত্যিকারের বিশ্বের" পরিস্থিতিগুলির জন্য অনেক ভাল better

• আমি যে সিএসএস কোড তৈরি করেছি তা প্রথম চিন্তাভাবনা যা আমার মনে এসেছিল এবং সমস্যাটি সম্পর্কে আমার নিজের ব্যক্তিগত পদ্ধতির উপর ভিত্তি করে।

• আমার সমাধানটি কেবল এক্স, এ, ও, এম এর মতো প্রতিসম অক্ষরগুলিতে কাজ করে * ** এটি বি, সি, এফ, কে বা লোয়ার কেস অক্ষরের মতো অসম্পূর্ণ চরিত্রগুলিতে কাজ করে না।

• ** যাইহোক, এই পদ্ধতির অসম্পূর্ণ অক্ষরগুলির সাথে খুব আকর্ষণীয় 'আকারগুলি' তৈরি করে। এক্সকে কে কে বা সিএসএসে এইচ বা পি এর মতো লোয়ার কেস লেটারে পরিবর্তন করার চেষ্টা করুন :)

এইচটিএমএল

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

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

এটি কেবল সিএসএস :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>

>> jsFizz দেখুন

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 বছর আগে আমার নিজের কাজের সমাধান নিয়ে এসেছি, যা গ্রেডেক্সট (খাঁটি জাভাস্ক্রিপ্ট এবং খাঁটি CSS, কোনও নির্ভরতা নেই)।

প্রযুক্তিগত ব্যাখ্যা হ'ল আপনি এই জাতীয় উপাদান তৈরি করতে পারেন:

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

এবং আপনি দীর্ঘ সময় এবং দীর্ঘ অনুচ্ছেদের পাশাপাশি এই ধরণটি চালিয়ে যেতে পারেন can

কিন্ত!

আপনি যদি পাঠ্যগুলিতে উল্লম্ব গ্রেডিয়েন্ট এফেক্ট তৈরি করতে চান ?

তারপরে আরও একটি সমাধান রয়েছে যা সহায়ক হতে পারে। আমি বিশদে বর্ণনা করব।

<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()কোনও পদ্ধতি যা কার্সারের অবস্থানের উপর ভিত্তি করে গ্রেডিয়েন্ট শুরু করতে পারে! (দুর্দান্ত এক্সডি শোনাচ্ছে)

এটি সহজেই আমরা পাঠ্যগুলিতে গ্রেডিয়েন্ট (লিনিয়ার বা রেডিয়াল) তৈরি করছি আপনি যদি ধারণাটি পছন্দ করেন বা এটি সম্পর্কে আরও জানতে চান, আপনার সরবরাহিত লিঙ্কগুলি পরীক্ষা করা উচিত।

---

হতে পারে এটি সর্বোত্তম বিকল্প নয়, সম্ভবত এটি করার সর্বোত্তম পারফরম্যান্ট উপায় নয়, তবে এটি আরও ভাল সমাধানের জন্য কিছু লোককে অনুপ্রাণিত করার জন্য উত্তেজনাপূর্ণ এবং আনন্দদায়ক অ্যানিমেশনগুলি তৈরি করার জন্য কিছু জায়গা উন্মুক্ত করবে।

এটি আপনাকে পাঠ্যগুলিতে গ্রেডিয়েন্ট শৈলী ব্যবহার করার অনুমতি দেবে, এটি আইই 8 দ্বারা সমর্থিত!

এখানে আপনি একটি কার্যকরী লাইভ ডেমো খুঁজে পেতে পারেন এবং মূল সংগ্রহস্থলটি এখানে গিটহাব-এও রয়েছে, মুক্ত উত্স এবং কিছু আপডেট পেতে প্রস্তুত (: ডি)

এটি আমার প্রথমবার (হ্যাঁ, 5 বছর পরে, আপনি এটি ঠিক শুনেছেন) ইন্টারনেটে যেকোন জায়গায় এই সংগ্রহস্থলের উল্লেখ করার জন্য, এবং আমি এটি সম্পর্কে আগ্রহী!

---

[আপডেট - 2019 আগস্ট:] গিথুব সেই ভাণ্ডারের গিথুব-পৃষ্ঠাগুলি ডেমো সরিয়ে দিয়েছে কারণ আমি ইরান থেকে এসেছি! কেবলমাত্র উত্স কোডটি এখানে উপলভ্য ...