මා සොයන දේ:

චරිතයක එක් අර්ධයක් මෝස්තර කිරීමට ක්‍රමයක් . (මෙම අවස්ථාවේ දී, අකුරෙන් අඩක් විනිවිද පෙනෙන)

මම දැනට සෙවූ සහ උත්සාහ කළ දේ (වාසනාවකින් තොරව):

• අක්ෂර / අකුරෙන් අඩක් මෝස්තර කිරීමේ ක්‍රම
• CSS හෝ JavaScript සමඟ අක්ෂරයක කොටසක් සැකසීම
• අක්ෂරයකින් 50% කට CSS යොදන්න

පහත දැක්වෙන්නේ මා ලබා ගැනීමට උත්සාහ කරන දෙයට උදාහරණයකි.

මේ සඳහා CSS හෝ JavaScript විසඳුමක් තිබේද, නැතහොත් මට රූප වෙත යොමුවිය යුතුද? මෙම පා text ය ගතිකව ජනනය වන බැවින් රූප මාර්ගයට නොයාමට මම කැමැත්තෙමි.

යාවත්කාලීන කිරීම:

චරිතයකින් අඩක් මෝස්තර කිරීමට මට අවශ්‍ය ඇයි කියා බොහෝ දෙනෙක් ඇසූ හෙයින්, මේ නිසා ය. නව "වෙළඳ නාමයක්" නිර්වචනය කිරීම සඳහා මගේ නගරය මෑතකදී ඩොලර් 250,000 ක් වියදම් කර ඇත. මෙම ලාංඡනය ඔවුන් ඉදිරිපත් කළ දෙයයි. නිර්මාණශීලීත්වයේ සරල බව හා lack නතාවය පිළිබඳව බොහෝ අය පැමිණිලි කර ඇති අතර එය දිගටම කරගෙන යයි. මගේ ඉලක්කය වූයේ මෙම වෙබ් අඩවිය විහිළුවක් ලෙස ඉදිරිපත් කිරීමයි. 'හැලිෆැක්ස්' ටයිප් කරන්න, එවිට මා අදහස් කරන දේ ඔබට පෙනෙනු ඇත.

දැන් ප්ලගිනයක් ලෙස GitHub හි!

දෙබලක හා වැඩිදියුණු කිරීමට නිදහස් වන්න.

නිරූපණය | Zip බාගන්න | Half-Style.com (GitHub වෙත හරවා යවයි )

• තනි චරිතයක් සඳහා පිරිසිදු CSS
• පෙළ හෝ බහු අක්ෂර හරහා ස්වයංක්‍රීයකරණය සඳහා ජාවාස්ක්‍රිප්ට් භාවිතා කරයි
• අන්ධ හෝ දෘශ්‍යාබාධිත අය සඳහා තිර පා readers කයන්ට පෙළ ප්‍රවේශවීමේ හැකියාව ආරක්ෂා කරයි

1 වන කොටස: මූලික විසඳුම

නිරූපණය: http://jsfiddle.net/arbel/pd9yB/1694/

මෙය ඕනෑම ගතික පෙළක් හෝ තනි අක්ෂරයක් මත ක්‍රියා කරන අතර සියල්ල ස්වයංක්‍රීය වේ. ඔබ කළ යුත්තේ ඉලක්කගත පෙළට පන්තියක් එක් කිරීම පමණක් වන අතර ඉතිරිය ගැන සැලකිලිමත් වේ.

එසේම, මුල් පෙළට ප්‍රවේශවීමේ හැකියාව අන්ධ හෝ දෘශ්‍යාබාධිතයන් සඳහා තිර පා readers කයින් සඳහා සංරක්ෂණය කර ඇත.

තනි චරිතයක් සඳහා පැහැදිලි කිරීම:

පිරිසිදු CSS. ඔබ කළ යුත්තේ .halfStyleඔබට අඩක් හැඩ ගැන්වීමට අවශ්‍ය චරිතය අඩංගු සෑම අංගයක් සඳහාම පන්තිය යෙදීම පමණි .

චරිතය අඩංගු එක් එක් කාලයක් අංගයක් ලෙස, ඔබ දත්ත විශේෂණය, උදාහරණයක් මෙහි නිර්මාණය කළ හැකි data-content="X", සහ ව්යාජ අංගයක් භාවිතය මත content: attr(data-content);එසේ .halfStyle:beforeපන්ති ගතික කරනු ඇති අතර එවිට ඔබට සෑම අවස්ථාවක අමාරුයි කේතය අවශ්ය නැහැ.

ඕනෑම පෙළක් සඳහා පැහැදිලි කිරීම:

textToHalfStyleපෙළ අඩංගු මූලද්‍රව්‍යයට පන්තිය එක් කරන්න .

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

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

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

    // Reset output for appending
    output = '';

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

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

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

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

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

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

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

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

( JSFiddle නිරූපණය )

2 වන කොටස: උසස් විසඳුම - ස්වාධීන වම් සහ දකුණු කොටස්

මෙම විසඳුම සමඟ ඔබට වම් සහ දකුණු කොටස් තනි තනිව හා ස්වාධීනව මෝස්තර කළ හැකිය .

සෑම දෙයක්ම එක හා සමානයි, මැජික් කරන්නේ වඩා දියුණු CSS පමණි.

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

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

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

        // Reset output for appending
        output = '';

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

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

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

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

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

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

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

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

( JSFiddle නිරූපණය )

3 වන කොටස: මිශ්‍ර-ගැලපීම සහ වැඩි දියුණු කිරීම

හැකි දේ දැන් අපි දනිමු, අපි වෙනස්කම් කිහිපයක් නිර්මාණය කරමු.

තිරස් අර්ධ කොටස්

• පෙළ සෙවනැල්ල නොමැතිව:

  

• එක් එක් අර්ධ කොටස සඳහා ස්වාධීනව පෙළ සෙවන සඳහා ඇති හැකියාව:

  

// 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 නිරූපණය )

තිරස් 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 නිරූපණය )

-හෙල්ෆ්ස්ටයිල් වැඩිදියුණු කිරීම @ කෙවින් ග්‍රැන්ජර් විසිනි

// 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 නිරූපණය )

AmSamTremaine විසින් අර්ධ ශෛලිය වැඩි දියුණු කිරීම

// 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-]". ප්ලගිනය ඉතිරි කාර්යය කරනු ඇත.

CSS ශෛලියේ කට්ටලවල පන්ති අර්ථ දැක්වීම් [-CustomClassName-]ඉහත සඳහන් කොටසට අනුරූප වන අතර එය දම්වැලෙන් බැඳී ඇත .halfStyle, එබැවින් අපට ලැබෙනු ඇත.halfStyle.[-CustomClassName-]

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

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

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

        // Reset output for appending
        halfstyle_output = '';

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

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

/* start half-style hs-base */

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

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

/* end half-style hs-base */


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

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

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

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

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


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

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

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

/* end half-style hs-PeelingStyle */


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

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

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

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

/* end half-style hs-KevinGranger

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

( JSFiddle නිරූපණය )

මම ප්ලගිනය සංවර්ධනය කිරීම අවසන් කර ඇති අතර එය සෑම කෙනෙකුටම භාවිතා කළ හැකිය! ඔබ එය භුක්ති විඳිනු ඇතැයි සිතමි.

මත බලන්න ව්යාපෘතිය 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();

අභිරුචිකරණය කිරීම

පා you ය ඔබට අවශ්‍ය ආකාරයටම පෙනෙන්නට සැලැස්වීම සඳහා, ඔබ කළ යුත්තේ ඔබේ සැලසුම මේ ආකාරයට අදාළ කර ගැනීම පමණි:

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

සංස්කරණය කරන්න (ඔක්තෝබර් 2017): background-clipහෝ ඒ වෙනුවට background-image optionsදැන් සෑම ප්‍රධාන බ්‍රව්සරයකින්ම සහාය ලැබේ: CanIUse

ඔව්, ඔබට මෙය කළ හැක්කේ එක් අක්ෂරයකින් සහ CSS වලින් පමණි.

වෙබ්කිට් (සහ ක්‍රෝම්) පමණි, නමුත්:

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

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

<h1>X</h1>

දෘශ්යමය වශයෙන්, අක්ෂර දෙකක් භාවිතා කරන සියලුම උදාහරණ (එය JS, CSS ව්‍යාජ මූලද්රව්ය හෝ HTML හරහා වේවා) මනාව පෙනේ, නමුත් සියල්ලම DOM වෙත ප්රවේශ වීමට හේතු විය හැකි අන්තර්ගතයන් එකතු කරන බව සලකන්න - මෙන්ම පෙළ තේරීම / කැපීම / ගැටළු අලවන්න.

JSFiddle DEMO

අපි එය කරන්නේ CSS ව්‍යාජ තේරීම් භාවිතා කරමිනි!

මෙම තාක්ෂණය ගතිකව ජනනය කරන ලද අන්තර්ගතයන් සහ විවිධ අකුරු ප්‍රමාණ සහ පළල සමඟ ක්‍රියා කරනු ඇත.

HTML:

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

CSS:

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

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

ගතිකව ජනනය කරන ලද නූල ඔතා ගැනීමට, ඔබට මෙවැනි ශ්‍රිතයක් භාවිතා කළ හැකිය:

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

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

  return output.join('');
}

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

    el.innerHTML = wrapString(txt);
}

එය අදාල නොවේ, සමහර විට නැත, නමුත් කලකට පෙර, මම jQuery ශ්‍රිතයක් නිර්මාණය කළෙමි, එය එකම දේ කරන නමුත් තිරස් අතට.

මම එය "ස්ට්‍රිප්පෙක්ස්" ලෙස හැඳින්වූයේ 'ඉරි' + 'පෙළ' සඳහා, නිරූපණය: http://cdpn.io/FcIBg

මෙය කිසියම් ගැටලුවකට විසඳුම යැයි මම නොකියමි, නමුත් මම දැනටමත් චරිතයකින් අඩකට css යෙදීමට උත්සාහ කළෙමි, නමුත් තිරස් අතට, එබැවින් අදහස එක හා සමානයි, අවබෝධය භයානක විය හැකි නමුත් එය ක්‍රියාත්මක වේ.

අහ්, සහ වඩාත්ම වැදගත්, මම එය නිර්මාණය කිරීම විනෝදයක් විය!

ඔබ මේ ගැන උනන්දුවක් දක්වන්නේ නම්, ලූකස් බෙබර්ගේ ග්ලීච් ඉතා සමාන හා සුපිරි සිසිල් බලපෑමකි:

වැනි සරල SASS Mixin භාවිතයෙන් නිර්මාණය කරන ලදි

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

වැඩි විස්තර ක්‍රිස් කෝයර්ගේ CSS උපක්‍රම සහ ලූකස් බෙබර්ගේ කෝඩපන් පිටුවෙන්

මෙන්න කැන්වස් වල කැත ක්රියාත්මක කිරීම. මම මෙම විසඳුම උත්සාහ කළෙමි, නමුත් ප්‍රති results ල මා බලාපොරොත්තු වූවාට වඩා නරක ය, එබැවින් මෙහි එය කෙසේ හෝ වේ.

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

මට ලබා ගත හැකි සමීපතම:

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

මම දැන් ක්‍රීඩා කළේ @ ආබෙල්ගේ විසඳුම සමඟ:

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>

තවත් CSS පමණක් විසඳුමක් (ඔබට අකුරු විශේෂිත CSS ලිවීමට අවශ්‍ය නැතිනම් දත්ත-ගුණාංගය අවශ්‍ය වුවද). මෙය පුවරුව හරහා වැඩ කරයි (පරීක්ෂා කරන ලද IE 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>

සීමිත CSS සහ 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>

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

ඔබට මෙම කේතය සෑම ආකාරයකම සිත්ගන්නාසුලු දේ කිරීමට බාධා කළ හැකිය - මෙය මගේ සහායකයා වන එක් ක්‍රියාත්මක කිරීමක් පමණක් වන අතර මම ඊයේ රාත්‍රියේ පැමිණියෙමි.

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

කෙටි පෙළ සඳහා මේ වගේ දෙයක් ගැන කුමක් කිව හැකිද?

ඔබ ලූපයක් සමඟ යමක් කළහොත්, ජාවාස්ක්‍රිප්ට් සමඟ අක්ෂර පුනරාවර්තනය කළ හොත් එය දිගු පෙළ සඳහා වැඩ කළ හැකිය. කෙසේ වෙතත්, ප්රති result ලය මේ වගේ දෙයක්:

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>

FWIW, මෙන්න මම මෙය කරන්නේ CSS සමඟ පමණි: http://codepen.io/ricardozea/pen/uFbts/

සටහන් කිහිපයක්:

• මා මෙය කිරීමට ප්‍රධානතම හේතුව වූයේ මා විසින්ම පරීක්‍ෂා කර OP හි අර්ථවත් පිළිතුරක් සපයන අතරම චරිතයකින් අඩක් මෝස්තර කිරීමට මට හැකි වූයේ දැයි බැලීමයි.

• මෙය පරමාදර්ශී හෝ වඩාත්ම පරිමාණ කළ හැකි විසඳුමක් නොවන බව මම දනිමි. මෙහි සිටින ජනතාව විසින් යෝජනා කරනු ලබන විසඳුම් “සැබෑ ලෝකය” සඳහා වඩා හොඳය.

• මා විසින් නිර්මාණය කරන ලද CSS කේතය පදනම් වී ඇත්තේ මගේ මතකයට පැමිණි පළමු සිතුවිලි සහ ගැටලුව පිළිබඳ මගේ පෞද්ගලික ප්‍රවේශය මත ය.

• මගේ විසඳුම ක්‍රියාත්මක වන්නේ X, A, O, M වැනි සමමිතික අක්ෂර මත පමණි. ** එය B, C, F, K වැනි අසමමිතික අක්ෂර හෝ කුඩා අකුරු මත ක්‍රියා නොකරයි.

• ** කෙසේ වෙතත්, මෙම ප්‍රවේශය අසමමිතික අක්ෂර සහිත ඉතා රසවත් 'හැඩතල' නිර්මාණය කරයි. XS එක K ට හෝ CSS හි h හෝ p වැනි කුඩා අකුරකට වෙනස් කිරීමට උත්සාහ කරන්න :)

HTML

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

SCSS

.half-character { 
  display: inline-block;
  font: bold 350px/.8 Arial;
  position: relative;

  &:before, &:after {
    content: 'X'; //Change character here
    display: inline-block;
    width: 50%;
    overflow: hidden;
    color: #7db9e8;
  }
  &:after {
    position: absolute;
    top: 0;
    left: 50%;
    color: #1e5799;
    transform: rotateY(-180deg);
  }
}

ඔබට අවශ්‍ය නම් SVG භාවිතයෙන්ද එය කළ හැකිය:

var title = document.querySelector('h1'),
    text = title.innerHTML,
    svgTemplate = document.querySelector('svg'),
    charStyle = svgTemplate.querySelector('#text');

svgTemplate.style.display = 'block';

var space = 0;

for (var i = 0; i < text.length; i++) {
  var x = charStyle.cloneNode();
  x.textContent = text[i];
  svgTemplate.appendChild(x);
  x.setAttribute('x', space);
  space += x.clientWidth || 15;
}

title.innerHTML = '';
title.appendChild(svgTemplate);

<svg style="display: none; height: 100px; width: 100%" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs id="FooDefs">
        <linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="50%" stop-color="blue" />
            <stop offset="50%" stop-color="red" />
        </linearGradient>
    </defs>
    <text y="50%" id="text" style="font-size: 72px; fill: url(#MyGradient)"></text>
</svg>

<h1>This is not a solution X</h1>

http://codepen.io/nicbell/pen/jGcbq

මෙය හුදෙක් 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 හි බලන්න

ඔබට පහත කේතය භාවිතා කළ හැකිය. මෙන්න මෙම උදාහරණයේ දී මම h1ටැගය භාවිතා කර ඇති data-title-text="Display Text"අතර h1ටැග් පෙළ මූලද්‍රව්‍යය මත විවිධ වර්ණ පෙළ සමඟ දිස්වන ලක්ෂණයක් එකතු කර ඇති අතර එමඟින් පහත දැක්වෙන උදාහරණයේ පෙන්වා ඇති පරිදි අර්ධ වර්ණ ගැන්වූ පෙළක් ලබා දේ.

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

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

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

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

ඉතිහාසයේ වාර්තාවක් සඳහා පමණි!

මම මීට වසර 5-6 කට පෙර සිට මගේම වැඩකටයුතු සඳහා විසඳුමක් ඉදිරිපත් කර ඇත්තෙමි , එය ග්‍රේඩ් ටෙක්ස්ට් (පිරිසිදු ජාවාස්ක්‍රිප්ට් සහ පිරිසිදු සීඑස්එස් , යැපීමක් නැත).

තාක්ෂණික පැහැදිලි කිරීම නම් ඔබට මෙවැනි අංගයක් නිර්මාණය කළ හැකිය:

<span>A</span>

දැන් ඔබට පෙළ මත ශ්‍රේණියක් සෑදීමට අවශ්‍ය නම්, ඔබට බහු ස්ථර කිහිපයක් සෑදිය යුතුය, එක් එක් තනිව වර්ණ ගැන්වූ සහ නිර්මාණය කරන ලද වර්ණාවලිය මඟින් ශ්‍රේණියේ බලපෑම විදහා දක්වනු ඇත.

උදාහරණයක් ලෙස මෙය a හි ඇතුළත ලෝරම් යන වචනය වන අතර <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>

ඔබට මෙම රටාව දීර් time කාලයක් සහ දිගු ඡේදයක් සඳහා දිගටම කරගෙන යා හැකිය.

එහෙත්!

ඔබට පෙළ මත සිරස් ශ්‍රේණියේ බලපෑමක් ඇති කිරීමට අවශ්‍ය නම් කුමක් කළ යුතුද?

එවිට ප්‍රයෝජනවත් විය හැකි තවත් විසඳුමක් තිබේ. මම විස්තරාත්මකව විස්තර කරමි.

<span>නැවතත් අපගේ පළමු උපකල්පනය . නමුත් අන්තර්ගතය තනි තනිව අකුරු නොවිය යුතුය; අන්තර්ගතය මුළු පෙළ විය යුතු අතර, අප දැන් එම කාර්යය පිටපත් කිරීමට යන්නේ <span>නැවත නැවතත් (භාරව ගණන් වැඩි කාලයක්, වඩා හොඳ ප්රතිඵලයක්, නමුත් දුර්වල ක්රියාකාරිත්වය ඔබගේ ඵලය අනුක්රමික ගුණාත්මකභාවය අර්ථ ඇත). මේ දෙස බලන්න:

<span data-i="6" style="color: rgb(81, 165, 39); overflow: hidden; height: 11.2px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="7" style="color: rgb(89, 174, 48); overflow: hidden; height: 12.8px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="8" style="color: rgb(97, 183, 58); overflow: hidden; height: 14.4px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="9" style="color: rgb(105, 192, 68); overflow: hidden; height: 16px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="10" style="color: rgb(113, 201, 78); overflow: hidden; height: 17.6px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>
<span data-i="11" style="color: rgb(121, 210, 88); overflow: hidden; height: 19.2px;">Lorem ipsum dolor sit amet, tincidunt ut laoreet dolore magna aliquam erat volutpat.</span>

නැවතත්, නමුත්!

එයින් පිටතට ගොස් සජීවිකරණයක් නිර්මාණය කිරීමට ඔබට මෙම ප්‍රමිති බලපෑම් කිරීමට අවශ්‍ය නම් කුමක් කළ යුතුද?

හොඳයි, ඒ සඳහා තවත් විසඳුමක් තිබේ. ඔබ අනිවාර්යයෙන්ම පරික්ෂා කර බැලිය යුතුය animation: trueහෝ .hoverable()කර්සරය තත්ත්වය මත පදනම්ව ආරම්භ කිරීමට බෑවුම් කිරීමට මගපාදනු ලබන ක්රමය! (ශබ්දය සිසිල් xD)

මෙය හුදෙක් අපි පෙළ මත ශ්‍රේණි (රේඛීය හෝ රේඩියල්) නිර්මාණය කරන ආකාරයයි. ඔබ අදහසට කැමති නම් හෝ ඒ ගැන වැඩි විස්තර දැන ගැනීමට අවශ්‍ය නම්, ඔබ සබැඳි පරීක්ෂා කළ යුතුය.

සමහර විට මෙය හොඳම විකල්පය නොවිය හැකිය, සමහර විට මෙය කිරීමට හොඳම කාර්ය සාධන ක්‍රමය නොවිය හැකිය, නමුත් වඩා හොඳ විසඳුමක් සඳහා වෙනත් පුද්ගලයින් පෙළඹවීම සඳහා ආකර්ෂණීය හා රසවත් සජීවිකරණ නිර්මාණය කිරීමට එය යම් ඉඩක් විවෘත කරනු ඇත.

එය ඔබට පෙළ මත ශ්‍රේණියේ ශෛලිය භාවිතා කිරීමට ඉඩ සලසයි, එයට IE8 පවා සහාය දක්වයි!

මෙහිදී ඔබට වැඩ කරන සජීවී නිරූපණයක් සොයාගත හැකි අතර මුල් ගබඩාව මෙහි GitHub හි ඇත, විවෘත මූලාශ්‍රය සහ යාවත්කාලීන කිරීම් ලබා ගැනීමට සූදානම් (: D)

අන්තර්ජාලයේ ඕනෑම තැනක මෙම ගබඩාව සඳහන් කිරීම මගේ පළමු අවස්ථාවයි (ඔව්, අවුරුදු 5 කට පසු, ඔබ එය නිවැරදිව අසා ඇත), මම ඒ ගැන සතුටු වෙමි!

[යාවත්කාලීන කිරීම - 2019 අගෝස්තු:] මම ඉරානයේ සිට පැමිණි නිසා ගිතුබ් එම ගබඩාවේ ගිතුබ් පිටු නිරූපණය ඉවත් කළේය ! පමණක් මූල කේතය ලබා ගත හැකි මෙහි කිසිම තැනක ...