4

ホバー状態で縦横に伸ばすことができるボックスのイメージスプライトを作成しようとしています。私は通常、垂直方向または水平方向にのみ伸びるスプライトを作成します。その場合、無限に伸ばす必要のあるボックスの部分を画像の上下に接触させて垂直方向にループさせるか、左側と右側に接触させて水平方向に伸ばす必要がありますが、両方に1つのスプライトを作成することに固執しています。

これが私が取り組んでいるもので、ホバー状態の背景色を使用するリンクリンクのリスト（<ul>）が含まれています。

スプライト

左側：通常の状態。右側：ホバー状態

現在持っているものでCSSを使用して、達成しようとしていることを実行できるのか、それとも画像を1つのファイルの小さな部分に分割する必要があるのか​​わかりません。これが私が片側でそれを行うことをイメージしている方法です。

スライスした例

これが私が2つの異なるファイルにまとめたものです。このスプライトを自己完結型にしたいので、まだ完全には満足していませんが、多分私はあまりにもうるさいですか？

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

質問：

  1. ほとんどの標準ブラウザでサポートされているCSSコードを使用して、最初の画像で目標を達成できますか？つまり、Firefox、Chrome、Safariの最新バージョンは必要ありません。互換性の高いものにしたいと思います。
  2. 質問1が「いいえ」の場合、この例のスプライトレイアウトを作成するにはどうすればよいですか？
  3. 丸みを帯びた角の実装が明らかでない場合は、CSSの例（擬似コードでも問題ありません）を提供できますか？

注：現在、ボックスにリストアイテムがあることはわかっていますが、メニューを想像してください。最初または最後のアイテムにカーソルを合わせると、ヘッダー/フッターとともにコーナーが白に変わり、状態にもカーソルを合わせることになります。私はおそらくこの部分を自分で理解することができますが、スプライトのデザインにこの機能が欠けていないように、言及したかっただけです。

4

2 に答える 2

1

これはあなたの質問＃1への答えです。

正確ではありませんが、CSSで非常に厳密に実現できます。このフィドルをチェックアウト

互換性については、次のページを参照してください。

  1. http://caniuse.com/border-radius
  2. http://caniuse.com/css-boxshadow
  3. http://caniuse.com/css-gencontent

要約すると、以下を除くほとんどのブラウザで動作します。

  1. IE8以下では、影と丸みを帯びた境界線がありません
  2. IE7以下では、矢印とホバーの状態も欠落しているため、ボックスだけです。:(

IE7をサポートする必要がなければ、これは使えると思います。

CSSコード：

.box {
    background-color: #ccc;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    position: relative;
}
.box:hover {
    background: white;
}
.box:hover:after {    
    border-bottom: 20px solid white;
}
.box:before {
    content: ' ';
    display: block;
    position: absolute;
    top: -6px;
    right: 26px;
    width: 8px;
    height: 6px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
}
.box:after {
    content: ' ';
    display: block;
    position: absolute;
    top: -10px;
    right: 10px;
    border-bottom: 20px solid #ccc;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}
于 2013-03-15T10:04:48.193 に答える
0

さらに調べてみると、答えが見つかりました。残念ながら、私の質問に対する本当の答えはなく、これがトリックの質問になるつもりはありませんでした。それにもかかわらず、ここに行きます。

回答：

1）いいえ。それは不可能です。

2）コメントボックスは幅と高さから無期限に伸びることになっているため、1つのスプライトを使用することはできません。これが本当に必要な場合は、JaredFarrishが2つの背景画像で行うと言ったリンクを実行する必要があります。

代わりに、私が見つけた最善の解決策は、最初の画像とその中に角があるスプライトの組み合わせでした。次のようなスプライトを想像してみてください。

左から右へ。ただし、右バー、左バー、右ホバーバー、左ホバーバーの順に、grpahicの上部から下部に接するサイドバー。

次に、両方のポインタをつかみ、コメントボックスの上部が配置されるバーの右側に配置します。これにより、後でCSSを使用してプログラムするのが簡単になります。

最後に、最初のグラフィックの2つのコメントボックスをつかんで、ホ​​バー状態を通常の状態の下に置きます。箱を無期限に伸ばしたいと言っていたのに気づきましたが、そうではありません。ボックスの幅が300,000ピクセルになることは決してないので、コンテンツの幅である900ピクセルに拡大しただけで、これらのボックスの最大幅は無制限の高さで900ピクセルになりました。

全体の画像は約4kbになり、1つの画像にスプライトが含まれるようにすることができました。コメントバブル内のどこにあるかを参照するだけなので、スプライトの別の部分にコーナーを個別に配置する必要はありませんでした。:)

于 2013-03-21T19:05:51.977 に答える