html - css3を使用してこのブレッドクラムを作成できますか？

Question

CSSを使用してこのPSDを作成しようとしていますか？

これまでのところ、私はこれに到達しました。CSS3を使用してこのデザインを実現できますか、それとも古い学校の背景画像法を使用する必要がありますか？

Answer 1

つまり、これは CSS だけで(CSS2 がなくても) 可能ですが、代わりに背景画像を使用することをお勧めします。

怒鳴る

このような CSS を行う際の問題は影です。三角形をレンダリングする方法は、対角線側で透明な境界線にすぎません。言い換えれば、あなたの影はまだ箱のままで、あなたが望むようには見えません.

これは、CSS3 を使い始めた人々によく見られます。彼らは通常、背景画像を使用する代わりに、すべてを動的に実行することを望んでいます。そして、それが完了すると、ページの審美的にはほとんど何もしない大量の CSS ができあがります。実際には、画像で同じ効果を得るには、最終的に得られるものの 10 ～ 15% しかかかりません。

背景画像に問題はなく、時代遅れになることもなく、すぐに機能しなくなることもありません。私のアドバイスは、画像が必要なものには背景画像を使用し、特殊効果のために CSS3 を保存することです。退屈で昔ながらのように聞こえますが、機能し、はるかに簡単です。

Answer 2

これは比較的単純な CSS プロジェクトのようです。ここでは単純です。CSS だけでアニメーション化された Twitter Fail Whale を作成する人を見たことがあります。
三角形のエッジ (これはあなたにとってトリッキーな部分だと思います) のためにしなければならないことは、CSS マトリックス変換 ( W3Schoolsで詳しく説明されています) を使用box-shadowしてから、境界線とbox-shadow: insetインセットに使用することです。効果。その後、適切なパディングとテキストの配置を使用して、テキストをオブジェクトの各部分の中央に配置します。

EDITこれを実現するには、疑似要素beforeとafter疑似要素の使用を検討してください。または、セクションごとに2 つの歪んだ を<div>重ねて使用することもできます。ただし、これでは魅力的な影が得られません。

Answer 3

CSSだけでは無理だと思います。背景画像を利用する必要があります。:after および :before 疑似クラスを使用して、テーパー エッジ効果を作成できます。しかし、内側の影の問題に直面します。

以前、Google ヘルプ センターでパンくずリスト (似ていますが背景画像を使用) を見たときに、css3 だけを使用して同様のパンくずリストを作成しようとしましたが、作成できませんでした。

http://support.google.com/adsense/bin/answer.py?hl=ja&answer=1354760

他の html 要素を追加せずに、CSS (:after および :before) 疑似要素でそれを実行しようとしました。