面白いレイアウト

最近、近隣の部署の同僚から、1ブロックのレイアウトを手伝ってほしいと頼まれました。 彼はセマンティックレイアウトの基本を理解し、このブロックをきれいに美しく作りたかったのです。 しかし、このブロックはレイアウトの単純さからはほど遠いことがわかりました-丸い角とグラデーションの境界線を組み合わせたものです。 テーブルを作るために同僚を派遣しましたが、私自身はこの問題に対する最適なソリューションを提供できるマスタークラスを手配することを提案します。

猫の下に、タスクのスクリーンショットと.psdおよび私のソリューションへのリンク



私のソリューションにはIE 6用の10個のコンテナと6個の例外ルールが含まれています（私見ではあまり最適ではありません）

UPD：TKについて説明します：

• ブロックは、幅と高さの両方で拡張可能です（テキストに応じて）
• 角と境界線は画像によって挿入されます。
• ブロックのタイトルとテキストの内容

まとめ

だから、アイディアは尽きてしまったようで、結果を発表できるようになりました。

先ほど言ったように、私のオプションはまったく最適ではなく、さらにIE 6の表現を追加する必要があります。

それにもかかわらず、まともな解決策が提示されたことを嬉しく思いました。

• rmaksimはそのようなオプションを提案し、 その2つのオプション 、後者はスプライトを使用して、私見非常にエレガント
• dmitriykikkas はLebedevに言及しました 。 もちろん、彼らはどこでも動作するコードを持っていますが、これがどのように行われるかを理解するために、私の意見ではまったく簡単ではありません
• hlomzik も美しいオプションを提案しましたが、テキストのある下位のdivは私を悩ませますが、空のコンテナに簡単に置き換えることができます=）
• そして、 genの最後のオプション

ワークショップをありがとう、私のバランスがこれに十分な場合、カルマを追加しようとします=）