html - CSSの歪んだ背景の自動サイズ変更（+画像？）

Question

このPSD画像をCSSに変換します。複数のページに複数の h2 があるため、内部のテキストの長さと背景色が異なる場合があります。したがって、背景は「任意の」長さに自動的に適応する必要があります。

歪んだ背景のデモ

これまでのところ、マークアップは次のようなものです。

<h2 class="sub-heading lab-heading">Laboratori</h2>

最終的には内部テキストをにラップするかもしれませんが<span>、追加の要素なしでセマンティックに有効なマークアップを維持するのは ♥ly です。

内側のテキストは回転しますが、必須ではありません。私が今注目しているのは、歪んだ背景です。

私は、スケーリングされた背景 png (例: background-size:cover)、疑似要素、キャンバスなどを使用するソリューションに対してオープンマインドです。ただし、モジュール化する必要があります。

ご提案いただきありがとうございます。

[更新] 私が探しているもののグラフィカルな例:

私はグラフィックデモンストレーションではありません

[重要な注意] h2 の後ろに不規則なパターンがあります(「無地」の色の背景ではありません)。

score 5 · Accepted Answer

興味のある方のために、ここに私の一時的な解決策を示します:ライブデモ。

このスプライト画像を使用しました：

歪んだ背景スプライト

html:

<div class="container">
<h2 class="sub-heading"><span class="sub-heading-txt">Short title</span></h2>
</div>
<div class="container">
<h2 class="sub-heading"><span class="sub-heading-txt">A bit longer title</span></h2>
</div>
<div class="container">
<h2 class="sub-heading"><span class="sub-heading-txt">A damn long title is here!</span></h2>
</div>

（.containerdivはバリエーションにのみ必要です）

CSS:

.sub-heading, .sub-heading:after, .sub-heading:before {
    background:url(tha-sprite-url.png) 0 0 no-repeat;
}

.sub-heading {
    position:relative;
    display:inline-block; clear:both;
    margin-left:31px; padding:0 18px 10px 0;
    font-size:25px; font-weight:normal; color:#FFF; line-height:47px;
    background-position:0 -75px;
    background-size:100% 282px; /* the sprite's height */
}

.sub-heading:before, .sub-heading:after { content:" "; position:absolute; top:0; }
.sub-heading:before { left:-31px; width:31px; height:57px; }
.sub-heading:after { right:-12px; width:12px; height:42px; background-position:-150px 0; }

.sub-heading-txt {
    display:block;
    -webkit-transform:rotate(-2deg); -ms-transform:rotate(-2deg); transform:rotate(-2deg);
}

/* variations */
.container { margin-bottom:10px; }
.container:nth-child(3n+2) .sub-heading { background-position:0 -150px; }
.container:nth-child(3n+2) .sub-heading:before { background-position:-50px 0; }
.container:nth-child(3n+2) .sub-heading:after { background-position:-175px 0; }
.container:nth-child(3n+3) .sub-heading { background-position:0 -225px; }
.container:nth-child(3n+3) .sub-heading:before { background-position:-100px 0; }
.container:nth-child(3n+3) .sub-heading:after { background-position:-200px 0; }

IE9+で動作

残念ながら、background-sizeプロパティは「継承」値をサポートしていないため、実際のスプライトの高さを css で設定する必要があります :-( 私はまだより効率的な解決策を探しています.

score 3 · Accepted Answer

CSS シェイプ、ポジショニング、:beforeおよび:afterセレクターを組み合わせることで、コンテナをあらゆるコンテンツに展開できるようにしました。ただし、このアプローチは最新のブラウザーでのみ機能し、js なしでは適切な解決策がないようです。また、この場合、svg の使用はほんの一握りですが、やはりブラウザの互換性に制限されます。

純粋な CSS を使用したデモは次のとおりです: http://jsfiddle.net/qaWKX/

編集

の使用はsvg、追加の JS 関数がないと役に立たないことが判明しました。だから私はこのアプローチをやめました。ただし、唯一の適切な解決策は CSS3 に依存しますが、セレクター:beforeと:afterセレクターを使用しません。h3私の以前のアプローチは、タイトルの両側を隠す疑似要素の作成に依存していました。背景に単色がない場合、非表示にするだけでは不十分です。

このロジックbackgroundでは、透明度と塗りつぶしを組み合わせるが必要でした。答えは CSS3 にありlinear-gradient backgroundました。

h3詳細: 1.タイトルを回転させた2. 上部領域をコンテナ (top:-valueまたはmargin-top:-value) でマスクした 3.linear-gradient両側に 2 つの背景画像を設定した

デモは次のとおりです。http://jsfiddle.net/P5gLE/1/

score 1 · Accepted Answer

だけでは無理だと思いますh2。この問題は、傾斜した側面の角度が異なる場合に発生します。つまり、傾斜と変換には「コンテナ」が必要です。

あなたの例を考えると、私は次のことを思いつきました：

http://jsfiddle.net/Cbx2q/1/

ご覧のとおり、これにはいくつかのメンテナンス上の問題があります。

「マジックナンバー」 - これらは、選択したスキュー + サイズに応じて微調整する必要があります。
変換を使用したフォントのレンダリングは多少悪くなります。

そうでなければ、うまくいくようです。疑似要素と CSS3 を使用しない最善の解決策は、各メニュー項目の背景にプレーンな古い画像を使用することです。

score 1 · Accepted Answer

ここにhtmlがあります：

<br>
<div class="scewed-shape">
    <div class="text-align">here is a very long text adsadsad</div>
</div>
<br>
<br>
<div class="scewed-shape">
    <div class="text-align">this one is shorter</div>
</div>

カスタムシェイプを作成するCSSは次のとおりです。

.scewed-shape {
    display:inline-block;
    -webkit-transform: perspective(500px) rotateY(34deg);
    -ms-transform: perspective(500px) rotateY(34deg);
    left: -25px;
    height: 0;
    border-style: solid;
    border-color: red transparent transparent transparent;
    border-width: 70px 50px 0 50px;
}
.scewed-shape .text-align {
    position: relative;
    top: -25px;
}

score 0 · Accepted Answer

CSS シェイプの使用についてはどうですか? 私は彼らと一緒にたくさん働いたことはありませんが、始めるには良い場所のようです.

http://css-tricks.com/examples/ShapesOfCSS/

score 0 · Accepted Answer

私が考えることができる 1 つの簡単な解決策は、形状の 3 つの異なる底角に 3 つの要素 (div を使用します) を使用することです。初期化。おそらく最もエレガントなソリューションではありませんが、間違いなく機能します。欠点は、特にさまざまな色の形状が必要な場合に、大量の画像が必要になることです。（背景画像に色を付ける方法は知りません）。

ただし、形状の周囲のスペースに無地の背景色がある場合は、実際に 3 つの要素の背景色を希望の色に設定し、使用する実際の画像をネガティブスペースとして背景と同じ色にして、透明にすることができます。実際の形状が必要な場所。

また、必要以上の要素が本当に必要ない場合は、いつでも :after および :before セレクターを使用して偽造することができます。

score 0 · Accepted Answer

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

上記のコードは、ページのスタイル/機能に関する限り、IE 5.5 から 8 を最新の準拠ブラウザーのように実行します。このスクリプトは、IE の過去のバージョンの CSS/レンダリングエラーに対処するために特別に作成されました。

スクリプトに関するドキュメントは次のとおりです。 http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html

これは一種の「IE フォールバック」ですが、問題にアプローチするためのより良い方法です。さまざまなブラウザーを使用してまったく同じ方法でレンダリングするコンテンツの大量のバージョンを作成する代わりに、IE の初期バージョンに最新の互換性を強制するだけです。

過去にこのスクリプトを使用して、同様の CSS レンダリングエラーを修正しました。上記のこの特定のスクリプトは、IE5.5-8 を 9 まで更新するためのものです。意図的に IE5.5-7 を 8 まで更新したい場合 (なぜ必要なのかわかりませんが、必要に応じて)、次の場所にある追加のスクリプトを使用してください。以下の URL でこれを行うことができます。

ここにGoogleのページとそのドキュメントがあります（このページにも上記のリンクが含まれています） http://code.google.com/p/ie7-js/

html - CSSの歪んだ背景の自動サイズ変更（+画像？）

7 に答える 7

Related

Reference