Czy można zastosować CSS do połowy postaci?

2816

Czego szukam:

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

Czego aktualnie szukałem i próbowałem (Bez powodzenia):

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

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

x

Czy istnieje do 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ło, dlaczego kiedykolwiek chciałbym stylizować połowę postaci, właśnie dlatego. Moje miasto wydało ostatnio 250 000 USD na zdefiniowanie dla siebie nowej „marki”. To logo wymyślili. Wiele osób narzeka na prostotę i brak kreatywności i nadal to robi. Moim celem było wymyślenie tej strony jako żartu. Wpisz „Halifax”, a zobaczysz, co mam na myśli.

Mathew MacLean
źródło
1
Komentarze nie są przeznaczone do rozszerzonej dyskusji; ta rozmowa została przeniesiona do czatu .
Yvette,
6
Pytali „dlaczego”, ponieważ chcieli wiedzieć, dlaczego warto używać CSS, a nie SVG lub edytora obrazów. Nie ma nic wspólnego z decyzjami biznesowymi dotyczącymi ich logo. Dlaczego według linku do ich logo nie przyciąłeś X?
user9993
1
Nie mogę narzekać na to logo. O wiele lepszy niż ta cholerna latarnia morska.
Parapluie
@Parapluie musiałbym się zgodzić!
Mathew MacLean,

Odpowiedzi:

2937

Teraz w GitHub jako wtyczka!

wprowadź opis zdjęcia tutaj Zachęcamy do rozwidlenia i ulepszenia.

Demo | Pobierz Zip | Half-Style.com (przekierowuje do GitHub)


  • Czysty CSS dla jednej postaci
  • JavaScript używany do automatyzacji tekstu lub wielu znaków
  • Zachowuje dostępność tekstu dla czytników ekranu dla osób niewidomych lub niedowidzących

Część 1: Podstawowe rozwiązanie

Pół stylu na tekst

Demo: 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 reszta zostanie załatwiona.

Dostęp do oryginalnego tekstu jest również zachowany dla czytników ekranu dla osób niewidomych lub niedowidzących.

Objaśnienie pojedynczego znaku:

Czysty CSS. Wszystko, co musisz zrobić, to zastosować .halfStyleklasę do każdego elementu, który zawiera postać, która ma być stylizowana na pół.

Dla każdego elementu zakresu zawierającego znak możesz utworzyć atrybut danych, na przykład tutaj data-content="X", i użyć pseudoelementu, content: attr(data-content);aby .halfStyle:beforeklasa była dynamiczna i nie będziesz musiał kodować go na stałe dla każdej instancji.

Objaśnienie dowolnego tekstu:

Po prostu dodaj textToHalfStyleklasę 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>

( Demo JSFiddle )


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

Half Style na tekście - zaawansowane - z 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ę.

( Demo JSFiddle )



Część 3: Dopasuj i ulepsz

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


-Poziomie części pół

  • Bez cienia tekstu:

    Części poziome - brak cienia tekstu

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

    halfStyle - poziome pół-części - z cieniem tekstowym

( Demo JSFiddle )



-Wertykalne 1/3 części

  • Bez cienia tekstu:

    halfStyle - Pionowe części 1/3 - Bez cienia tekstu

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

    halfStyle - pionowe części 1/3 - z cieniem tekstowym

( Demo JSFiddle )



-Poziome 1/3 części

  • Bez cienia tekstu:

    halfStyle - Poziome części 1/3 - Bez cienia tekstu

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

    halfStyle - poziome części 1/3 - z cieniem tekstowym

( Demo JSFiddle )



-HalfStyle Improvement Autor @KevinGranger

halfStyle - KevinGranger

( Demo JSFiddle )



-PeelingStyle poprawa HalfStyle przez @SamTremaine

halfStyle - SamTremaine

( Demo JSFiddle i na samtremaine.co.uk )



Część 4: Gotowy do produkcji

Dostosowane różne zestawy stylów Half-Style mogą być używane w pożądanych elementach na tej samej stronie. Możesz zdefiniować wiele zestawów stylów i powiedzieć wtyczce, którego użyć.

Wtyczka korzysta z atrybutu danych data-halfstyle="[-CustomClassName-]"na .textToHalfStyleelementach docelowych i automatycznie wprowadza wszystkie niezbędne zmiany.

Zatem po prostu na elemencie zawierającym tekst dodaj textToHalfStyleatrybut klasy i danych data-halfstyle="[-CustomClassName-]". Wtyczka wykona resztę zadania.

halfStyle - Wiele na tej samej stronie

Również definicje klas zestawów stylów CSS pasują do [-CustomClassName-]części wspomnianej powyżej i są powiązane łańcuchem .halfStyle, więc będziemy to robić.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>

( Demo JSFiddle )

Arbel
źródło
Komentarze nie są przeznaczone do rozszerzonej dyskusji; ta rozmowa została przeniesiona do czatu .
Yvette,
7
To jest bardzo fajne. Warto zauważyć, że ta technika łamie CSS polegające na zawijaniu wyrazów, białych odstępach i odstępach między znakami.
Andrew Ensley
2
Miło widzieć, że
zatoczyliśmy
487

wprowadź opis zdjęcia tutaj


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

Zobacz projekt na GitHub - zobacz stronę projektu . (dzięki czemu możesz zobaczyć wszystkie podzielone style)

Stosowanie

Przede wszystkim upewnij się, że jQuerybiblioteka jest uwzględniona. Najlepszym sposobem na uzyskanie najnowszej wersji jQuery jest zaktualizowanie tagu head za pomocą:

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

Po pobraniu plików upewnij się, że dołączasz je do swojego projektu:

<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 przypisać klasę splitchar, a następnie żądany styl elementowi owijającemu tekst. na przykład

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

Po tym wszystkim upewnij się, że wywołujesz 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ć swój 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 */ }


Otóż ​​to! Teraz masz już Splitcharwszystko ustawione. Więcej informacji na ten temat na stronie http://razvanbalosin.com/Splitchar.js/ .

Razvan B.
źródło
W tej chwili Twoje rozwiązanie jest najłatwiejsze do wdrożenia dla wielu znaków, ale wciąż nie w 100%.
Mathew MacLean
@MathewMacLean emisfera musi mieć odpowiedź, prawda?
mttdbrd
3
Ma to problemy z zawijaniem tekstu, które jest widoczne nawet w najnowszym skrzypcach. Kiedy jedna postać zawija się, dzieli się zasadniczo na dwie części. Powinno to być trywialne rozwiązanie.
BoltClock
16
Nie zależy od jquery-latest.min.js, może spowodować, że twoje strony się zepsują bez ostrzeżenia, jeśli jQuery zostanie zaktualizowany, a wtyczka nie będzie działać z nowszą. Zamiast tego: użyj określonej wersji i sprawdź zgodność podczas aktualizacji.
Niels Bom
2
Być może zechcesz edytować swoją odpowiedź, aby nie sugerować używania pliku jquery-latest.js. Jak wspomniano w @NielsBom, w przeszłości może on uszkodzić twoją witrynę, gdy zostanie zaktualizowany. Od lipca 2014 r. Nie zrobi tego, ale dzieje się tak, ponieważ jest zablokowany w wersji 1.11.1 i nigdy nie będzie aktualizowany ponownie.
Bezużyteczny kod
237

Edycja (październik 2017 r.): A background-clipraczej background-image optionssą teraz obsługiwane przez każdą większą przeglądarkę: CanIUse

Tak, możesz to zrobić za pomocą tylko jednej postaci i tylko CSS.

Jednak 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 poprzez JS, pseudoelementy CSS, czy po prostu HTML) wyglądają dobrze, ale zauważ, że wszystko dodaje zawartość do DOM, co może powodować dostępność - a także zaznaczanie / wycinanie tekstu / wklej problemy.

DA.
źródło
34
@MathewMacLean nasze zadania byłyby o wiele łatwiejsze, gdyby tylko IE umarł, a Firefox zaczął korzystać z Webkit. :)
DA.
48
WebKit ma historię renderowania błędów, które są prawie dziwne na poziomie IE6 / IE7 (można nawet powiedzieć, że Safari i Chrome to IE6 współczesnej sieci) i zachowują się w sposób odbiegający od standardu bez konkretnego powodu. IE była znacznie lepsza od wersji 9, więc chociaż starożytne wersje powinny już umrzeć, nie widzę powodu do nienawiści do jej najnowszych wersji. I z pewnością nie rozumiem, dlaczego ludzie popierają ideę monokultury WebKit / Blink (komentarze tutaj są prawdopodobnie żartem, ale słyszałem o ludziach, którzy naprawdę w to wierzą).
BoltClock
3
To powiedziawszy, background-clip: textjest super niesamowite i powinni rozważyć (lub coś podobnego text-decoration-background) moduł 4 poziomu.
BoltClock
2
Tak, byłbym szczęśliwszy, gdyby blink / webkit umarł i współczesne silniki renderujące IE + FF przetrwały, niż na odwrót. Co nie znaczy, że reszta chromu nie jest ładna, tylko że jej renderowanie jest obecnie najgorsze ze wszystkich.
Eamon Nerbonne
2
Jest to znacznie czystsze rozwiązanie niż włośliwe biblioteki powyżej, powinny być akceptowaną odpowiedzią, ponieważ gradienty tekstu są obecnie użyteczne.
mystrdat
160

Przykład


JSFiddle DEMO

Zrobimy to za pomocą pseudo selektorów CSS!

Ta technika będzie działać z dynamicznie generowaną zawartością oraz 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 owinąć dynamicznie generowany ciąg, możesz użyć funkcji takiej jak ta:

// 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);
}
wvandaal
źródło
To 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 obliczenie szerokości wydaje się problemem.
j08691
@MathewMacLean hmm, czy twoja treść będzie kiedykolwiek tylko jedną postacią? Jeśli nie, czy chciałbyś, aby każda postać miała taki sam efekt podziału kolorów, czy tylko niektóre (tj. Pierwszy)?
wvandaal
1
@MathewMacLean możesz napisać prostą funkcję pętli w JS, aby wykonać zawijanie. Dodaję to teraz do mojej odpowiedzi.
wvandaal
1
@MathewMacLean Skąd pochodzi tekst? wvandaal ma rację, możesz sam owinąć tekst.
mttdbrd
96

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

Nazwałem to „Strippex” Dla „pasków” + „tekstu”, demo: http://cdpn.io/FcIBg

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

A co najważniejsze, dobrze się bawiłem, tworząc go!

wprowadź opis zdjęcia tutaj

LukyVj
źródło
2
@Luky Vj: Czy to konto jest twoje? Możesz skonsolidować wszystkie swoje posty w jedno konto, aby nie napotkać przeszkód podczas próby edytowania własnych postów.
BoltClock
Tak, w rzeczywistości najpierw opublikowałem swoje stare pierwsze konto .. I musiałem dodać zdjęcie, a nie byłem wystarczająco popularny, aby opublikować moje zdjęcie .. Ale masz rację, naprawię to jak najszybciej !
LukyVj
1
@LukyVj: Możesz połączyć swoje konta, postępując zgodnie z instrukcjami tutaj: stackoverflow.com/help/merging-accounts
BoltClock
1
@LukyVj Zaktualizowałem twoją funkcję dodając pointer-events:nonedo &:nth-child(2)- &:nth-child(5). Dzięki temu tekst można podświetlić tylko raz, a Ty otrzymujesz tylko jedną kopię. Możesz to zobaczyć tutaj: codepen.io/anon/pen/upLaj
Mathew MacLean
74

Jeśli jesteś tym zainteresowany, to usterka Lucasa Bebbera jest bardzo podobnym i super fajnym efektem:

wprowadź opis zdjęcia tutaj

Utworzono za pomocą prostej miksu SASS, takiego jak

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

Więcej informacji na stronie CSS Tricks Chrisa Coyera i na stronie Codepen Lucasa Bebbera

Ruskin
źródło
74

Tutaj brzydka implementacja w kanwie. Wypróbowałem to rozwiązanie, ale wyniki są gorsze niż się spodziewałem, więc i tak jest.

Przykład płótna

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

Fiambre
źródło
1
BTW, możesz również użyć 0.5do zatrzymania koloru czerwonego.
Szczoteczka do zębów
62

Najbliżej mogę uzyskać:

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

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

Więzień
źródło
1
$('span').width()po prostu zwraca szerokość pierwszego znalezionego zakresu; musiało to być coś, co zrobiłeś dla każdej pary. Co daje mi pomysł ...
Pointy
Jest to dość podobne do przykładu epascarello znalezionego na stronie jsfiddle.net/9WWsd. Jak mu powiedziałem, Twój przykład jest krokiem we właściwym kierunku, ale użycie go na większą skalę byłoby koszmarem.
Mathew MacLean
@MathewMacLean, nie widziałem tego. Dlaczego miałby to być koszmar? Co powiesz na to: jsfiddle.net/9wxfY/4
Więzień
Kiedy idziesz do implementacji więcej niż jednego znaku, powoduje to problemy.
Mathew MacLean
@MathewMacLean tam właśnie wkracza fantastyczny Lettering.JS .
Pointy
53

Wpisz opis zdjęcia tutaj

Właśnie grałem z rozwiązaniem @ Arbel:

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>

Shipow
źródło
4
Po prostu grałem z rozwiązaniem @Arbel Jakie są różnice z rozwiązaniem Arbel? Trudno zobaczyć, czy skopiowałeś tylko jakiś kod, czy go ulepszyłeś.
AL
43

Inne rozwiązanie tylko CSS (chociaż atrybut danych jest potrzebny, jeśli nie chcesz pisać CSS specyficznych dla liter). Ten działa bardziej ogólnie (testowany IE 9/10, najnowszy Chrome i najnowszy FF)

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>

MStrutt
źródło
38

Ograniczone rozwiązanie CSS i jQuery

Nie jestem pewien, jak eleganckie jest to rozwiązanie, ale przecina wszystko dokładnie o połowę: http://jsfiddle.net/9wxfY/11/

W przeciwnym razie stworzyłem dla Ciebie fajne rozwiązanie ... Wszystko, co musisz zrobić, to mieć to dla swojego HTML:

Spójrz na tę najnowszą i dokładną edycję z dnia 13.06.2016: http://jsfiddle.net/9wxfY/43/

Jeśli chodzi o CSS, jest on bardzo ograniczony ... Wystarczy go zastosować :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>

Przystąpić
źródło
Ma to te same problemy, co inni. Zaczyna się robić bałagan, gdy próbujesz to zrobić z więcej niż jedną postacią.
Mathew MacLean
@MathewMacLean Wiem :( też to widziałem. Pracuję nad tym teraz
Adjit
@MathewMacLean to naprawił, ale nie jestem pewien, jak czysty jest teraz JQuery. Spójrz
Adjit
@MathewMacLean dodając do wersji webkit rzeczy, których możesz użyć takiego rozwiązania: jsfiddle.net/wLkVt/1
Adjit
@MathewMacLean Naprawiono błąd w moim skrypcie. Przyczyną błędu było to, że cały czas brałem szerokość pierwszego elementu zamiast szerokości liter.
Adjit
30
.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/

Możesz łączyć ten kod do robienia różnego rodzaju interesujących rzeczy - to tylko jedna implementacja, którą wymyśliłem ze współpracownikiem i zeszłej nocy.

Sam Tremaine
źródło
27

Ładne rozwiązanie tylko dla WebKit, które korzysta ze background-clip: textwsparcia: 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;
}
Sandro Paganotti
źródło
24

Co powiesz na krótszy tekst?

Może nawet działać na dłuższym tekście, jeśli zrobiłeś coś z pętlą, powtarzając znaki za pomocą JavaScript. W każdym razie wynik jest mniej więcej taki:

Czy można zastosować CSS do połowy postaci?

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>

Alireza
źródło
23

FWIW, oto moje zdanie na ten temat, robiąc to tylko z CSS: http://codepen.io/ricardozea/pen/uFbts/

Kilka notatek:

  • Głównym powodem, dla którego to zrobiłem, było przetestowanie siebie i sprawdzenie, czy udało mi się stylizować połowę postaci, a jednocześnie zapewnić sensowną odpowiedź na OP.

  • Zdaję sobie sprawę, że nie jest to idealne ani najbardziej skalowalne rozwiązanie, a rozwiązania proponowane przez ludzi tutaj są o wiele lepsze dla scenariuszy „rzeczywistych”.

  • Utworzony przeze mnie kod CSS opiera się na pierwszych przemyśleniach, które przyszły mi do głowy i moim osobistym podejściu do problemu.

  • Moje rozwiązanie działa tylko na znakach symetrycznych, takich jak X, A, O, M. ** Nie działa na znakach asymetrycznych, takich jak B, C, F, K lub małych liter.

  • ** JEDNAK to podejście tworzy bardzo interesujące „kształty” o asymetrycznych znakach. Spróbuj zmienić X na K lub na małą literę, np. H lub p w CSS :)

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);
  }
}
Ricardo Zea
źródło
17

Możesz to również zrobić za pomocą SVG, jeśli chcesz:

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

Nic Bell
źródło
16

Można to osiągnąć za pomocą :beforeselektora CSS i 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>

>> Zobacz na jsFiddle

Sleek Geek
źródło
8

Możesz użyć poniższego kodu. Tutaj w tym przykładzie użyłem h1tagu i dodałem atrybut, data-title-text="Display Text"który pojawi się z innym kolorem tekstu na h1elemencie tagu, co daje efekt tekstu półkolorowego, jak pokazano w poniższym przykładzie

wprowadź opis zdjęcia tutaj

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>

GSB
źródło
5

Dla przypomnienia w historii!

Wymyśliłem rozwiązanie dla mojej własnej pracy sprzed 5-6 lat, a mianowicie Gradext (czysty javascript i czysty css, bez zależności).

Wyjaśnienie techniczne polega na tym, że możesz utworzyć taki element:

<span>A</span>

teraz, jeśli chcesz utworzyć gradient na tekście, musisz utworzyć kilka warstw, z których każda ma osobny kolor, a utworzone widmo zilustruje efekt gradientu.

na przykład spójrz na to słowo lorem wewnątrz a <span>i spowoduje efekt gradientu poziomego ( sprawdź przykłady ):

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

i możesz kontynuować tworzenie tego wzoru również przez długi czas i długi akapit.

wprowadź opis zdjęcia tutaj

Ale!

Co jeśli chcesz stworzyć efekt pionowego gradientu na tekstach?

Jest też inne rozwiązanie, które może być pomocne. Opiszę szczegółowo.

Zakładając nasz pierwszy <span>raz jeszcze. ale treść nie powinna być pojedynczymi literami; treść powinna być cały tekst, a teraz mamy zamiar skopiować samo <span>znowu i znowu (liczba przęseł zdefiniuje jakość swojego gradientu, większą rozpiętość, lepszy wynik, ale słabe wyniki). Zerknij na to:

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

wprowadź opis zdjęcia tutaj

Znowu, ale!

co jeśli chcesz, aby te efekty gradientu przesuwały się i tworzyły z niego animację?

jest też inne rozwiązanie. Zdecydowanie powinieneś sprawdzić, animation: truea nawet .hoverable()metodę, która doprowadzi do rozpoczęcia gradientu na podstawie pozycji kursora! (brzmi fajnie xD)

wprowadź opis zdjęcia tutaj

tak po prostu tworzymy gradienty (liniowe lub radialne) na tekstach. Jeśli podoba Ci się ten pomysł lub chcesz dowiedzieć się więcej o nim, powinieneś sprawdzić dostarczone linki.


Być może nie jest to najlepsza opcja, a może nie najlepszy sposób, aby to zrobić, ale otworzy trochę miejsca do tworzenia ekscytujących i zachwycających animacji, które zainspirują inne osoby do lepszego rozwiązania.

Pozwoli ci to na użycie stylu gradientu na tekstach, który jest obsługiwany nawet przez IE8!

Tutaj możesz znaleźć działające demo na żywo, a oryginalne repozytorium jest również dostępne na GitHub, open source i gotowe na niektóre aktualizacje (: D)

To mój pierwszy raz (tak, po 5 latach dobrze to usłyszałeś), aby wspomnieć o tym repozytorium w dowolnym miejscu w Internecie i jestem tym podekscytowany!


[Aktualizacja - sierpień 2019 r .:] Github usunął demo stron github z tego repozytorium, ponieważ jestem z Iranu! Tylko kod źródłowy jest dostępny tutaj tho ...

mrReiha
źródło