[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 、その後にあなたのテキストを折り返す要素に所望のスタイルを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

私が探しているもの:

文字の1つの半分をスタイルする方法。 (この場合、文字の半分は透明です)

私が現在検索し、試したもの(運がない場合):

  • 文字/文字の半分をスタイリングする方法
  • CSSまたはJavaScriptで文字の一部をスタイルする
  • キャラクターの50%にCSSを適用する

以下は、私が得ようとしているものの例です。

このためにCSSやJavaScriptのソリューションが存在するのですか、イメージに頼らざるを得ませんか? このテキストは動的に生成されるため、画像ルートには移動しないことをお勧めします。

更新:

なぜ私が文字の半分をスタイルする必要があるのだろうと多くの人が尋ねてきたので、これが理由です。 私の街は最近、新しい「ブランド」を定義するのに25万ドルを費やしました。 このlogoは彼らが思いついたものです。 多くの人々は、シンプルさと創造性の欠如について不満を持ち、それを続けています。 私の目標は、このwebsiteを冗談として思いつくことでした。 「Halifax」と入力すると、私の言いたいことが分かります。 :)




私が得ることができる最も近い:

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

1つのスパンを使用するバージョンがあります: http://jsfiddle.net/9wxfY/4/ : http://jsfiddle.net/9wxfY/4/




ここではキャンバスでの醜い実装です。 私はこの解決策を試しましたが、結果は私が予想していたよりも悪いので、とにかくここにあります。

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



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>




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



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



別のCSSのみのソリューション(ただし、文字固有のCSSを書こうとしない場合は、データ属性が必要です)。 これは全面的に機能します(Tested 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>




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




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