CSSで一種の水平「反転マスク」を作成することは可能ですか？

7

2つのブロック（div要素）があり、上部background-color: blackに1つ、下部に1つの白があります。

反転した色で2つのゾーンにまたがるテキストを作成することは可能ですか？

例：テキスト「FOO」の上部は黒地に白、下部は白地に黒になります。

color css mask

— joeD
ソース

1

関連して有用：CSSをキャラクターの半分に適用することは可能ですか？プラグインとしてのqに対する最良の回答の1つ：Splitchar-このプラグインは、このページで要求されていることも実行しますが、水平または垂直に3レベルの色を実行することもできます。

— Dom

10

このようなことを意味する場合：

ここに画像の説明を入力してください

編集：これは1つのHTML要素のみを必要とする方法であり、検索エンジン、スクリーンリーダー、RSS、「スタイルなし」アプリなどの非CSSスタイルのクライアントによって読み取られても奇妙ではありません（提案を提案してくれたDominicのおかげで:before、:after）。

http://jsbin.com/UtUlIFO/2/edit

重要なコード（これに色を追加してください）：

HTML： <div class="someclass" data-text="Some text">Some text</div>

CSS：

.someclass {     /* bottom half */
  position: relative;
  display: inline-block;
}

.someclass:after {     /* top half */
  content: attr(data-text);
  display: block;
  position: absolute;
  top: 0px;
  height: 50%;
  overflow: hidden;
}

HTML属性はどのようなものでもdata-textかまいません- 説明的であり、望ましくない副作用を回避するために使用しました（たとえば、使用できますtitleが、一部のブラウザーではマウスオーバーが発生します）。

display:block;メイン（.top）要素が必要な場合はwidth: 100%;、内部（.bottom）要素に何かを追加して、要素を埋めます。

jQueryを使用している場合は、このスタイルを任意の要素に非常に簡単に適用できるため、data-text重複するビットを手動で入力する必要がありません。

$('.someElement').each(function(){
  $(this).addClass('someclass').attr('data-text',$(this).text());
});

そのデモと複数行、パディングなどの他のいくつかのデモ

— user56reinstatemonica8
ソース

2

疑似要素（:afterまたは:before）を使用して複製テキストを作成する方法があるかどうかを考えていますか？

— Dom

2

面白いアイデア：あなたが行うことができ、これを（CSSにハードコードされたコンテンツを複製する）か、この（ということを読んで、その後、HTML属性にコンテンツを複製）が、どうやらそれは単にCSSを使用したHTMLコンテンツのテキストを読んですることはできません。HTML属性の方法は、HTMLの機械読み取りを台無しにしないため、最良の方法のようです。上記のようなものをいくつか追加しました。

— user56reinstatemonica8 2013年

5

驚くべきことに、それは可能ですが、ウェブサイトが視覚的なインパクトについてすべてであり、コードのセマンティクスが重要ではない場合にのみアドバイスしますが、さらに、古いブラウザー間であまり一貫性がない可能性があります。

結果は次のとおりです。

反転したテキスト

これはきれいな解決策ではありません、そしてそれはそこにある唯一のものではないに違いありませんが、それはあなたが望むことをします。

テキストの2つのインスタンスが必要です。絶対配置といくつかの簡単な数学を使用して、この効果を作成できます。

したがって、コンテナがありdiv、さらに2つのコンテナ内で、それぞれのコンテナ内にdivsテキストのインスタンスがある場合、次のHTML構造とCSSプロパティを使用してこれを実現できます。

<div class="container">
    <div class="black">
       <div class="text">Invert</div>
    </div>
    <div class="white">
       <div class="text">Invert</div>
    </div>
</div>

.container{position:relative; width:200px; height:100px; display:block; margin:0px; padding:0px; }

.black, .white{position:absolute; left:0px; background:#000; width:200px; height:50px; margin:0px; padding:0px; overflow:hidden; }

.black{top:0px; }

.white{bottom:0px; background:#fff; }

.text{position:absolute; color:#fff; font-size:70px; padding:0px; }

.black .text{bottom:-40px; }

.white .text{top:-40px; color:#000; }

ここでJSFiddle結果は。:)

— ドム
ソース

タイピングを終えている最中に投稿しました。いい答えですが、どこにでもドロップできるように簡略化できる方法はいくつかあると思います。テキストを複製せずにそれを行う方法はないと思います。

— user56reinstatemonica8 2013年

2

また、Webkitでのみサポートされている、色を反転させるCSS3プロパティもあります。

image {
 -webkit-filter: invert(100%);  
}

そして、HTML5 Canvas Invertがあり、ここに例と完全なコードがあります。画像のすべてのピクセルを反復処理し、最大カラー値である255から各コンポーネントを差し引くことにより、赤、緑、青を反転させます。

どちらのソリューションでも、2つの画像とCSSの配置が必要です。互換性はあまり良くないので、私は間違いなく他の答えの1つに行くでしょう:)

— イセラ
ソース