1

次の質問で説明されている効果を実現したいのですが、CSS を使用します。これが HTML5 で実行できるようになったのをどこかで見たのを覚えていますが、プロパティ名が見つかりません。

コーナーを維持しながらUIImageを伸ばす

4

3 に答える 3

2

3 つの異なる画像を使用する必要があります。

まず、Photoshop や Gimp などで、矢印の画像を 3 つの部分に分割します。左側がカーブ部分、右側が矢印部分です。それらを 3 つの異なる画像として保存します。

画像を取得したら。1 つの HTML イメージ要素を作成します。

<img src="img-middle.jpg" />

CSS で、疑似要素の前後にスタイリングを適用し、引き延ばしたくない 2 つの画像ビットを追加します。

img:before {
    contents: '';
    background: url('img-left.jpg');
    height: 50px;
    width: 20px;
    position: absolute;
    left: -20px;
}

img:after {
    content: '';
    background: url('img-right.jpg');
    height: 50px;
    width: 40px;
    position: absolute;
    right: -40px;
}

幅、高さ、左右の値を変更して、2 つの画像ファイルの幅と高さに合わせてください。この CSS を使用すると、要素の幅に関係なく、画像のこれらの部分を左右に追加できます。また、要素が 1 つしかないため、空のコンテンツの要件を除いて、CSS は非常にクリーンなままです:''; 財産。

したがって、中間の画像要素を動的に引き伸ばすことができます。矢印を伸ばしたいとしましょう。要素の幅をアニメーション化する jQuery をいくつか用意すると、中央部分が伸び、コーナーは技術的には元の要素の一部ではなく、単に追加されるだけなのでそのまま残ります。

ETA: Objective-C 関連の投稿で説明されている方法については、私が聞いたことのないあいまいな Webkit ナイトリー ビルドでない限り、そのような画像を分割する CSS プロパティはありません。ここでのオプションは、残りの 2 つの側面を分割することです。画像の左右の部分をスプライトに結合し、background-position:; を使用することもできます。画像の一部を選択する CSS プロパティを使用すると、ページの読み込み時間を短縮するために画像ファイルのリクエストを 2 つだけに抑えることができます。

于 2012-05-05T00:05:46.010 に答える
1

この効果を実現するために、要素を作成し、左側と右側のキャップに擬似要素を割り当て、幅プロパティに適用される CSS3 トランジションを使用できます。

私はそれがどのように行われたかを説明するために、jsFiddle で動作するデモをセットアップしました。このデモでは背景色を使用していますが、画像を使用することもできます (中心要素の X 軸に沿って繰り返します)。

HTML5 rocks playgroundをチェックしてください。CSS3 と HTML5 の能力を (自然に) 示す魅力的なスニペットがいくつかあり、クイック リファレンスとしても使用できます。

于 2012-05-05T00:23:57.197 に答える