javascript css是什么 - 是否可以将CSS应用于角色的一半?




js设置style html和css区别 (16)

我在找什么:

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

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

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

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

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

更新:

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


Answers

如此短的文字怎么样?

如果您使用循环执行某些操作,使用JavaScript重复这些字符,它甚至可以用于更长的文本。无论如何,结果是这样的:

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>


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

我把它称为“Strippex”对于'stripe'+'text',演示: http://cdpn.io/FcIBg ://cdpn.io/FcIBg

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

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



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

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


.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

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


您可以使用以下代码。在这个例子中,我使用了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>


这可以通过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


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

有限的CSS和jQuery解决方案

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

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

从2016年6月13日开始,请查看最新,最准确的编辑内容:http://jsfiddle.net/9wxfY/43/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>


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





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

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


编辑(2017年10月):现在每个主要浏览器都支持background-clip或者background-image optionsCanIUse

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


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

如果你对此感兴趣,那么Lucas Bebber的Glitch是一个非常相似和超酷的效果:

使用简单的SASS Mixin创建

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

更多细节见Chris Coyer的CSS TricksLucas Bebber的Codepen页面


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


对于那些寻找解决方法的人,例如,如果您的课程以数字开头,则可以使用属性选择器。 更改:

.000000-8{background:url(../../images/common/000000-0.8.png);} /* DOESN'T WORK!! */

对此:

[class="000000-8"]{background:url(../../images/common/000000-0.8.png);} /* WORKS :) */

另外,如果有多个类,则需要在我认为的选择器中指定它们。

资料来源:

  1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
  2. 有没有一种解决方法可以让名称以数字开头的CSS类生效?




javascript html css styling