Pytanie Czy możliwe jest zastosowanie CSS do połowy postaci?


Czego szukam:

Sposób na stylizację PÓŁ postaci. (W tym przypadku połowa litery jest przezroczysta)

Czego ostatnio szukałem i próbowałem (bez powodzenia):

  • Metody stylizacji połowy znaku / litery
  • Stylizacja części postaci za pomocą CSS lub JavaScript
  • Zastosuj CSS do 50% postaci

Poniżej znajduje się przykład tego, co próbuję uzyskać.

x

Czy istnieje dla tego rozwiązanie CSS lub JavaScript, czy też będę musiał uciekać się do obrazów? Wolałbym nie iść drogą obrazu, ponieważ ten tekst zostanie wygenerowany dynamicznie.


AKTUALIZACJA:

Ponieważ wielu pyta, dlaczego chciałbym kiedyś stworzyć połowę postaci, to właśnie dlatego. Moje miasto wydało ostatnio 250 000 USD, aby zdefiniować dla siebie nową "markę". To logo jest to, co wymyślili. Wiele osób skarżyło się na prostotę i brak kreatywności i nadal to robi. Moim celem było zrobienie tego stronie internetowej jako żart. Wpisz "Halifax", a zobaczysz, co mam na myśli. :)


2435
2018-05-09 16:16


pochodzenie


Komentarze nie są przeznaczone do rozszerzonej dyskusji; ta rozmowa była przeniesiono do czatu. - Yvette Colomb♦


Odpowiedzi:


Teraz na GitHub jako wtyczka!

enter image description here Zapraszam do rozwidlenia i poprawy.

Próbny | Pobierz Zip | Half-Style.com (Przekierowuje do GitHub)


  • Czysty CSS dla pojedynczego znaku
  • JavaScript używany do automatyzacji tekstu lub wielu znaków
  • Zachowuje dostępność tekstu dla czytników ekranu dla osób niewidomych lub wizualnie upośledzony

Część 1: Podstawowe rozwiązanie

Half Style on text

Próbny:  http://jsfiddle.net/arbel/pd9yB/1694/


Działa to na dowolny tekst dynamiczny lub pojedynczy znak i jest zautomatyzowane. Wszystko, co musisz zrobić, to dodać klasę do tekstu docelowego, a resztą zajmiemy się.

Ponadto, dostępność oryginalnego tekstu jest zachowana dla czytników ekranu dla niewidomych lub niedowidzących.

Objaśnienie pojedynczego znaku:

Czysty CSS. Wszystko, co musisz zrobić, to złożyć podanie .halfStyle klasy do każdego elementu, który zawiera znak, który chcesz w połowie stylizować.

Dla każdego elementu zakresu zawierającego ten znak możesz utworzyć atrybut danych, na przykład tutaj data-content="X"i użycie pseudoelementu content: attr(data-content); więc .halfStyle:before klasa będzie dynamiczna i nie będziesz musiał jej zakodować na stałe dla każdej instancji.

Objaśnienia do dowolnego tekstu:

Po prostu dodaj textToHalfStyle klasa do elementu zawierającego tekst.


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


Część 2: Zaawansowane rozwiązanie - Niezależne części lewe i prawe

Half Style on text - advanced - With Text Shadow

Dzięki temu rozwiązaniu możesz stylizować lewą i prawą część, indywidualnie i niezależnie.

Wszystko jest takie samo, tylko bardziej zaawansowany CSS robi magię.

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



Część 3: Dopasuj i popraw

Teraz, gdy wiemy, co jest możliwe, stwórzmy kilka odmian.


-Horyzontalne połówki

  • Bez cienia tekstu:

    Horizontal Half Parts - No Text Shadow

  • Możliwość cienia tekstu dla każdej połówki niezależnie:

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



-Vertical 1/3 Części

  • Bez cienia tekstu:

    halfStyle - Vertical 1/3 Parts - No Text Shadow

  • Możliwość cienia tekstu dla każdej 1/3 części niezależnie:

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



-Horizontal 1/3 Części

  • Bez cienia tekstu:

    halfStyle - Horizontal 1/3 Parts - No Text Shadow

  • Możliwość cienia tekstu dla każdej 1/3 części niezależnie:

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



-HalfStyle Improvement By @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 demo)



- Poprawa stylu HalfStyle o @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 demo i dalej samtremaine.co.uk)



Część 4: Gotowy do produkcji

Dostosowane różne zestawy stylów pół-stylu mogą być używane na pożądanych elementach na tej samej stronie. Możesz zdefiniować wiele zestawów stylów i powiedzieć wtyczce, której z nich użyć.

Wtyczka używa atrybutu danych data-halfstyle="[-CustomClassName-]" na celu .textToHalfStyle elementy i automatycznie wprowadza wszystkie niezbędne zmiany.

Po prostu na elemencie zawierającym tekst dodaj textToHalfStyle atrybut klasy i danych data-halfstyle="[-CustomClassName-]". Wtyczka wykona resztę pracy.

halfStyle - Multiple on Same Page

Również definicje klas stylów CSS są zgodne z definicją klasy [-CustomClassName-] część wspomniana powyżej i jest przykuta do .halfStyle, więc będziemy mieć .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 demo)


2650
2018-05-09 16:42



Komentarze nie są przeznaczone do rozszerzonej dyskusji; ta rozmowa była przeniesiono do czatu. - Yvette Colomb♦


enter image description here


Właśnie skończyłem opracowywać wtyczkę i jest ona dostępna dla wszystkich! Mam nadzieję, że Ci się spodoba.

Wyświetl projekt na GitHub - Wyświetl projekt Stronie internetowej. (aby zobaczyć wszystkie podzielone style)

Stosowanie

Przede wszystkim upewnij się, że masz jQuery biblioteka jest wliczona w cenę. Najlepszym sposobem uzyskania najnowszej wersji jQuery jest aktualizacja tagu head:

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

Po pobraniu plików należy je uwzględnić w projekcie:

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

Narzut

Wszystko, co musisz zrobić, to złożyć klasę splitchar , a następnie pożądany styl elementu owijającego twój tekst. na przykład

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

Po tym wszystkim, po prostu upewnij się, że wywołasz funkcję jQuery w pliku gotowym do dokumentu w następujący sposób:

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

Dostosowywanie

Aby tekst wyglądał dokładnie tak, jak chcesz, wystarczy zastosować projekt w następujący sposób:

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


To jest to! Teraz masz Splitchar wtyczka wszystkie ustawione. Więcej informacji na ten temat na stronie http://razvanbalosin.com/Splitchar.js/.


454
2018-05-09 16:32



Od tej chwili twoje rozwiązanie jest najłatwiejsze do wdrożenia dla wielu postaci, ale wciąż nie jest w 100%. - Mathew MacLean
Ma to problemy z zawijaniem tekstu, które jest eksponowane nawet w najnowszym skrzypcach. Kiedy jedna postać owija się, zasadniczo dzieli się na dwie. Powinien być jednak trywialny. - BoltClock♦
@MathewMacLean Sprawdź to: połączyć :) - Razvan Balosin
Nie polegaj na jquery-latest.min.js, może to spowodować, że twoje witryny zostaną zerwane bez ostrzeżenia, jeśli jQuery zostanie zaktualizowany, a wtyczka nie będzie działać z nowszym. Zamiast tego: użyj konkretnej wersji i sprawdź zgodność podczas aktualizacji. - Niels Bom
Możesz edytować swoją odpowiedź, aby nie sugerować używania jquery-latest.js. Jak wspomniano w @NielsBom, w przeszłości mogło to spowodować uszkodzenie witryny po jej aktualizacji. Od lipca 2014 r. Tego nie zrobi, ale to dlatego, że jest zablokowany w wersji 1.11.1 i nigdy nie będzie aktualizowany ponownie. - Useless Code


Edytuj (październik 2017): background-clip albo raczej background-image options są teraz obsługiwane przez każdą większą przeglądarkę: Mogę uzyć

Tak, możesz to zrobić za pomocą tylko jednego znaku i tylko CSS.

Tylko Webkit (i 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>

Wizualnie, wszystkie przykłady, które używają dwóch znaków (czy to przez JS, pseudo elementy CSS, czy tylko HTML) wyglądają dobrze, ale zauważ, że to wszystko dodaje treść do DOM, co może powodować dostęp - jak również wybór tekstu / cięcie / wklej problemy.


200
2018-05-09 16:42



@MathewMacLean nasze zadania byłyby o wiele łatwiejsze, gdyby tylko IE umarł i Firefox zaczął używać Webkita. :) - DA.
@DA Chrome nie używa już webkita: wired.com/2013/04/blink - Matt Harrison
WebKit ma historię renderowania błędów, które są prawie na poziomie IE6 / IE7 dziwacznych (można nawet powiedzieć, że Safari i Chrome to IE6 współczesnej sieci) i zachowują się w sposób, który odbiega od standardu bez konkretnego powodu. IE było znacznie lepsze od wersji 9, więc chociaż starsze wersje powinny już umrzeć, nie widzę powodu do nienawiści do jej najnowszych wersji. I na pewno nie rozumiem, dlaczego ludzie popierają ideę monokultury WebKit / Blink (komentarze tutaj są prawdopodobnie żartem, ale słyszałem o ludziach, którzy poważnie w to wierzą). - BoltClock♦
Biorąc to pod uwagę, background-clip: text jest super niesamowite i powinni to rozważyć (lub coś podobnego text-decoration-background) dla modułu poziomu 4. - BoltClock♦
Tak, byłbym szczęśliwszy, gdyby zamigło mrugnięcie / webkit, a nowoczesne silniki renderujące IE + FF przetrwałyby, niż na odwrót. Co nie znaczy, że reszta chromu nie jest przyjemna, tylko że jej renderowanie jest obecnie najgorszym z pakietów. - Eamon Nerbonne


Example


JSFiddle DEMO

Zrobimy to używając tylko pseudo selektorów CSS!

Ta technika będzie działać z dynamicznie generowaną treścią i różnymi rozmiarami i szerokościami czcionek.

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

Aby zawinąć dynamicznie generowany ciąg, można użyć funkcji podobnej do tej:

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



To jest miłe, ale jedynym problemem jest to, że zawartość będzie dynamiczna. - Mathew MacLean
Wyniki różnią się w zależności od użytej czcionki. Plus obliczanie szerokości wydaje się problemem. - j08691
@MathewMacLean można napisać prostą funkcję pętli w JS, aby wykonać owijanie. Dodaję to teraz do mojej odpowiedzi. - wvandaal
@MathewMacLean Skąd pochodzi tekst? wvandaal ma rację, możesz sam zawinąć tekst. - mttdbrd
@MathewMacLean Oto przykład: jsfiddle.net/CL82F/5 - wvandaal


Może to być nieistotne, może nie, ale jakiś czas temu stworzyłem funkcję jQuery, która robi to samo, ale w poziomie.

Nazwałem to "Strippex" Dla "paska" + "tekstu", wersja demo: http://cdpn.io/FcIBg

Nie twierdzę, że to jest rozwiązanie jakichkolwiek problemów, ale już próbowałem zastosować css do połowy postaci, ale w poziomie, więc pomysł jest taki sam, realizacja może być okropna, ale działa.

Ach, i najważniejsze, dobrze się bawiłem, tworząc go!

enter image description here


87
2018-05-13 11:05



@Luky Vj: Czy to twoje konto jest twoje? Możesz skonsolidować wszystkie swoje posty w jednym koncie, aby nie uruchamiać blokad dróg, próbując edytować własne posty. - BoltClock♦
Tak, w rzeczywistości, najpierw opublikowałem na moim starym koncie. Musiałem dodać obraz, a ja nie byłem wystarczająco popularny, aby opublikować mój obraz. Ale masz rację, naprawię to jak najszybciej ! - LukyVj
@LukyVj: Możesz scalić swoje konta, wykonując instrukcje tutaj: stackoverflow.com/help/merging-accounts - BoltClock♦
@LukyVj Zaktualizowałem twoją funkcję, dodając pointer-events:none do &:nth-child(2) - &:nth-child(5). Dzięki temu tekst może zostać podświetlony tylko raz, a otrzymasz tylko jedną jego kopię. Możesz go zobaczyć tutaj: codepen.io/anon/pen/upLaj - Mathew MacLean


Oto brzydka implementacja w płótnie. Próbowałem tego rozwiązania, ale wyniki są gorsze, niż się spodziewałem, więc i tak jest.

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, możesz użyć 0.5 także dla czerwonego koloru. - Toothbrush


Jeśli jesteś tym zainteresowany, to Glitch Lucas'a Bebbera jest bardzo podobnym i super fajnym efektem:

enter image description here

Stworzony przy użyciu prostego miksu SASS, takiego jak

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

Więcej szczegółów na Chris Ceyer's CSS Tricks i Lucas Bebber's Codepen page


60
2017-10-01 12:39





Najbliżej mogę dostać:

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

Próbny: http://jsfiddle.net/9wxfY/2/

Oto wersja, która używa tylko jednego zakresu: http://jsfiddle.net/9wxfY/4/


52
2018-05-09 16:28



$('span').width() po prostu zwraca szerokość pierwszego znalezionego zakresu; to musiało być coś, co zrobiłeś dla każdej pary. Co daje mi pomysł ... - Pointy
Jest to podobne do przykładu epascarello znalezionego na jsfiddle.net/9WWsd. Jak mu powiedziałem, Twój przykład jest krokiem we właściwym kierunku, ale byłoby to koszmar do użycia na większą skalę. - Mathew MacLean
@MathewMacLean, nie widziałem tego. Dlaczego miałby to być koszmar? Co powiesz na to: jsfiddle.net/9wxfY/4 - Prisoner
Kiedy używasz więcej niż jednego znaku, powoduje to problemy. - Mathew MacLean
@MathewMacLean, to tam jest bajecznie Napis.JS wchodzi. - Pointy