提问



我在寻找什么:


设置角色的一个 HALF 的方式。 (在这种情况下,一半字母是透明的)


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



  • 为一半字符/字母设置样式的方法

  • 使用CSS或JavaScript设置角色的一部分

  • 将CSS应用于角色的50%



以下是我想要获得的一个例子。





是否存在CSS或JavaScript解决方案,或者我将不得不诉诸图像?我宁愿不去图像路线,因为这个文本最终会动态生成。





更新:


因为很多人都问为什么我想要设计一半角色,这就是原因。我的城市最近花了25万美元为自己定义一个新的品牌。这个徽标就是他们想出来的。许多人抱怨简单性和缺乏创造力,并继续这样做。我的目标是将这个网站作为一个笑话。输入哈利法克斯,你会明白我的意思。 :)[56] [57]

最佳参考


现在在GitHub上作为插件!



随意分叉并改进。[58]


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







  • 单个字符的纯CSS

  • 用于跨文本或多个字符进行自动化的JavaScript

  • 为盲人或视觉上的屏幕阅读器保留文本可访问性



第1部分:基本解决方案



[59] [60] [61]


演示: http://jsfiddle.net/arbel/pd9yB/1694/[62]





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


此外,对于盲人或视障人士的屏幕阅读器,保留了原始文本的可访问性。


单个字符的说明:


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


对于包含该字符的每个span元素,您可以创建一个数据属性,例如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>









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


在GitHub上查看项目 - 查看项目网站。 (所以你可以看到所有的分割风格)



用法



首先,确保包含jQuery库。获取最新jQuery版本的最佳方法是更新头标记:[63] [64]


<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作为对象,然后将所需的样式添加到包装文本的元素中。例如


<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/。[65]

其它参考1



  编辑(2017年10月):现在每个主要浏览器都支持background-clip或更确切地说background-image options:CanIUse [66]



是的,你可以只用一个字符,只用CSS。


但是,仅限Webkit(和Chrome):


http://jsbin.com/rexoyice/1/[67]




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>









JSFiddle DEMO



我们只使用CSS伪选择器来做它![68]


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


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

其它参考2


它可能是无关紧要的,也许不是,但不久前,我创建了一个jQuery函数,它可以执行相同的操作,但是是横向的。


我把它称为Strippex对于条纹+文本,演示:http://cdpn.io/FcIBg [69]


我并不是说这是任何问题的解决方案,但我已经尝试将css应用于角色的一半,但是水平,所以这个想法是一样的,实现可能是可怕的,但它有效。


啊,最重要的是,我很开心创造它!




其它参考3


这是一个丑陋的画布实现。我尝试了这个解决方案,但结果比我预期的要糟糕,所以无论如何它都在这里。





http://jsfiddle.net/kLXmL/2/[70]


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

其它参考4


如果你对此感兴趣,那么Lucas Bebber的小故障是一个非常相似且非常酷的效果:





使用简单的SASS Mixin创建


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


Chris Coyer的CSS Tricks和Lucas Bebber的Codepen页面[71] [72]的更多细节

其它参考5


我最近可以得到:




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






我刚刚玩@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>



有限的CSS和jQuery解决方案


我不确定这个解决方案有多优雅,但它将所有内容完全切成两半:http://jsfiddle.net/9wxfY/11/[73]


否则,我已经为您创建了一个很好的解决方案......您需要做的就是为您的HTML提供:


从2016年6月13日开始,请查看最新,最准确的编辑内容:http://jsfiddle.net/9wxfY/43/ [74]]]


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



.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/[75]


你可以将这段代码撬开来做各种有趣的事情 - 这只是我的同事和我昨晚想出来的一个实现。

其它参考6


一个很好的WebKit解决方案,利用background-clip: text支持:http://jsfiddle.net/sandro_paganotti/wLkVt/[76]


span{
   font-size: 100px;
   background: linear-gradient(to right, black, black 50%, grey 50%, grey);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

其它参考7


FWIW,这是我用CSS做的事情:http://codepen.io/ricardozea/pen/uFbts/[77]


几点说明:



  • 我这样做的主要原因是测试自己,看看我是否能够完成造型的一半角色,同时实际上为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);
  }
}