[javascript] 是否可以将CSS应用于角色的一半?



Answers




我刚刚完成了插件的开发,并且可供所有人使用! 希望你会喜欢它。

GitHub查看项目 - 查看项目Website(所以你可以看到所有的分割样式)

用法

首先,确保你已经包含了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 ,然后是包装文本元素的所需样式。 例如

<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插件。 有关它的更多信息,请访问Website

Question

我在找什么:

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

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

  • 设计一半字符/字母的方法
  • 使用CSS或JavaScript设计角色的一部分
  • 将CSS应用于角色的50%

以下是我试图获得的一个例子。

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

更新:

由于许多人问我为什么会想要塑造一半角色,这就是为什么。 我的城市最近花了25万美元为自己定义一个新的“品牌”。 这个logo是他们想出的。 许多人抱怨简单和缺乏创造力,并继续这样做。 我的目标是想出这个website作为一个笑话。 输入“哈利法克斯”,你会明白我的意思。 :)




FWIW, here's my take on this doing it only with CSS: http://codepen.io/ricardozea/pen/uFbts/

Several notes:

  • The main reason I did this was to test myself and see if I was able to accomplish styling half of a character while actually providing a meaningful answer to the OP.

  • I am aware that this is not an ideal or the most scalable solution and the solutions proposed by the people here are far better for "real world" scenarios.

  • The CSS code I created is based on the first thoughts that came to my mind and my own personal approach to the problem.

  • My solution only works on symmetrical characters, like X, A, O, M. **It does not work on asymmetric characters like B, C, F, K or lower case letters.

  • ** HOWEVER, this approach creates very interesting 'shapes' with asymmetric characters. Try changing the X to a K or to a lower case letter like an h or a p in the CSS :)

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



You can use below code. Here in this example I have used h1 tag and added an attribute data-title-text="Display Text" which will appear with different color text on h1 tag text element, which gives effect halfcolored text as shown in below example

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>




This can be achieved with just CSS :before selector and 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>

>> See on jsFiddle




最近的我可以得到:

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

下面是一个只使用一个跨度的版本: http://jsfiddle.net/9wxfY/4/ : http://jsfiddle.net/9wxfY/4/




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

}

samtremaine.co.uk

You can crowbar this code into doing all sorts of interesting things - this is just one implementation my associate and I came up with last night.




JSFiddle DEMO

我们将使用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);
}



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

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解决方案(尽管如果您不想编写特定于字母的CSS,则需要data-attribute)。 这个更全面(经过测试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>




Links