javascript iframe 要素 - キャラクターの半分にCSSを適用することは可能ですか?





9 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それに関する詳細情報。

別ドメイン クロスドメイン #document

私が探しているもの:

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

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

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

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

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

更新:

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




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/

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




別の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>




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




以下のコードを使用することができます。ここでは、この例ではh1タグを使用し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