È possibile applicare CSS a metà di un personaggio?


2818

Cosa sto cercando:

Un modo per dare uno stile a MEZZA di un personaggio. (In questo caso, metà della lettera è trasparente)

Quello che ho attualmente cercato e provato (senza fortuna):

  • Metodi per lo styling di metà di un carattere / lettera
  • Stile di una parte di un personaggio con CSS o JavaScript
  • Applica CSS al 50% di un personaggio

Di seguito è riportato un esempio di ciò che sto cercando di ottenere.

X

Esiste una soluzione CSS o JavaScript per questo, o dovrò ricorrere alle immagini? Preferirei non seguire il percorso dell'immagine poiché questo testo finirà per essere generato dinamicamente.


AGGIORNARE:

Dato che molti mi hanno chiesto perché avrei mai voluto modellare la metà di un personaggio, ecco perché. La mia città ha recentemente speso $ 250.000 per definire un nuovo "marchio" per sé. Questo logo è quello che hanno inventato. Molte persone si sono lamentate della semplicità e della mancanza di creatività e continuano a farlo. Il mio obiettivo era inventare questo sito come uno scherzo. Digita "Halifax" e vedrai cosa intendo.


1
I commenti non sono per una discussione estesa; questa conversazione è stata spostata in chat .
Yvette,

6
Stavano chiedendo "perché" perché volevano sapere perché avresti usato CSS e non SVG o un editor di immagini. Niente a che vedere con le decisioni aziendali sul loro logo. Come per il tuo link al loro logo, perché non hai semplicemente ritagliato la X?
user9993

1
Non posso lamentarmi di questo logo. Molto meglio di quel faro insanguinato.
Parapluie,

@Parapluie Dovrei essere d'accordo!
Mathew MacLean,

Risposte:


2941

Ora su GitHub come plugin!

inserisci qui la descrizione dell'immagine Sentiti libero di sborsare e migliorare.

Demo | Scarica Zip | Half-Style.com (reindirizza a GitHub)


  • CSS puro per un singolo personaggio
  • JavaScript utilizzato per l'automazione di testo o più caratteri
  • Conserva l'accessibilità del testo per gli screen reader per non vedenti o ipovedenti

Parte 1: soluzione di base

Mezzo stile sul testo

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


Funziona su qualsiasi testo dinamico o singolo carattere ed è tutto automatizzato. Tutto quello che devi fare è aggiungere una classe sul testo di destinazione e il resto è curato.

Inoltre, l'accessibilità del testo originale è preservata per gli screen reader per non vedenti o ipovedenti.

Spiegazione per un singolo personaggio:

CSS puro. Tutto quello che devi fare è applicare la .halfStyleclasse a ciascun elemento che contiene il personaggio che vuoi essere in stile metà.

Per ogni elemento span contenente il carattere, è possibile creare un attributo di dati, ad esempio qui data-content="X", e sull'uso dello pseudo elemento in content: attr(data-content);modo che la .halfStyle:beforeclasse sia dinamica e non sarà necessario codificarla per ogni istanza.

Spiegazione per qualsiasi testo:

Aggiungi semplicemente textToHalfStyleclasse all'elemento che contiene il testo.


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


Parte 2: soluzione avanzata - Parti sinistra e destra indipendenti

Mezzo stile sul testo - avanzato - Con ombra del testo

Con questa soluzione è possibile modellare le parti sinistra e destra, individualmente e indipendentemente .

Tutto è uguale, solo i CSS più avanzati fanno la magia.

( Demo JSFiddle )



Parte 3: mix-match e miglioramento

Ora che sappiamo cosa è possibile, creiamo alcune varianti.


-Metà parti orizzontali

  • Senza ombra del testo:

    Mezze parti orizzontali - Nessuna ombra di testo

  • Possibilità di Text Shadow per ogni mezza parte in modo indipendente:

    halfStyle - Mezze parti orizzontali - Con ombra del testo

( Demo JSFiddle )



-Versici 1/3 verticali

  • Senza ombra del testo:

    halfStyle - Parti verticali 1/3 - Nessuna ombra di testo

  • Possibilità di Text Shadow per ogni parte 1/3 in modo indipendente:

    halfStyle - Parti verticali 1/3 - Con ombra del testo

( Demo JSFiddle )



-Orizzontali 1/3 parti

  • Senza ombra del testo:

    halfStyle - Parti 1/3 orizzontali - Nessuna ombra di testo

  • Possibilità di Text Shadow per ogni parte 1/3 in modo indipendente:

    halfStyle - Parti 1/3 orizzontali - Con ombra del testo

( Demo JSFiddle )



Miglioramento di HalfStyle di @KevinGranger

halfStyle - KevinGranger

( Demo JSFiddle )



-PeelingStyle miglioramento di HalfStyle di @SamTremaine

halfStyle - SamTremaine

( JSFiddle demo e su samtremaine.co.uk )



Parte 4: Pronto per la produzione

È possibile utilizzare diversi set di stili a mezzo stile personalizzati sugli elementi desiderati nella stessa pagina. È possibile definire più set di stili e indicare al plugin quale utilizzare.

Il plugin utilizza l'attributo data data-halfstyle="[-CustomClassName-]"sugli .textToHalfStyleelementi target e apporta automaticamente tutte le modifiche necessarie.

Quindi, semplicemente sull'elemento contenente il testo aggiungi textToHalfStyleclasse e attributo dati data-halfstyle="[-CustomClassName-]". Il plugin farà il resto del lavoro.

halfStyle - Multiple sulla stessa pagina

Anche le definizioni di classe dei set di stili CSS corrispondono alla [-CustomClassName-]parte sopra menzionata ed è incatenata .halfStyle, quindi avremo.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 )


I commenti non sono per una discussione estesa; questa conversazione è stata spostata in chat .
Yvette,

7
Questo è molto bello. Vale la pena notare che questa tecnica rompe i CSS a capo automatico, spaziali e spaziali.
Andrew Ensley,

2
Bello vedere che siamo tornati al punto di
partenza

488

inserisci qui la descrizione dell'immagine


Ho appena finito di sviluppare il plugin ed è disponibile per tutti! Spero che ti piaccia.

Visualizza progetto su GitHub - Visualizza il sito Web del progetto . (così puoi vedere tutti gli stili divisi)

uso

Prima di tutto, assicurati di avere la jQuerylibreria inclusa. Il modo migliore per ottenere l'ultima versione di jQuery è aggiornare il tag head con:

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

Dopo aver scaricato i file, assicurati di includerli nel tuo progetto:

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

markup

Tutto quello che devi fare è assegnare la classe splitchar, seguita dallo stile desiderato all'elemento che avvolge il testo. per esempio

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

Al termine, assicurati di chiamare la funzione jQuery nel file pronto per il documento in questo modo:

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

Personalizzazione

Per rendere il testo esattamente come lo desideri, tutto ciò che devi fare è applicare il tuo disegno in questo modo:

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


Questo è tutto! Ora hai il Splitcharplugin tutto pronto. Maggiori informazioni al riguardo su http://razvanbalosin.com/Splitchar.js/ .


A partire da ora, la soluzione è la più semplice da implementare per più personaggi, ma non ancora al 100% lì.
Mathew MacLean,

@MathewMacLean emisfera deve avere la risposta, giusto?
mttdbrd,

3
Ciò ha problemi con la disposizione del testo che è esposta anche nell'ultimo violino. Quando un personaggio si avvolge, si divide essenzialmente in due. Dovrebbe essere una soluzione banale, però.
BoltClock

16
Non dipendere da jquery-latest.min.js, può interrompere i siti senza preavviso se jQuery viene aggiornato e il plug-in non funziona con quello più recente. Invece: utilizzare una versione specifica e verificare la compatibilità durante l'aggiornamento.
Niels Bom,

2
Potresti voler modificare la tua risposta per non suggerire di usare jquery-latest.js. Come accennato da @NielsBom, in passato poteva rompere il tuo sito quando veniva aggiornato. Da luglio 2014 non lo farà, ma è perché è bloccato alla versione 1.11.1 e non verrà mai più aggiornato.
Codice inutile

237

Modifica (ottobre 2017): background-clipo meglio background-image optionsora sono supportati da tutti i principali browser: CanIUse

Sì, puoi farlo con un solo carattere e solo CSS.

Solo Webkit (e Chrome), tuttavia:

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>

Visivamente, tutti gli esempi che usano due caratteri (sia tramite JS, pseudo elementi CSS o solo HTML) sembrano a posto, ma si noti che tutti aggiungono contenuto al DOM che può causare accessibilità, nonché selezione / taglio / incolla problemi.


34
@MathewMacLean i nostri lavori sarebbero molto più facili se solo IE morisse e Firefox iniziasse a utilizzare Webkit. :)
DA.

48
WebKit ha una storia di rendering di bachi che sono quasi bizzarri livelli di IE6 / IE7 (si potrebbe anche dire che Safari e Chrome sono IE6 del web moderno) e che si comportano in modi che si discostano dallo standard senza un motivo particolare. IE è stato molto meglio dalla versione 9, quindi mentre le versioni antiche dovrebbero già morire, non vedo alcun motivo per l'odio per le sue versioni recenti. E certamente non vedo perché la gente sostenga l'idea di una monocultura WebKit / Blink (i commenti qui sono probabilmente per scherzo, ma ho sentito parlare di persone che ci credono seriamente).
BoltClock

3
Detto questo, background-clip: textè super fantastico e dovrebbero considerarlo (o qualcosa di simile text-decoration-background) per un modulo di livello 4.
BoltClock

2
Sì, sarei più felice se il battito di ciglia / webkit fosse morto e i moderni motori di rendering di IE + FF sopravvissero rispetto al contrario. Il che non vuol dire che il resto di Chrome non sia bello, solo che il suo rendering è praticamente il peggiore del gruppo al giorno d'oggi.
Eamon Nerbonne,

2
Questa è una soluzione molto più pulita rispetto alle librerie di hacky sopra, dovrebbe essere una risposta accettata poiché i gradienti di testo sono utilizzabili al giorno d'oggi.
mystrdat,

160

Esempio


JSFiddle DEMO

Lo faremo usando solo pseudo-selettori CSS!

Questa tecnica funzionerà con contenuti generati dinamicamente e diverse dimensioni e larghezze dei caratteri.

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

Per avvolgere la stringa generata dinamicamente, è possibile utilizzare una funzione come questa:

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

Questo è pulito, ma l'unico problema è che il contenuto sarà dinamico.
Mathew MacLean,

I risultati variano a seconda del carattere utilizzato. Inoltre, calcolare la larghezza sembra un problema.
j08691,

@MathewMacLean hmm, il tuo contenuto sarà mai un solo personaggio? In caso contrario, vorresti che ogni personaggio avesse lo stesso effetto di colore diviso o solo alcuni (cioè il primo)?
wvandaal,

1
@MathewMacLean puoi scrivere una semplice funzione loop in JS per realizzare il wrapping. Lo sto aggiungendo alla mia risposta ora.
wvandaal

1
@MathewMacLean Da dove proviene il testo? wvandaal ha ragione, puoi avvolgere il testo da solo.
mttdbrd,

96

Potrebbe essere irrilevante, forse no, ma qualche tempo fa ho creato una funzione jQuery che fa la stessa cosa, ma in orizzontale.

L'ho chiamato "Strippex" Per 'stripe' + 'text', demo: http://cdpn.io/FcIBg

Non sto dicendo che questa sia la soluzione di eventuali problemi, ma ho già provato ad applicare css a metà di un personaggio, ma in orizzontale, quindi l'idea è la stessa, la realizzazione può essere orribile, ma funziona.

Ah, e il più importante, mi sono divertito a crearlo!

inserisci qui la descrizione dell'immagine


2
@Luky Vj: questo account è tuo? Potresti voler consolidare tutti i tuoi post in un unico account in modo da non incorrere in blocchi stradali che provano a modificare i tuoi post.
BoltClock

Sì, in effetti, ho pubblicato per la prima volta con il mio vecchio primo account .. E ho dovuto aggiungere un'immagine, e non ero abbastanza popolare per pubblicare la mia immagine .. Ma hai ragione, lo riparerò il prima possibile !
LukyVj,

1
@LukyVj: È possibile unire gli account seguendo le istruzioni qui: stackoverflow.com/help/merging-accounts
BoltClock

1
@LukyVj Ho aggiornato la tua funzione aggiungendo pointer-events:nonea &:nth-child(2)- &:nth-child(5). Questo lo rende in modo che il testo possa essere evidenziato solo una volta e ne ottieni solo una copia. Puoi vederlo qui: codepen.io/anon/pen/upLaj
Mathew MacLean


74

Ecco una brutta implementazione in tela. Ho provato questa soluzione, ma i risultati sono peggiori di quanto mi aspettassi, quindi eccolo qui.

Esempio di tela

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


1
A proposito, puoi usare anche 0.5per la fermata del colore rosso.
Spazzolino da denti

62

Il più vicino che posso ottenere:

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

Ecco una versione che utilizza solo una span: http://jsfiddle.net/9wxfY/4/


1
$('span').width()restituisce solo la larghezza della prima apertura che trova; dovrebbe essere qualcosa che hai fatto per ogni coppia. Il che mi dà un'idea ...
punta

Questo è abbastanza simile all'esempio di epascarello trovato su jsfiddle.net/9WWsd. Come gli ho detto, il tuo esempio è un passo nella giusta direzione, ma sarebbe un incubo usare su una scala più ampia.
Mathew MacLean

@MathewMacLean, non l'ho visto. Perché sarebbe un incubo? Che ne dici di questo: jsfiddle.net/9wxfY/4
Prigioniero

Quando si implementa più di un personaggio, si verificano problemi.
Mathew MacLean,

@MathewMacLean è qui che entra in gioco il favoloso Lettering.JS .
punta

53

Inserisci qui la descrizione dell'immagine

Ho appena giocato con la soluzione di @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>


4
Ho appena giocato con la soluzione @Arbel Quali sono le differenze con la soluzione di Arbel? È difficile vedere se hai incollato e copiato solo del codice o migliorato.
AL

43

Un'altra soluzione solo CSS (sebbene l'attributo data sia necessario se non si desidera scrivere CSS specifici per le lettere). Questo funziona di più su tutta la linea (Tested IE 9/10, Chrome latest & FF latest)

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>


38

CSS limitato e soluzione jQuery

Non sono sicuro di quanto sia elegante questa soluzione, ma taglia tutto esattamente a metà: http://jsfiddle.net/9wxfY/11/

Altrimenti, ho creato una buona soluzione per te ... Tutto quello che devi fare è avere questo per il tuo HTML:

Dai un'occhiata a questa modifica più recente e accurata al 13/06/2016: http://jsfiddle.net/9wxfY/43/

Per quanto riguarda il CSS, è molto limitato ... Devi solo applicarlo :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>


Questo ha gli stessi problemi che hanno gli altri. Questo inizia a diventare disordinato quando si tenta di farlo con più di un personaggio.
Mathew MacLean,

@MathewMacLean Lo so :( ho visto anche quello. Ci sto lavorando ora
Aggiunta

@MathewMacLean l'ha risolto, ma non sono sicuro di quanto sia pulito JQuery ora. Dai un'occhiata
Aggiusta

@MathewMacLean aggiungendo alla versione webkit di cose potresti usare una soluzione come questa: jsfiddle.net/wLkVt/1
Aggiunta

@MathewMacLean Risolto l'errore nel mio script. Il motivo dell'errore era che stavo prendendo sempre la larghezza del primissimo elemento, anziché la larghezza delle lettere.
Aggiunta il

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/

Puoi forzare questo codice a fare ogni sorta di cose interessanti - questa è solo un'implementazione che io e il mio socio abbiamo inventato ieri sera.



24

Che ne dici di qualcosa del genere per un testo più breve?

Potrebbe anche funzionare per un testo più lungo se hai fatto qualcosa con un ciclo, ripetendo i caratteri con JavaScript. Ad ogni modo, il risultato è qualcosa del genere:

È possibile applicare CSS a metà di un personaggio?

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>


23

FWIW, ecco la mia opinione su questo farlo solo con CSS: http://codepen.io/ricardozea/pen/uFbts/

Numerose note:

  • Il motivo principale per cui ho fatto questo è stato quello di mettermi alla prova e vedere se ero in grado di realizzare lo stile di metà di un personaggio, fornendo in realtà una risposta significativa all'OP.

  • Sono consapevole che questa non è la soluzione ideale o più scalabile e che le soluzioni proposte dalle persone qui sono di gran lunga migliori per gli scenari del "mondo reale".

  • Il codice CSS che ho creato si basa sui primi pensieri che mi sono venuti in mente e sul mio approccio personale al problema.

  • La mia soluzione funziona solo su caratteri simmetrici, come X, A, O, M. ** Non funziona su caratteri asimmetrici come B, C, F, K o lettere minuscole.

  • ** TUTTAVIA, questo approccio crea "forme" molto interessanti con caratteri asimmetrici. Prova a cambiare la X in una K o in una lettera minuscola come una h o una p nel 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);
  }
}

17

Puoi anche farlo usando SVG, se desideri:

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


16

Ciò può essere ottenuto solo con il :beforeselettore CSS e 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>

>> Vedi su jsFiddle


8

Puoi usare il codice qui sotto. Qui in questo esempio ho usato il h1tag e ho aggiunto un attributo data-title-text="Display Text"che apparirà con un testo di colore diverso sull'elemento di testo del h1tag, che dà effetto al testo a metà colorato come mostrato nell'esempio seguente

inserisci qui la descrizione dell'immagine

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>


5

Solo per la cronaca della storia!

Ho trovato una soluzione per il mio lavoro di 5-6 anni fa, che è Gradext (javascript puro e css puro, nessuna dipendenza).

La spiegazione tecnica è che puoi creare un elemento come questo:

<span>A</span>

ora, se vuoi creare una sfumatura sul testo, devi creare alcuni livelli multipli, ciascuno dei quali è specificamente colorato e lo spettro creato illustrerà l'effetto sfumatura.

ad esempio guarda che questa è la parola lorem all'interno di a <span>e causerà un effetto gradiente orizzontale ( controlla gli esempi ):

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

e puoi continuare a fare questo schema per molto tempo e anche per un lungo paragrafo.

inserisci qui la descrizione dell'immagine

Ma!

Cosa succede se si desidera creare un effetto gradiente verticale sui testi?

Poi c'è un'altra soluzione che potrebbe essere utile. Descriverò in dettaglio.

Supponendo di <span>nuovo il nostro primo . ma il contenuto non dovrebbe essere le lettere individualmente; il contenuto dovrebbe essere l'intero testo, e ora stiamo andando a copiare lo stesso <span>ancora e ancora (conteggio delle campate definirà la qualità della vostra pendenza, maggiore durata, un risultato migliore, ma scarso rendimento). dai un'occhiata a questo:

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

inserisci qui la descrizione dell'immagine

Ancora una volta, ma!

cosa succede se si desidera che questi effetti sfumati si spostino e ne creino un'animazione?

bene, c'è un'altra soluzione anche per questo. Dovresti assolutamente controllare animation: trueo anche il .hoverable()metodo che porterà ad un gradiente per iniziare in base alla posizione del cursore! (sembra fantastico xD)

inserisci qui la descrizione dell'immagine

questo è semplicemente il modo in cui creiamo gradienti (lineari o radiali) sui testi. Se ti è piaciuta l'idea o vuoi saperne di più, dovresti controllare i link forniti.


Forse questa non è l'opzione migliore, forse non il modo migliore per farlo, ma aprirà un po 'di spazio per creare animazioni emozionanti e deliziose per ispirare altre persone a trovare una soluzione migliore.

Ti permetterà di usare lo stile gradiente sui testi, che è supportato anche da IE8!

Qui puoi trovare una demo live funzionante e il repository originale è anche qui su GitHub, open source e pronto per ottenere alcuni aggiornamenti (: D)

Questa è la mia prima volta (sì, dopo 5 anni, l'hai sentito bene) per menzionare questo repository ovunque su Internet, e ne sono entusiasta!


[Aggiornamento - Agosto 2019:] Github ha rimosso la demo di github-pagine di quel repository perché vengo dall'Iran! Qui è disponibile solo il codice sorgente ...

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.