Est-il possible d'appliquer le style CSS à la moitié d'un personnage?

Question

Ce que je recherche:

Une façon pour le style de la MOITIÉ d'un personnage. (Dans ce cas, la moitié de la lettre transparent)

Ce que j'ai actuellement cherché et essayé (sans succès):

• Méthodes pour le style de la moitié d'un personnage/lettre
• Style de caractères avec CSS ou JavaScript
• Appliquer le style CSS à 50% d'un personnage

Ci-dessous est un exemple de ce que je suis en train d'essayer d'obtenir.

Un CSS ou JavaScript solution existe pour ce ou vais-je avoir recours à des images? Je préfère ne pas aller à l'image de l'itinéraire que ce texte sera généré dynamiquement.

---

Mise à JOUR:

Depuis plusieurs m'ont demandé pourquoi je n'aurais jamais qui veulent style de la moitié d'un personnage, c'est pourquoi. Ma ville a récemment passé de 250 000 $à définir une nouvelle "marque" pour lui-même. Ce LOGO est ce qu'ils sont venus avec. Beaucoup de gens se sont plaints de la simplicité et le manque de créativité et de continuer à le faire. Mon but était de venir avec ce SITE web comme une blague. Tapez dans "Halifax" et vous verrez ce que je veux dire. :)

Answer 1

Maintenant sur GitHub comme un Plugin!

Hésitez pas à fourche et de s'améliorer.

Démo | Zip de Téléchargement | Half-Style.com (Redirige vers GitHub)

---

• Pur CSS pour un Seul Caractère
• JavaScript utilisé pour l'automatisation à travers un texte ou de plusieurs caractères
• Préserve le Texte de l'Accessibilité pour les lecteurs d'écran pour les aveugles ou malvoyants altération de la

Part1: Solution De Base

Démo: http://jsfiddle.net/pd9yB/817/

---

Cela fonctionne sur n'importe quel texte dynamique, ou un seul caractère, et est entièrement automatisé. Tout ce que vous devez faire est d'ajouter une classe sur le texte cible et le reste est pris en charge.

Aussi, l'accessibilité du texte original est conservé pour les lecteurs d'écran pour les aveugles ou les malvoyants.

Explication pour un seul caractère:

Pur CSS. Tout ce que vous devez faire est de s'inscrire .halfStyle classe pour chaque élément qui contient le caractère que vous voulez être de la moitié de style.

Pour chaque élément span contenant les caractères, vous pouvez créer une base de données d'attribut, par exemple ici, data-content="X", et sur le pseudo-élément content: attr(data-content); si l' .halfStyle:before classe sera dynamique et vous n'aurez pas besoin de coder en dur pour chaque instance.

Explication de texte:

Ajoutez simplement textToHalfStyle classe de l'élément contenant le texte.

---

CSS:

.halfStyle {
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    color: black; /* or transparent, any color */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    left:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: #f00;
}

HTML

<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

---

Pour le rendre automatisé, il suffit d'ajouter textToHalfStyle classe de l'élément contenant le texte.

jQuery pour le mode automatique:

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

Démo: http://jsfiddle.net/pd9yB/819/

---

Part2: solution de pointe - gauche et de la droite des pièces

Avec cette solution, vous pouvez style les parties gauche et droite, individuellement et de façon indépendante.

Tout est la même, seuls les plus avancés CSS fait la magie.

Démo: http://jsfiddle.net/pd9yB/819/

.halfStyle {
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    color: transparent; /* hide the base character */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before { /* creates the left part */
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle:after { /* creates the right part */
    display:block;
    direction: rtl; /* very important, will make the width to start from right */
    position:absolute;
    z-index:2;
    top:0;
    left:50%;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

---

---

Part3: Mix-Match et d'Améliorer

Maintenant que nous savons ce qui est possible, nous allons créer des variations.

---

-Horizontale De La Moitié Des Pièces

Démo

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

---

---

-Verticale 1/3 Pièces

Démo

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

---

---

-Horizontal 1/3 Pièces

Démo

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

---

---

-HalfStyle Amélioration Par @KevinGranger

DÉMO

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

---

---

-PeelingStyle amélioration de HalfStyle par @SamTremaine

Démo et sur samtremaine.co.royaume-uni

.halfStyle {
    position: relative;
    display: inline-block;
    font-size: 68px;
    color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    white-space: pre;
    transform: rotate(4deg);
    text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
}
.halfStyle:before { /* creates the left part */
    display: block;
    z-index: 1;
    position: absolute;
    top: -0.5px;
    left: -3px;
    width: 100%;
    content: attr(data-content);
    overflow: hidden;
    pointer-events: none;
    color: #FFF;
    transform: rotate(-4deg);
    text-shadow: 0px 0px 1px #000;
}

---

---

Part4: Prêt pour la Production

Personnalisés différente de la Moitié de Style de style-jeux peuvent être utilisés sur les éléments souhaités sur la même page. Vous pouvez définir plusieurs style de jeux et de dire le plugin à utiliser.

Le plugin utilise les données de l'attribut data-halfstyle="[-CustomClassName-]" sur la cible .textToHalfStyle - éléments et fait tous les changements nécessaires automatiquement.

Donc, tout simplement sur l'élément contenant le texte ajouter textToHalfStyle de la classe et de l'attribut de données data-halfstyle="[-CustomClassName-]". Le plugin se chargera de faire le reste du travail.

Démonstration de Plusieurs Demi-Styles sur la même page.

jQuery(function($) {
    var halfstyle_text, halfstyle_chars, $halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_style;

    // Iterate over all class occurrences
    $('.textToHalfStyle').each(function(idx, halfstyle_el) {
        $halfstyle_el = $(halfstyle_el);
        halfstyle_style = $halfstyle_el.data('halfstyle');
        halfstyle_text = $halfstyle_el.text();
        halfstyle_chars = halfstyle_text.split('');

        // Set the screen-reader text
        $halfstyle_el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + halfstyle_text + '</span>');

        // Reset output for appending
        halfstyle_output = '';

        // Iterate over all chars in the text
        for (halfstyle_i = 0; halfstyle_i < halfstyle_chars.length; halfstyle_i++) {
            // Create a styled element for each character and append to container
            halfstyle_output += '<span aria-hidden="true" class="halfStyle ' + halfstyle_style + '" data-content="' + halfstyle_chars[halfstyle_i] + '">' + halfstyle_chars[halfstyle_i] + '</span>';
        }

        // Write to DOM only once
        $halfstyle_el.append(halfstyle_output);
    });
});

Aussi le style CSS- " jeux de définitions de classe de match de l' [-CustomClassName-] le cadre mentionné ci-dessus et est lié à l' .halfStyle, de sorte que nous devons .halfStyle.[-CustomClassName-]

 /* start half-style hs-base */
 .halfStyle.hs-base {
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #000; /* for demo purposes */
}
.halfStyle.hs-base:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    pointer-events: none; /* so the base char is selectable by mouse */
    overflow:hidden;
    color: #f00; /* for demo purposes */
}
 /* end half-style hs-base */

/* start half-style hs-horizontal-third */
.halfStyle.hs-horizontal-third { /* base char and also the bottom 1/3 */
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    color: transparent;
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #f0f;
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
.halfStyle.hs-horizontal-third:before { /* creates the top 1/3 */
    display:block;
    z-index:2;
    position:absolute;
    top:0;
    height: 33.33%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #fa0; /* for demo purposes */
}
.halfStyle.hs-horizontal-third:after { /* creates the middle 1/3 */
    display:block;
    position:absolute;
    z-index:1;
    top:0;
    height: 66.66%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}
/* end half-style hs-horizontal-third */

/* start half-style hs-PeelingStyle, by user SamTremaine on Stackoverflow.com */
.halfStyle.hs-PeelingStyle {
    position: relative;
    display: inline-block;
    font-size: 68px;
    color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    white-space: pre;
    transform: rotate(4deg);
    text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
}
.halfStyle.hs-PeelingStyle:before { /* creates the left part */
    display: block;
    z-index: 1;
    position: absolute;
    top: -0.5px;
    left: -3px;
    width: 100%;
    content: attr(data-content);
    overflow: hidden;
    pointer-events: none;
    color: #FFF;
    transform: rotate(-4deg);
    text-shadow: 0px 0px 1px #000;
}
/* end half-style hs-PeelingStyle */

/* start half-style hs-KevinGranger, by user KevinGranger on StackOverflow.com*/
.textToHalfStyle.hs-KevinGranger {
    display:block;
    margin: 200px 0 0 0;
    text-align:center;
}

.halfStyle.hs-KevinGranger {
    font-family: 'Libre Baskerville', serif;
    position:relative;
    display:inline-block;
    width:1;
    font-size:70px;
    color: black;
    overflow:hidden;
    white-space: pre;
    text-shadow: 1px 2px 0 white;
}
.halfStyle.hs-KevinGranger:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: white;
}
/* end half-style hs-KevinGranger

HTML:

<p>
    <span class="textToHalfStyle" data-halfstyle="hs-base">Half-style, please.</span>
</p>
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-horizontal-third">Half-style, please.</span>
</p>
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-PeelingStyle">Half-style, please.</span>
</p>
<p style="background-color:#000;">
    <span class="textToHalfStyle" data-halfstyle="hs-KevinGranger">Half-style, please.</span>
</p>

Démonstration de Plusieurs Demi-Styles sur la même page.

Answer 2

Je viens de terminer le développement du plugin et il est disponible pour tout le monde! Nous espérons que vous apprécierez.

Visualiser le Projet sur GitHub - Visualiser le Projet de Site web. (de sorte que vous pouvez voir tous les split styles)

L'utilisation de la

Tout d'abord, assurez-vous d'avoir l' jQuery bibliothèque est incluse. Le meilleur moyen pour obtenir la dernière version jQuery est de mettre à jour votre balise head:

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

Après avoir téléchargé les fichiers, assurez-vous d'inclure dans votre projet:

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

Balisage

Tout ce que vous avez à faire est d'assigner la classe splitchar , suivi par le style désiré à l'élément d'emballage de votre texte. e.g

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

Après tout, c'est fait, assurez-vous juste d'appeler la fonction jQuery dans votre document prêt fichier comme ceci:

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

Personnalisation de l'

Afin de rendre le texte exactement comme vous le voulez, tout ce que vous avez à faire est d'appliquer votre conception de ce genre:

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

Ça y est! Maintenant, vous avez la Splitchar plugin tous ensemble. Plus d'infos à ce sujet à emisfera.github.io/Splitchar.

Answer 3

Oui, vous pouvez le faire avec un seul personnage et uniquement CSS.

Webkit (Chrome), mais:

http://jsbin.com/rexoyice/1/

HTML:

<h1>X</h1>

CSS:

h1 {
  display: inline-block;
  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;
}

Visuellement, tous les exemples d'utilisation de deux personnages (que ce soit via JS, CSS pseudo-éléments, ou tout simplement HTML) l'air bien, mais prendre note que tous les ajoute du contenu pour les DOM qui peut causer de l'accessibilité, ainsi que la sélection de texte/couper/coller des questions.

Answer 4

---

JSFiddle DÉMO

Nous allons le faire en utilisant seulement CSS sélecteurs de pseudo!

Cette technique fonctionne avec un contenu généré dynamiquement et différentes tailles de police et de largeurs.

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

Pour envelopper le générées dynamiquement chaîne, vous pouvez utiliser une fonction comme ceci:

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

Answer 5

Il peut être sans importance, peut-être pas, mais il y a quelque temps, j'ai créé une fonction jQuery qui fait la même chose, mais à l'horizontale.

Je l'ai appelé "Strippex" Pour 'stripe'+'texte', démonstration : http://cdpn.io/FcIBg

Je ne dis pas que c'est la solution de tous les problèmes, mais j'ai déjà essayé d'appliquer le style css à la moitié d'un personnage, mais à l'horizontale, Donc l'idée est la même, la réalisation peut être horrible, mais il fonctionne.

Ah, et le plus important, j'ai eu plaisir à le créer !