, czego szukam:

Sposób na styl jeden połowa znaków. (W tym przypadku połowa litera jest przezroczysta)

, czego obecnie szukałem i próbowałem (bez szczęścia):

  • Metody stylizacji połowy znaku / listu
  • Stylizacja części postaci z CSS lub JavaScript
  • Zastosuj CSS do 50% znaku

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

x

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


AKTUALIZACJA:

Ponieważ wielu zapytało, dlaczego kiedykolwiek chciałbym stylować połowę charakteru, dlatego. Moje miasto ostatnio wydało 250 000 $, aby zdefiniować nową "markę" dla siebie. To Logo jest tym, z czym wymyślili. Wiele osób skarżyło się na prostotę i brak kreatywności i kontynuować. Moim celem było wymyślić to jako żart. Wpisz "Halifax", a zobaczysz, co mam na myśli.

2999
Mathew MacLean 9 maj 2014, 20:16

17 odpowiedzi

Fwiw, oto moje podejście to robi to tylko z CSS: http://codepen.io/ricardozea/pen / UFBTS /

Kilka uwag:

  • Głównym powodem, dla którego zrobiłem to było przetestowanie siebie i sprawdzić, czy udało mi się osiągnąć stylizacji połowy postaci, w rzeczywistości zapewniając znaczącą odpowiedź na op.

  • Zdaję sobie sprawę, że nie jest to idealny ani najbardziej skalowalny rozwiązanie, a rozwiązania zaproponowane przez ludzi tutaj są znacznie lepsze dla scenariuszy "Real World".

  • Kod CSS, który stworzyłem, jest oparty na pierwszych myślach, które przyszły do mojego umysłu i własnego osobistego podejścia do problemu.

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

  • ** Jednakże podejście to tworzy bardzo interesujące "kształty" z asymetrycznych znaków. Spróbuj zmienić X do K lub do małej literę jak h lub a 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);
  }
}
23
Ricardo Zea 31 lipiec 2014, 19:19

Możesz także to 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.

17
Salman A 6 luty 2015, 10:43

Można to osiągnąć za pomocą selektora CSS {X0}} 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>

& gt; & gt; & gt; Zobacz na JSFiddle.

16
Sleek Geek 14 styczeń 2016, 14:50

Możesz użyć poniżej kodu. Tutaj w tym przykładzie używałem znacznika h1 i dodałem atrybut data-title-text="Display Text", który pojawi się z innym tekstem koloru na elemencie h1 Element tekstowy znacznika, co daje efekt półksiężycowy tekstu, jak pokazano poniżej, jak pokazano poniżej

enter image description here

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>
8
schmijos 11 kwiecień 2018, 07:12

tylko dla rekordu w historii!

Wymyślam rozwiązanie dla mojej pracy od 5-6 lat temu, co jest Gradext (czysty javascript i czysta CSS, bez zależności).

Wyjaśnienie techniczne jest można utworzyć taki element:

<span>A</span>

Teraz, jeśli chcesz wykonać gradient na tekst, musisz utworzyć kilka wielu warstw, każdy indywidualnie kolorowy kolorowy, a utworzona widmo zilustrują efekt gradientu.

Na przykład spójrz na to jest słowo lorem wewnątrz <span> i spowoduje, że efekt gradientu poziomy (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ć wykonanie tego wzorca na długi czas i długi akapit.

enter image description here

Ale!

Co jeśli chcesz utworzyć pionowy gradient efekt na tekstach?

Wtedy jest inne rozwiązanie, które może być pomocne. Opiszę szczegółami.

Zakładając ponownie nasz pierwszy <span>. Ale treść nie powinna być literami indywidualnie; Treść powinna być całym tekstem, a teraz zamierzamy ponownie skopiować tę samą <span>. 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>

enter image description here

znowu, ale!

Co jeśli chcesz, aby te gradientowe efekty mogły się poruszyć i stworzyć animację?

Cóż, jest też inne rozwiązanie. Powinieneś zdecydowanie sprawdzić animation: true lub nawet .hoverable() sposób, który doprowadzi do gradientu w celu uruchomiony zgodnie kursorem ! (Sounds Cool XD)

enter image description here

Jest to po prostu jak tworzymy gradienty (liniowy lub promieniowy) na tekstach. Jeśli podobał ci się pomysł lub chcesz dowiedzieć się więcej o tym, powinieneś sprawdzić podane linki.


Być może to nie jest najlepsza opcja, może nie najlepszy sposób na to, aby to zrobić, ale otworzy trochę miejsca na stworzenie ekscytujących i wspaniałych animacji, aby zainspirować innych ludzi na lepsze rozwiązanie.

Pozwoli Ci użyć stylu gradientu na tekstach, które jest obsługiwane przez nawet IE8!

Tutaj znajdziesz działający demo na żywo i oryginalne repozytorium jest Tutaj na GitHub, Otwórz źródło Gotowy, aby uzyskać pewne aktualizacje (: D)

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


[Aktualizacja - 2019 sierpnia:] Github Usunięto Github-Strony Demo tego repozytorium, ponieważ jestem z Iranu! Dostępny jest tylko kod źródłowy Oto...

5
mrReiha 5 sierpień 2019, 17:49

Edytuj (październik 2017): background-clip lub raczej background-image options są teraz obsługiwane przez każdą główną przeglądarkę: Canius

Tak, możesz to zrobić tylko jednym znakiem i tylko CSS.

Tylko webkit (i chrom), choć:

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 za pośrednictwem JS, elementy pseudo CSS lub po prostu HTML) wyglądają dobrze, ale zauważ, że wszystkie dodaje treści do DOM, który może powodować dostępność - jak również wybór tekstu / problemy z pasty.

244
rebecca 13 październik 2017, 10:28

Example


JSFiddle Demo.

Zrobimy to za pomocą CSS Pseudo Selektorów!

Ta technika będzie działać z dynamicznie generowanymi treściami 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 owinąć dynamicznie generowany ciąg, można użyć takiego funkcji:

// 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);
}
162
Community 20 czerwiec 2020, 09:12

Tutaj brzydka implementacja na płótnie. Próbowałem tego rozwiązania, ale wyniki są gorsze niż się spodziewałem, więc tutaj jest.

Canvas example

$("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>
78
m4n0 21 sierpień 2019, 01:07

Najbliżej mogę:

$(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 wersja, która po prostu używa jednego zakresu: http://jsfiddle.net/9WXFY/4/

62
Al Foиce ѫ 5 sierpień 2016, 11:46

Enter image description here

Właśnie grałem w rozwiązaniu @ 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>
53
TylerH 21 październik 2017, 17:39

Kolejne rozwiązanie tylko tylko CSS (choć potrzebny jest atrybut danych, jeśli nie chcesz pisać specyficznych dla listów CSS). Ten pracuje bardziej po drugiej stronie zarządu (testowany, tj. 9/10, Chrome Najnowsze & FF Ostatnie)

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>
43
Al Foиce ѫ 5 sierpień 2016, 12:40

ograniczone rozwiązanie CSS i JQUERY

Nie jestem pewien, jak elegancki to rozwiązanie jest, ale przecina wszystko dokładnie na pół: http://jsfiddle.net/ 9WXFY / 11 /

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

Spójrz na to najnowsze i dokładne, edytuj od 6/13/2016: http://jsfiddle.net/9WXFY/43/

Jeśli chodzi o CSS, jest bardzo ograniczony ... musisz zastosować go do :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>
38
Adjit 19 styczeń 2017, 15:23
.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 łastać ten kod do robienia wszelkiego rodzaju ciekawych rzeczy - jest to tylko jedna implementacja mojego współpracownika i przyszedłem zeszłej nocy.

30
Sam Tremaine 13 maj 2014, 09:26

Ładne rozwiązanie webkitowe, które wykorzystuje wsparcie background-clip: text: http://jsfiddle.net/sandro_paganotti/wlkvt/ .

span{
   font-size: 100px;
   background: linear-gradient(to right, black, black 50%, grey 50%, grey);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}
29
Sandro Paganotti 9 maj 2014, 17:50

Co powiesz na coś takiego dla krótszego tekstu?

Może nawet pracować na dłuższy tekst, jeśli zrobiłeś coś z pętlą, powtarzając znaki JavaScript. W każdym razie wynik jest taki:

Is it possible to apply CSS to half of a character?

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>
26
kshetline 11 kwiecień 2018, 06:22