Soru CSS'yi bir karakterin yarısına uygulamak mümkün mü?


Ne arıyorum:

Stil bir yolu YARIM Bir karakterin (Bu durumda, saydamlığın yarısı şeffaftır)

Şu anda aradığım ve denediğim (Şanssız):

  • Bir karakterin / harfin yarısını şekillendirme yöntemleri
  • Bir karakterin CSS veya JavaScript ile stilini çizme
  • CSS'yi bir karakterin% 50'sine uygula

Aşağıda, elde etmeye çalıştığım şeyin bir örneği var.

x

Bunun için bir CSS veya JavaScript çözümü var mı yoksa resimlere başvurmak zorunda mıyım? Bu metnin dinamik olarak oluşturulmasını sağlayacağından, görüntü rotasına gitmemeyi tercih ederim.


GÜNCELLEŞTİRME:

Birçoğu neden bir karakterin yarısını üsstüre etmek istediğimi sorduğundan, işte bu yüzden. Şehrim son zamanlarda kendisi için yeni bir "marka" tanımlamak için 250.000 dolar harcadı. Bu logo onların neyle geldiğini. Birçok insan, sadeliği ve yaratıcılık eksikliğinden şikayet etti ve bunu yapmaya devam ediyor. Amacım bununla çıkmaktı Web sitesi şaka olarak. 'Halifax' yazın ve ne demek istediğimi göreceksiniz. :)


2435
2018-05-09 16:16


Menşei


Yorumlar uzun tartışma için değil; bu konuşma oldu sohbete taşındı. - Yvette Colomb♦


Cevaplar:


Şimdi Plugin olarak GitHub'da!

enter image description here Çatal sürmek ve geliştirmek için çekinmeyin.

gösteri | Zip'i indir | Half-Style.com (GitHub'a yönlendirir)


  • Saf CSS Tek bir karakter için
  • Metin veya birden çok karakter arasında otomasyon için kullanılan JavaScript
  • Kör veya görsel olarak ekran okuyucuları için Metin Erişilebilirliğini korur ayrılmış

Bölüm 1: Temel Çözüm

Half Style on text

Demo:  http://jsfiddle.net/arbel/pd9yB/1694/


Bu, herhangi bir dinamik metin üzerinde veya tek bir karakterde çalışır ve hepsi otomatiktir. Tek yapmanız gereken, hedef metne bir sınıf eklemek ve gerisi halledilir.

Ayrıca, orijinal metnin erişilebilirliği kör veya görme engelli için ekran okuyucuları için korunur.

Tek bir karakter için açıklama:

Saf CSS. Tek yapmanız gereken uygulamak .halfStyle Yarım stil olmak istediğiniz karakteri içeren her öğeye sınıf.

Karakteri içeren her span öğesi için, örneğin bir veri niteliği oluşturabilirsiniz. data-content="X"ve sözde öğe kullanımı content: attr(data-content); Böylece .halfStyle:before sınıf dinamik olacak ve her örnek için kod yazmanız gerekmeyecek.

Herhangi bir metin için açıklama:

Sadece ekle textToHalfStyle metni içeren öğeye sınıf.


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


Bölüm 2: Gelişmiş çözüm - Bağımsız sol ve sağ kısımlar

Half Style on text - advanced - With Text Shadow

Bu çözümle, bağımsız ve bağımsız olarak sol ve sağ parçaları stilleyebilirsiniz.

Her şey aynı, sadece daha gelişmiş CSS büyü yapar.

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



Bölüm 3: Mix-Match ve Geliştirin

Şimdi neyin mümkün olduğunu biliyoruz, biraz değişiklik yapalım.


-Yatay Yarı Parçaları

  • Metin Gölgesiz:

    Horizontal Half Parts - No Text Shadow

  • Her yarım kısım için Metin Gölge olasılığı bağımsız olarak:

    halfStyle - Horizontal Half Parts - With Text Shadow

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

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

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

        // Reset output for appending
        output = '';

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

        // Write to DOM only once
        $el.append(output);
    });
});
.halfStyle {
  position: relative;
  display: inline-block;
  font-size: 80px; /* or any font size will work */
  color: transparent; /* hide the base character */
  overflow: hidden;
  white-space: pre; /* to preserve the spaces from collapsing */
}

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

.halfStyle:after { /* creates the bottom part */
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  height: 100%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  pointer-events: none; /* so the base char is selectable by mouse */
  color: #000; /* for demo purposes */
  text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

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

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

(JSFiddle demosu)



-Veri 1/3 Parça

  • Metin Gölgesiz:

    halfStyle - Vertical 1/3 Parts - No Text Shadow

  • Her bir 1/3 bölüm için Metin Gölge olasılığı bağımsız olarak:

    halfStyle - Vertical 1/3 Parts - With Text Shadow

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

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

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

    // Reset output for appending
    output = '';

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

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

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

.halfStyle:after { /* creates the middle 1/3 */
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    width: 66.66%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

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

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

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

(JSFiddle demosu)



-Yatay 1/3 Parçaları

  • Metin Gölgesiz:

    halfStyle - Horizontal 1/3 Parts - No Text Shadow

  • Her bir 1/3 bölüm için Metin Gölge olasılığı bağımsız olarak:

    halfStyle - Horizontal 1/3 Parts - With Text Shadow

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

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

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

    // Reset output for appending
    output = '';

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

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

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

.halfStyle:after { /* creates the middle 1/3 */
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  height: 66.66%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  pointer-events: none; /* so the base char is selectable by mouse */
  color: #000; /* for demo purposes */
  text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

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

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

(JSFiddle demosu)



-HalfStyle İyileştirme @KevinGranger

halfStyle - KevinGranger

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

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

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

    // Reset output for appending
    output = '';

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

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

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

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

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

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

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

(JSFiddle demosu)



HalfStyle tarafından -PeelingStyle iyileştirme @SamTremaine

halfStyle - SamTremaine

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

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

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

    // Reset output for appending
    output = '';

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

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

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

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

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

(JSFiddle demosu ve üzerinde samtremaine.co.uk)



Bölüm 4: Üretime Hazır

Özelleştirilmiş farklı Yarım Tarz stil setleri, aynı sayfada istenen elemanlarda kullanılabilir. Birden fazla stil kümesini tanımlayabilir ve hangisinin kullanılacağını eklentiye söyleyebilirsiniz.

Eklenti veri özniteliğini kullanır data-halfstyle="[-CustomClassName-]" hedefte .textToHalfStyle gerekli tüm değişiklikleri otomatik olarak yapar ve yapar.

Yani, sadece metin içeren unsuru ekleyin textToHalfStyle sınıf ve veri özniteliği data-halfstyle="[-CustomClassName-]". Eklenti işin geri kalanını yapacak.

halfStyle - Multiple on Same Page

Ayrıca CSS stil setleri 'sınıf tanımları [-CustomClassName-] yukarıda belirtilen ve zincirleme .halfStyle, yani sahip olacağız .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 demosu)


2650
2018-05-09 16:42



Yorumlar uzun tartışma için değil; bu konuşma oldu sohbete taşındı. - Yvette Colomb♦


enter image description here


Eklentiyi geliştirmeyi yeni bitirdim ve herkesin kullanabileceği bir şey var! Umarım keyfine varacaksın.

Projeyi görüntüle GitHub - Projeyi Görüntüle Web sitesi. (böylece tüm bölünmüş stilleri görebilirsiniz)

kullanım

Her şeyden önce, jQuery kütüphane dahildir. En son jQuery sürümünü edinmenin en iyi yolu, başlık etiketinizi şu şekilde güncellemektir:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Dosyaları indirdikten sonra, bunları projenize dahil ettiğinizden emin olun:

<link rel="stylesheet" type="text/css" href="css/splitchar.css">
<script type="text/javascript" src="js/splitchar.js"></script>

Biçimlendirme

Tek yapmanız gereken dersi asmaktır. splitchar Ardından metninizi sarmalayan öğe için istenen stil takip edilir. Örneğin

<h1 class="splitchar horizontal">Splitchar</h1>

Tüm bunlar bittikten sonra, belgenizdeki hazır dosyada jQuery işlevini şöyle çağırdığınızdan emin olun:

$(".splitchar").splitchar();

Özelleştirme

Metnin tam istediğiniz gibi görünmesini sağlamak için tek yapmanız gereken tasarımınızı aşağıdaki gibi uygulamaktır:

.horizontal { /* Base CSS - e.g font-size */ }
.horizontal:before { /* CSS for the left half */ }
.horizontal:after { /* CSS for the right half */ }


Bu kadar! Şimdi sende Splitchar tüm seti ekleyin. Hakkında daha fazla bilgi http://razvanbalosin.com/Splitchar.js/.


454
2018-05-09 16:32



Şu andan itibaren çözümünüz, birden fazla karakter için uygulanması en kolay olanı, ancak yine de% 100 değil. - Mathew MacLean
Bu, en son kemanda bile sergilenen metin kaydırma ile ilgili problemlere sahiptir. Bir karakter sararsa, aslında ikiye bölünür. Gerçi, önemsiz bir düzeltme olmalı. - BoltClock♦
@MathewMacLean Bunu kontrol edin: bağlantı :) - Razvan Balosin
Jquery-latest.min.js'ye güvenmeyin, jQuery güncelleştirilirse ve eklenti daha yeni bir sürümle çalışmazsa sitelerinizi uyarı vermeden kesebilir. Bunun yerine: belirli bir sürümü kullanın ve güncellenirken uyumluluğu kontrol edin. - Niels Bom
Jquery-latest.js'yi kullanmamanızı önermek için cevabınızı düzenlemek isteyebilirsiniz. @NielsBom'dan da bahsedildiği gibi, geçmişte siteniz güncellendiğinde kırılabilir. 2014'ün Temmuz ayından bu yana, bunu yapmayacak ama bunun nedeni 1.11.1 versiyonunda kilitlenmiştir ve bir daha asla güncellenmeyecek. - Useless Code


Düzenle (Ekim 2017): background-clip ya da daha doğrusu background-image options şimdi her büyük tarayıcı tarafından destekleniyor: Kullanabilirmiyim

Evet, bunu sadece bir karakter ve sadece CSS ile yapabilirsiniz.

Ancak Webkit (ve 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>

Görsel olarak, iki karakter kullanan tüm örnekler (JS, CSS sözdizimi öğeleri veya yalnızca HTML ile olsun) iyi görünmektedir, ancak hepsinin DOM'a erişilebilirliğe neden olabilecek içerik eklediğine, ayrıca metin seçimine / kesimine dikkat edin. yapıştırma sorunları.


200
2018-05-09 16:42



@MathewMacLean, yalnızca IE'nin ölmesi ve Firefox'un Webkit'i kullanmaya başladığı durumlarda işimiz çok daha kolay olurdu. :) - DA.
@DA Chrome artık webkit kullanmıyor: wired.com/2013/04/blink - Matt Harrison
WebKit, neredeyse IE6 / IE7 düzeyindeki tuhaf (aslında Safari ve Chrome'un modern web'in IE6'sı olduğunu söyleyebiliriz) ve belirli bir nedenden ötürü standarttan sapan şekillerde davranan hatalar oluşturma geçmişine sahiptir. IE, sürüm 9'dan bu yana çok daha iyi olmuştur, bu yüzden eski versiyonlar ölmek zorundayken, son versiyonları için nefretin bir nedenini görmüyorum. Ve kesinlikle insanların neden bir WebKit / Blink monokültürü fikrini desteklediklerini görmüyorum (buradaki yorumlar muhtemelen şakadır, ama ciddi şekilde inanan insanları duydum). - BoltClock♦
Söyleniyor ki, background-clip: text süper harika ve bunu düşünmeliyiz (ya da benzer bir şey text-decoration-backgroundSeviye 4 modül için. - BoltClock♦
Evet, göz kırpması / webkit öldü ve modern IE'nin + FF işleme motorları diğer yollardan daha iyi hayatta kalırsa daha mutlu olurdum. Bu, kromun geri kalanının güzel olmadığını söylemekle kalmıyor, ki bu sadece bugünkü işlenmenin en kötüsüdür. - Eamon Nerbonne


Example


JSFiddle DEMO

Sadece CSS yalancı seçicileri kullanarak yapacağız!

Bu teknik, dinamik olarak oluşturulmuş içerik ve farklı yazı tipi boyutları ve genişlikleri ile çalışacaktır.

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

Dinamik olarak oluşturulmuş dizeyi sarmak için şöyle bir işlev kullanabilirsiniz:

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

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

  return output.join('');
}

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

    el.innerHTML = wrapString(txt);
}

139
2018-05-09 16:33



Bu temiz, ancak tek sorun içerik dinamik olacak. - Mathew MacLean
Sonuçlar kullanılan yazı tipine göre değişir. Ayrıca genişliğin hesaplanması bir problem gibi görünüyor. - j08691
@MathewMacLean, sarmayı gerçekleştirmek için JS'de basit bir döngü işlevi yazabilirsiniz. Şimdi cevabımı ekliyorum. - wvandaal
@MathewMacLean Metin nereden geliyor? wvandaal haklı, metni kendiniz sarabilirsiniz. - mttdbrd
@MathewMacLean işte bir örnek: jsfiddle.net/CL82F/5 - wvandaal


Belki ilgisiz olabilir, ama belki bir süre önce, aynı şeyi yapan bir jQuery işlevi oluşturdum, ama yatay olarak.

Ben 'Strippex' için 'şerit' + 'metin' için aradım, demo: http://cdpn.io/FcIBg

Bunun herhangi bir problemin çözümü olduğunu söylemiyorum ama css'i bir karakterin yarısına uygulamayı denedim, ama yatay olarak, Yani fikir aynı, gerçekleşme korkunç olabilir, ama işe yarıyor.

Ah, ve en önemlisi, onu yaratırken eğlendim!

enter image description here


87
2018-05-13 11:05



@Luky Vj: Bu hesap senin mi? Tüm gönderilerinizi tek bir hesapta birleştirmek isteyebilirsiniz. Bu nedenle, kendi yayınlarınızı düzenlemeye çalışan engellerle karşılaşmazsınız. - BoltClock♦
Evet, aslında, ilk önce eski hesabımla birlikte yayınladım. Ve bir resim eklemeliydim ve resmimi yayınlayacak kadar popüler değildim .. Ama haklısın, en kısa sürede düzelteceğim ! - LukyVj
@LukyVj: Buradaki talimatları izleyerek hesaplarınızı birleştirebilirsiniz: stackoverflow.com/help/merging-accounts - BoltClock♦
@LukyVj Ekleyerek fonksiyonunuzu güncelledim pointer-events:none için &:nth-child(2) - &:nth-child(5). Bu, metnin yalnızca bir kez vurgulanabilmesini ve yalnızca bir kopyasını almasını sağlar. Burada görebilirsiniz: codepen.io/anon/pen/upLaj - Mathew MacLean


Burada tuvallerde çirkin bir uygulama. Bu çözümü denedim, ancak sonuçlar beklediğimden daha kötü, işte bu yüzden zaten.

Canvas example

http://jsfiddle.net/kLXmL/2/

<div>Example Text</div>

$(function(){
    $("div").each(function(){
        var CHARS = $(this).text().split('');
        $(this).html("");
        $.each(CHARS,function(index, char){
            var canvas = $("<canvas />")
                    .css("width", "40px")
                    .css("height", "40px")
                    .get(0);
            $("div").append(canvas);
            var ctx = canvas.getContext("2d");
            var gradient = ctx.createLinearGradient(0, 0, 130, 0);
            gradient.addColorStop("0", "blue");
            gradient.addColorStop("0.5", "blue");
            gradient.addColorStop("0.51", "red");
            gradient.addColorStop("1.0", "red");
            ctx.font = '130pt Calibri';
            ctx.fillStyle = gradient;
            ctx.fillText(char, 10, 130);
        });
    });
});

62
2018-05-09 19:33



Btw, kullanabilirsiniz 0.5 Kırmızı renk için de dur. - Toothbrush


Eğer bununla ilgileniyorsanız, o zaman Lucas Bebber'in Glitch'i çok benzer ve harika bir etki:

enter image description here

Gibi basit bir SASS Mixin kullanılarak oluşturuldu

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

Daha fazla detay Chris Coyer'ın CSS Hileleri ve Lucas Bebber'ın Codepen sayfası


60
2017-10-01 12:39





En yakın ben elde edebilirim:

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

Demo: http://jsfiddle.net/9wxfY/2/

Heres sadece bir span kullanan bir versiyon: http://jsfiddle.net/9wxfY/4/


52
2018-05-09 16:28



$('span').width() sadece bulduğu ilk açıklığın genişliğini döndürür; Her bir çift için yaptığın bir şey olmalı. Bu bana bir fikir veriyor ... - Pointy
Bu episcarello'nun jsfiddle.net/9WWsd adresindeki örneğine oldukça benzer. Ona söylediğim gibi, örneğiniz doğru yönde atılmış bir adımdır, fakat daha geniş ölçekte kullanmak için bir kabus olurdu. - Mathew MacLean
@MathewMacLean, bunu görmedim. Neden bir kabus olmalı? Buna ne dersin: jsfiddle.net/9wxfY/4 - Prisoner
Birden fazla karakteri uygulamaya gittiğinizde sorunlara neden olur. - Mathew MacLean
@MathewMacLean bu muhteşem Lettering.JS içeri gelir. - Pointy