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

2815

我在寻找什么：

设置一个字符的一半样式的方法。（在这种情况下，一半字母是透明的）

我目前正在搜索并尝试过的内容（没有运气）：

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

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

X

为此是否存在CSS或JavaScript解决方案，还是我不得不诉诸图像？我宁愿不走图片路线，因为此文本最终会动态生成。

更新：

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

javascript  html  css 
— 马修·麦克林
source
1
评论不作进一步讨论；此对话已转移至聊天。
— 伊薇特
6
他们之所以问“为什么”，是因为他们想知道为什么要使用CSS而不使用SVG或图像编辑器。与徽标的业务决策无关。根据您指向他们徽标的链接，为什么不剪裁X？
— user9993 18-10-27
1
我不能抱怨这个徽标。比那座流血的灯塔好得多。
— Parapluie
@Parapluie我必须同意！
— Mathew MacLean

Answers:

2937

现在作为插件在GitHub上！

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

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

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

第1部分：基本解决方案

文字的半样式

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

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

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

单个字符的说明：

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

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

任何文字的说明：

只需将textToHalfStyleclass 添加到包含文本的元素中即可。

// 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才能发挥作用。

显示代码段

（JSFiddle演示）

第3部分：混搭和改进

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

-水平半部

  • 没有文字阴影：

    水平半部-无文字阴影

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

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

显示代码段

（JSFiddle演示）

-垂直的1/3部分

  • 没有文字阴影：

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

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

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

显示代码段

（JSFiddle演示）

-水平1/3的部分

  • 没有文字阴影：

    halfStyle-水平1/3零件-无文字阴影

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

    halfStyle-水平1/3的部分-带文字阴影

显示代码段

（JSFiddle演示）

-HalfStyle改进@KevinGranger

halfStyle-凯文·格兰杰

显示代码段

（JSFiddle演示）

-SelTremaine对HalfStyle的PeelingStyle改进

halfStyle-SamTremaine

显示代码段

（JSFiddle演示和samtremaine.co.uk上）

第4部分：准备生产

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

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

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

halfStyle-同一页面上的多个

CSS样式集的类定义也与上述[-CustomClassName-]部分匹配，并链接到.halfStyle，因此我们将拥有.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>
展开摘要

（JSFiddle演示）

— 阿尔贝尔
source
评论不作进一步讨论；此对话已转移至聊天。
— 伊薇特
7
这很酷。值得注意的是，该技术打破了自动换行，空格和字符间距的CSS。
— 安德鲁·恩斯利
2
很高兴看到我们回到了艺术圈：D
— 罗维科
487

在此处输入图片说明


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

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

标记

您所要做的就是为class赋值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/。

— 拉兹万B.
source
截至目前，您的解决方案最容易实现多个字符，但仍不是100％。
— Mathew MacLean 2014年
@MathewMacLean emisfera必须回答，对吗？
— mttdbrd
3
这存在文本换行的问题，即使在最新的提琴中也表现出了问题。当一个字符换行时，它实际上分为两个。不过，这应该是个小问题。
— BoltClock
16
不要依赖jquery-latest.min.js，它可以使您的网站在没有警告的情况下中断，如果jQuery已更新并且该插件不适用于较新的jQuery。而是：使用特定版本，并在更新时检查兼容性。
— Niels Bom 2014年
2
您可能需要编辑答案，以不建议使用jquery-latest.js。正如@NielsBom提到的那样，过去它可能会在更新站点时中断您的站点。自2014年7月起，它将不再执行此操作，但这是因为它被锁定在1.11.1版，并且将不再进行更新。
— 无用的代码
237

编辑（2017年10月）：background-clip或者background-image options现在每个主流浏览器都支持：CanIUse

是的，您只能使用一个字符和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添加了内容，这可能会导致可访问性-以及文本选择/剪切/粘贴问题。

— DA。
source
34
@MathewMacLean如果只有IE死亡并且Firefox开始使用Webkit，我们的工作将变得更加容易。:)
— DA。
48
WebKit拥有渲染错误的历史，这些错误几乎是IE6 / IE7怪异的水平（您甚至可以说Safari和Chrome是现代Web的IE6），并且在没有特殊原因的情况下会偏离标准。从版本9开始，IE的性能已经好得多，因此尽管古老的版本应该已经死了，但我看不出有任何理由对其最新版本感到讨厌。而且我当然不明白为什么人们会支持WebKit / Blink单一文化的想法（这里的评论可能是在开玩笑，但我听说有人对此深信不疑）。
— BoltClock
3
话虽如此，这background-clip: text真是太棒了，他们应该text-decoration-background为4级模块考虑它（或类似的东西）。
— BoltClock
2
是的，如果眨眼/ webkit死了，并且现代IE的+ FF渲染引擎比其他方法幸存下来，我会更高兴。但这并不是说其余的chrome不好，只是它的渲染几乎是当今最糟糕的。
— 伊蒙·内邦
2
与上面的hacky库相比，这是一种更清洁的解决方案，应该被接受，因为当前可以使用文本渐变。
— mystrdat 2014年
160

例

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);
}
— 万达纳尔
source
这很简洁，但是唯一的问题是内容将是动态的。
— Mathew MacLean 2014年
结果取决于所使用的字体。加上计算宽度似乎是一个问题。
— 2014年
@MathewMacLean嗯，您的内容只能是一个字符吗？如果不是，您是否希望每个字符都具有相同的分色效果或仅具有特定的分色效果（即第一个）？
— 2014年
1
@MathewMacLean您可以在JS中编写一个简单的循环函数来完成包装。我现在将其添加到我的答案中。
— wvandaal 2014年
1
@MathewMacLean文本来自哪里？wvandaal是正确的，您可以自己包装文本。
— mttdbrd 2014年
96

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

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

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

啊，最重要的是，我创造了它很有趣！

在此处输入图片说明

— 路基
source
2
@Luky Vj：这是您的帐户吗？您可能希望将所有帖子合并到一个帐户中，以免遇到尝试编辑自己帖子的障碍。
— BoltClock
是的，事实上，我首先用旧的第一个帐户发布了图片。而且我不得不添加图片，而且我的图片发布不够流行。但是你是对的，我会尽快修复它！
— LukyVj 2014年
1
@LukyVj：您可以按照此处的说明合并您的帐户：stackoverflow.com/help/merging-accounts
— BoltClock
1
@LukyVj我通过添加pointer-events:none到&:nth-child(2)- 更新了您的功能&:nth-child(5)。这样可以使文本仅突出显示一次，并且您只能获得一份。您可以在此处查看：codepen.io/anon/pen/upLaj
— Mathew MacLean
74

如果您对此感兴趣，那么卢卡斯·贝伯（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页面上的更多详细信息

— 拉斯金
source
74

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

画布示例

$("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>
展开摘要

— 菲安布雷
source
1
顺便说一句，您也可以0.5将红色用于色标。
— 牙刷2014年
62

我能得到的最近的：

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

— 囚犯
source
1
$('span').width()只是返回找到的第一个跨度的宽度；这一定是您为每一对做的。这给了我一个主意...
— 尖尖的2014年
这与jsfiddle.net/9WWsd中的epascarello的示例非常相似。正如我告诉他的那样，您的示例是朝着正确方向迈出的一步，但是，大规模使用将是一场噩梦。
— Mathew MacLean 2014年
@MathewMacLean，我没看到。为什么会是一场噩梦？怎么样：jsfiddle.net/9wxfY/4
— 囚犯
当您实施多个字符时，会引起问题。
— Mathew MacLean 2014年
@MathewMacLean这就是美妙的Lettering.JS用武之地
— 尖尖的
53

在此处输入图片说明

我只是玩过@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>
展开摘要

— 希普
source
4
刚刚使用@Arbel解决方案玩Arbel解决方案有什么区别？很难看出您是否仅复制粘贴了某些代码或对其进行了改进。
— AL 2014年
43

另一个仅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>
展开摘要

— 特鲁特
source
38

有限的CSS和jQuery解决方案

我不确定此解决方案的优雅程度，但可以将所有内容完全削减一半：http : //jsfiddle.net/9wxfY/11/

否则，我会为您创建一个不错的解决方案...您需要做的就是为HTML提供以下解决方案：

看看截至2016年6月13日的最新，准确的编辑内容：http : //jsfiddle.net/9wxfY/43/

至于CSS，它非常有限...您只需要将其应用于 :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>
展开摘要

— 阿吉特
source
但是，这具有与其他人相同的问题。当您尝试使用多个字符进行操作时，这开始变得混乱。
— Mathew MacLean 2014年
我知道@@ MathewMacLean :(也看到了。现在就开始工作
— Adjit 2014年
@MathewMacLean修复了它，但不确定JQuery现在有多干净。看一看
— Adjit
@MathewMacLean将类似的解决方案添加到Webkit版本中，您可以使用如下解决方案：jsfiddle.net/wLkVt/1
— Adjit 2014年
@MathewMacLean修复了我的脚本中的错误。发生错误的原因是，我一直都在使用第一个元素的宽度，而不是字母的宽度。
— 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/

您可以撬动这段代码来做各种有趣的事情-这只是我的同伙的一个实现，我昨晚想出了。

— 山姆·特雷曼（Sam Tremaine）
source
24

这样的短文本怎么样？

如果您执行了循环操作，并使用JavaScript重复字符，则它甚至可以用于较长的文本。无论如何，结果是这样的：

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

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>
展开摘要

— 阿里雷扎
source
23

FWIW，这是我的看法，仅使用CSS：http：//codepen.io/ricardozea/pen/uFbts/

几点注意事项：

  • 我这样做的主要原因是测试自己，看看我是否能够完成角色的一半样式，而实际上却为OP提供了有意义的答案。

  • 我知道这不是理想的解决方案，也不是最具扩展性的解决方案，这里的人们提出的解决方案对于“现实世界”场景而言要好得多。

  • 我创建的CSS代码基于我想到的第一个想法和我自己针对问题的解决方法。

  • 我的解决方案仅适用于X，A，O，M等对称字符。**不适用于B，C，F，K或小写字母等非对称字符。

  • **但是，这种方法会创建带有非对称字符的非常有趣的“形状”。尝试将X更改为K或CSS中的h或p之类的小写字母:)

的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）
source
17

如果您愿意，也可以使用SVG进行此操作：

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

— 尼克·贝尔
source
16

只需使用CSS :before选择器和即可实现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>
展开摘要

>>参见jsFiddle

— 时尚极客
source
8

您可以使用以下代码。在此示例中，我使用了h1标记，并添加了一个属性data-title-text="Display Text"，该属性将在h1标记文本元素上显示为不同颜色的文本，从而产生半彩色文本效果，如下例所示

在此处输入图片说明

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

仅用于历史记录！

我已经为5到6年前的工作提出了一个解决方案，即Gradext（纯JavaScript和纯CSS，无依赖）。

技术上的解释是您可以创建这样的元素：

<span>A</span>

现在，如果要在文本上进行渐变，则需要创建一些多层，每个层分别进行特殊着色，并且创建的光谱将说明渐变效果。

例如，看这是a内的lorem一词<span>，将引起水平渐变效果（请查看示例）：

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

而且您可以在很长一段很长的时间内继续执行此模式。

在此处输入图片说明

但！

如果要在文本上创建垂直渐变效果怎么办？

然后还有另一个解决方案可能会有所帮助。我将详细描述。

假设我们第<span>一次。但是内容不应该单独是字母；内容应该是整个文本，而现在我们要复制同样<span>连连（数跨度将定义渐变的质量，更多的跨度，更好的结果，但性能差）。看一下这个：

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

在此处输入图片说明

再次，但是！

如果要使这些渐变效果移动并从中创建动画怎么办？

好吧，还有另一种解决方案。您绝对应该检查animation: true甚至.hoverable()是会导致基于光标位置开始渐变的方法！（听起来很棒xD）

在此处输入图片说明

这就是我们在文本上创建渐变（线性或径向）的简单方式。如果您喜欢这个主意或想进一步了解它，则应检查提供的链接。

也许这不是最好的选择，也许不是执行此操作的最佳方法，但是它将为创造令人兴奋和令人愉悦的动画打开一些空间，以激励其他人寻求更好的解决方案。

它将允许您在文本上使用渐变样式，甚至IE8也支持！

在这里您可以找到一个有效的实时演示，原始存储库也在GitHub上，它是开源的，并准备进行一些更新（：D）

这是我第一次（是的，五年后，您没听错），我在互联网上的任何地方都提到了这个存储库，对此我感到很兴奋！

[更新-2019年8月：] Github删除了该存储库的github-页面演示，因为我来自伊朗！此处仅提供源代码。

— 雷哈先生
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.