javascript - CSS可以应用效果到半个字符?

  显示原文与译文双语对照的内容

我正在寻找的内容:

一种风格的一半一半的字符。 ( 在本例中,字母是透明的)

我目前搜索的内容为 ,并尝试( 没有运气):

  • 字符/字母的一半样式的方法
  • 使用CSS或者JavaScript对字符的一部分进行样式化
  • 将CSS应用到一个字符 50%

下面是我试图获得的示例。

x

是否存在一个CSS或者JavaScript解决方案,或者我必须求助于图像? 我宁愿不去像这样的图像路由,因为这个文本最终会被动态生成。


更新:

因为很多人都问我为什么要把一个角色的一半风格,这就是为什么。 我的城市最近花费了 $250,000来为自己定义一个新的"品牌"。 ,这 logo 正是他们看到了 up. 许多人抱怨creativity的简单性和缺乏创造力,并继续这么做。 我的目的是来弄到这个 网站 就是个笑话。 输入'Halifax',你会看到我的意思。 : )

时间:

enter image description here


我刚刚完成了插件的开发,它可以供大家使用 ! 希望你会喜欢它。

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>

标记

你所要做的就是要在类 asign splitchar,其次是所需的样式来包装你的文本的元素。 e.g


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

完成上述操作之后,请确保在 document ready 文件中调用了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 插件。 关于 emisfera 。github 。io/splitchar的更多信息。

Example


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"'条纹'+'文本',演示: http://cdpn.io/FcIBg

我不是说这是解决任何问题的方法,但我已经试图把css应用到一个字符,但水平的,这样的想法是一样的,实现可能是可怕的,但它工作。

啊,最重要的是,我很高兴创建它 !

enter image description here

在画布中实现一个丑陋的实现。 我尝试了这个解决方案,但是结果比我预想的还要糟糕,所以这里是。

Canvas example

http://jsfiddle.net/kLXmL/2/


<div>Example Text</div>

$(function(){
 $("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);
 });
 });
});

另一个CSS-only解决方案( 当然data-attribute是必须的,如果你不想写 letter-specific CSS ) 。 这里操作在整个电路板上运行( 测试 IE 9/10, Chrome 最新 & FF最新版本)

http://jsfiddle.net/pkML2/

HTML


<span data-char="X">X</span>

CSS


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

...