Ben ne arıyordum:

Tarzı bir şekildeYARIMbir karakter. (Bu durumda, yarım mektup şeffaf olması)

Ben şu anda ne var için araştırdım ve denedim (hiç şans):

• Bir karakter/harf şekillendirme yarım yöntemleri
• CSS veya JavaScript ile karakterinin bir parçası şekillendirme
• Bir karakter P CSS uygulamak

Aşağıda elde etmek için çalışıyorum ne bir örnek.

CSS veya JavaScript bir çözüm var mı veya resimleri başvurmak zorunda kalacak mıyım? Bu metin dinamik olarak oluşturulan sona erecek gibi görüntü yol gitmek istemiyorum.

---

GÜNCELLEME:

Pek çoğu hiç bir karakterin yarısı stil isterim neden sorduğu, bu yüzden. Son zamanlarda 250.000 dolar tanımlamak için geçirmişti benim şehir yeni bir "marka" kendisi için. BuLOGOonlar ile geldi. Birçok kişi yaratıcılık sadelik ve eksikliği hakkında şikayet var ve yapmaya da devam edeceğiz. Amacım bu ile geldiWEBSITEşaka gibi. 'Halifax' ve ne demek istediğimi göreceksiniz. yazın :)

---

Now on GitHub as a Plugin!

çatal ve geliştirmek için çekinmeyin.

Demo | Download Zip | Half-Style.com (GitHub Yönlendirir)

---

• Saf CSSTek bir Karakter için
• JavaScript otomasyon için kullanılan metin veya birden fazla karakter bulunmaktadır
• Metin Erişilebilirlik görme engelliler için ekran okuyucular için korur veya görsel bozulmuş

Ödev-1: Temel Çözüm

Demo:http://jsfiddle.net/pd9yB/817/

---

Bu dinamik metin veya tek bir karakter üzerinde çalışıyor, ve her şey otomatik. Tüm yapmanız gereken hedef metin üzerinde bir sınıf ekleyin ve gerisi halledilir.

Ayrıca, orijinal metnin erişilebilirlik görme engelliler için ekran okuyucular için korunmuş ya da görme engelli.

Tek bir karakter için açıklama:

Saf CSS. Tüm yapmanız gereken, yarım tarza sahip olmak istediğiniz karakteri içeren her öğe için .halfStyle sınıf uygulamaktır.

Her bir span öğesi içeren karakter yaratabilir, bir veri özniteliği, örneğin burada data-content="X" ve pseudo element kullanın content: attr(data-content); .halfStyle:before Sınıf olacak dinamik ve ihtiyacın kalmaz zor kod her örneği.

Herhangi bir metin için açıklama:

Sadece ekleyin textToHalfStyle öğesi için metni içeren sınıf.

---

CSS:

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

HTML

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

---

Bunu otomatik yapmak için, sadece elemanı metni içeren textToHalfStyle sınıf ekleyin.

bir WordPress kullanmakOtomatik modu için

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

Demo:http://jsfiddle.net/pd9yB/819/

---

Part2: Gelişmiş çözüm Bağımsız sol ve sağ parçaları

Bu çözüm ile sol ve sağ parçalar, ayrı ayrı ve bağımsız olarak tarzı.

Her şeyi büyü yaptığı, daha gelişmiş sadece CSS.

Demo:http://jsfiddle.net/pd9yB/819/

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

Part3: Mix-Maç ve Geliştirmek

Neyin mümkün olduğunu biliyoruz artık, şimdi bazı varyasyonları oluşturun.

-Yatay Yarım Parça

Demo

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

-Dikey 1/3 Parçaları

Demo

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

-Yatay 1/3 Parçaları

Demo

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

@By-HalfStyle İyileştirme KevinGranger

DEMO

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

@Tarafından HalfStyle-PeelingStyle iyileştirme SamTremaine

Demo samtremaine.co.uk

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

Part4: Üretim için Hazır

Özelleştirilmiş farklı. Stil-ayarlar birden fazla tanımlamak ve kullanmak için hangi eklenti söyleyebilirsin.

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

Yani, sadece öğe metin textToHalfStyle sınıf ve veri Ekle içeren data-halfstyle="[-CustomClassName-]" öznitelik. Eklenti işin dinlenme yapacak.

Aynı sayfada Birden fazla Demo Yarı Stilleri.

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

Ayrıca CSS stil-ayarlar' sınıf tanımları [-CustomClassName-] kısmı yukarıda belirtilen maç ve .halfStyle.[-CustomClassName-] olacak .halfStyle, zincirleme

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

HTML:

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

Aynı sayfada Birden fazla Demo Yarı Stilleri.