javascript js设置style html和css区别 - 是否可以将CSS应用于角色的一半?





9 Answers




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

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

用法

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

<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

css是什么 set in

我在找什么:

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

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

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

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

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

更新:

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




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



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

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

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




另一个仅限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>




.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

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




FWIW,这是我对CSS的看法:http://codepen.io/ricardozea/pen/uFbts/http://codepen.io/ricardozea/pen/uFbts/

几点说明:

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

  • 我知道这不是一个理想的或最具可扩展性的解决方案,这里的人们提出的解决方案对于“真实世界”场景来说要好得多。

  • 我创建的CSS代码基于我想到的第一个想法和我个人对问题的处理方法。

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

  • **然而,这种方法创造了非常有趣的“形状”,具有不对称的字符。尝试将X更改为K或小写字母,如CSS中的hp :)

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



如果您愿意,也可以使用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




您可以使用以下代码。在这个例子中,我使用了h1tag并添加了一个属性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>






Related