是否可以将 CSS 应用于字符的一半?

我在寻找什么:

设置一个字符的一半样式的方法。 (在这种情况下,一半字母是透明的)

我目前正在搜索并尝试过的内容(没有运气):

  • 样式字符 / 字母一半的方法
  • 使用 CSS 或 JavaScript 设置字符的样式
  • 将 CSS 应用于字符的 50%

以下是我尝试获取的示例。

X

为此是否存在 CSS 或 JavaScript 解决方案,还是我不得不诉诸图像?我不希望使用图像路线,因为此文本最终会动态生成。


更新:

既然许多人问我为什么要对角色的一半进行样式设置,这就是为什么。我市最近花费了 25 万美元为自己定义了一个新的 “品牌”。他们想出了这个徽标 。许多人抱怨简单性和缺乏创造力,并继续这样做。我的目标是开个玩笑这个网站 。输入 “Halifax”,您将明白我的意思。

答案

现在作为插件在 GitHub 上!

在此处输入图片说明随意分叉和改进。

演示 | 下载 Zip | Half-Style.com (重定向到 GitHub)


  • 单个字符的纯 CSS
  • JavaScript 用于跨文本或多个字符的自动化
  • 为盲人或视障者的屏幕阅读器保留文本可访问性

第 1 部分:基本解决方案

文字的半样式

演示: http : //jsfiddle.net/arbel/pd9yB/1694/


这适用于任何动态文本或单个字符,并且都是自动化的。您需要做的就是在目标文本上添加一个类,其余的工作都将得到解决。

而且,为盲人或视障者的屏幕阅读器保留了原始文本的可访问性。

单个字符的说明:

纯 CSS。您需要做的就是将.halfStyle类应用于包含您要半样式设置的字符的每个元素。

对于每个包含字符的 span 元素,您可以创建一个 data 属性,例如,这里的data-content="X" ,在伪元素上使用content: attr(data-content);因此.halfStyle:before类将是动态的,并且您无需为每个实例进行硬编码。

任何文字的说明:

只需将textToHalfStyle类添加到包含文本的元素中。


// jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
    $el = $(el);
    text = $el.text();
    chars = text.split('');

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

    // Reset output for appending
    output = '';

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

    // Write to DOM only once
    $el.append(output);
  });
});
.halfStyle {
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: black; /* or transparent, any color */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}

.halfStyle:before {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

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

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

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

JSFiddle 演示


第 2 部分:高级解决方案 - 左右独立的部分

半文本样式-高级-带文本阴影

使用此解决方案,您可以分别和独立地为左右零件定型

一切都一样,只有更高级的 CSS 才能发挥作用。

jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
        $el = $(el);
        text = $el.text();
        chars = text.split('');

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

        // Reset output for appending
        output = '';

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

        // Write to DOM only once
        $el.append(output);
    });
});
.halfStyle {
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: transparent; /* hide the base character */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}

.halfStyle:before { /* creates the left part */
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #f00; /* for demo purposes */
    text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}

.halfStyle:after { /* creates the right part */
    display: block;
    direction: rtl; /* very important, will make the width to start from right */
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    pointer-events: none; /* so the base char is selectable by mouse */
    color: #000; /* for demo purposes */
    text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

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

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

JSFiddle 演示



第 3 部分:混搭和改进

现在我们知道了可行的方法,让我们创建一些变体。


- 水平半部

  • 没有文字阴影:

    水平半部-无文字阴影

  • 每个部分的文本阴影的可能性分别为:

    halfStyle-水平半部-带有文字阴影

// jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
        $el = $(el);
        text = $el.text();
        chars = text.split('');

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

        // Reset output for appending
        output = '';

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

        // Write to DOM only once
        $el.append(output);
    });
});
.halfStyle {
  position: relative;
  display: inline-block;
  font-size: 80px; /* or any font size will work */
  color: transparent; /* hide the base character */
  overflow: hidden;
  white-space: pre; /* to preserve the spaces from collapsing */
}

.halfStyle:before { /* creates the top part */
  display: block;
  z-index: 2;
  position: absolute;
  top: 0;
  height: 50%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  pointer-events: none; /* so the base char is selectable by mouse */
  color: #f00; /* for demo purposes */
  text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}

.halfStyle:after { /* creates the bottom part */
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  height: 100%;
  content: attr(data-content); /* dynamic content for the pseudo element */
  overflow: hidden;
  pointer-events: none; /* so the base char is selectable by mouse */
  color: #000; /* for demo purposes */
  text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

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

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

JSFiddle 演示



- 垂直 1/3 零件

  • 没有文字阴影:

    halfStyle-垂直的1/3部分-无文字阴影

  • 每个 1/3 部分的文本阴影的可能性分别为:

    halfStyle-垂直的1/3部分-带文字阴影

JSFiddle 演示



-HalfStyle 改进 @KevinGranger

halfStyle-KevinGranger

// jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
    $el = $(el);
    text = $el.text();
    chars = text.split('');

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

    // Reset output for appending
    output = '';

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

    // Write to DOM only once
    $el.append(output);
  });
});
body {
    background-color: black;
}

.textToHalfStyle {
    display: block;
    margin: 200px 0 0 0;
    text-align: center;
}

.halfStyle {
    font-family: 'Libre Baskerville', serif;
    position: relative;
    display: inline-block;
    width: 1;
    font-size: 70px;
    color: black;
    overflow: hidden;
    white-space: pre;
    text-shadow: 1px 2px 0 white;
}

.halfStyle:before {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

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

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

JSFiddle 演示



-SelTremaine 对 HalfStyle 的PeelingStyle改进

halfStyle-SamTremaine

// jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
    $el = $(el);
    text = $el.text();
    chars = text.split('');

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

    // Reset output for appending
    output = '';

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

    // Write to DOM only once
    $el.append(output);
  });
});
.halfStyle {
    position: relative;
    display: inline-block;
    font-size: 68px;
    color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    white-space: pre;
    transform: rotate(4deg);
    text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
}

.halfStyle:before { /* creates the left part */
    display: block;
    z-index: 1;
    position: absolute;
    top: -0.5px;
    left: -3px;
    width: 100%;
    content: attr(data-content);
    overflow: hidden;
    pointer-events: none;
    color: #FFF;
    transform: rotate(-4deg);
    text-shadow: 0px 0px 1px #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

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

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

JSFiddle 演示samtremaine.co.uk 上



第 4 部分:准备生产

可以在同一页面上的所需元素上使用自定义的不同 Half-Style 样式集。您可以定义多个样式集,并告诉插件使用哪个样式集。

该插件在目标.textToHalfStyle元素上使用数据属性data-halfstyle="[-CustomClassName-]"并自动进行所有必要的更改。

因此,只需在包含文本的元素上添加textToHalfStyle类和数据属性data-halfstyle="[-CustomClassName-]" 。该插件将完成其余的工作。

JSFiddle 演示

在此处输入图片说明


我刚刚完成了插件的开发,每个人都可以使用它!希望你会喜欢它。

GitHub 上查看项目 - 查看项目网站(因此您可以看到所有拆分样式)

用法

首先,确保包含了jQuery库。获得最新 jQuery 版本的最佳方法是使用以下方法更新 head 标签:

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

下载文件后,请确保将它们包括在项目中:

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

标记

您所要做的就是为类splitchar分配一个splitchar ,然后为包装文本的元素添加所需的样式。例如

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

完成所有这些操作后,只需确保在文档就绪文件中调用 jQuery 函数,如下所示:

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

客制化

为了使文本看起来像您想要的那样,您要做的就是应用如下设计:

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


而已!现在,您已经全部设置了Splitchar插件。有关它的更多信息,请访问http://razvanbalosin.com/Splitchar.js/

编辑(2017 年 10 月):每个主要浏览器现在都支持background-clipbackground-image optionsCanIUse

是的,您只能使用一个字符和 CSS。

仅限 Webkit(和 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>

从视觉上看,所有使用两个字符的示例(通过 JS,CSS 伪元素或只是 HTML)看起来都不错,但请注意,所有示例都向 DOM 添加了内容,这可能会导致可访问性 - 以及文本选择 / 剪切 / 粘贴问题。

例


JSFiddle 演示

我们将仅使用 CSS 伪选择器来做到这一点!

此技术适用于动态生成的内容以及不同的字体大小和宽度。

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

要包装动态生成的字符串,可以使用如下函数:

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

可能无关紧要,也许没有关系,但是前一段时间,我创建了一个 jQuery 函数,它水平执行相同的操作。

我称其为 “Strippex”,代表 “stripe” +“text”,演示: http ://cdpn.io/FcIBg

我并不是说这是任何问题的解决方案,但我已经尝试将 css 应用于字符的一半,但是从水平方向看,所以想法是相同的,实现可能很可怕,但是可以。

啊,最重要的是,我创造了它很有趣!

在此处输入图片说明

如果您对此感兴趣,那么卢卡斯 · 贝伯(Lucas Bebber)的故障(Glitch)就是一个非常相似且超酷的效果:

在此处输入图片说明

使用简单的 SASS Mixin 创建,例如

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

Chris Coyer 的 CSS 技巧Lucas Bebber 的 Codepen 页面上的更多详细信息

这是一个在画布上的丑陋实现。我尝试了此解决方案,但结果比我预期的要差,因此无论如何都是这样。

画布示例

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

我能得到的最近的:

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

演示: http//jsfiddle.net/9wxfY/2/

这是仅使用一个跨度的版本: http : //jsfiddle.net/9wxfY/4/

在此处输入图片说明

我只是玩过 @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>

另一个仅 CSS 的解决方案(如果您不想编写特定于字母的 CSS,则需要数据属性)。此功能可全面运行(经过测试的 IE 9/10,Chrome 最新和 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>