6

私は現在、Drupal 6 のテーマに取り組んでいます。デザイナーは、丸みを帯びたコーナーをたくさん使用することを明示的に要求しています。

もちろん、伝統的に丸みを帯びた角を画像で作成することもできます。しかし、丸みを帯びた角を作成するためのより良い、より簡単な方法もあるはずです.

最適には、次のようなセレクターを使用して、CSS を標準準拠の CSS3 として記述したいと考えています。

h2 {border-radius: 8px;}

ブラウザ固有の CSS の使用も非常に OK です。

h2 {-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}

必要に応じて、カスタム JavaScript を手動で挿入することもできます。マークアップに丸みを帯びた角の画像をさらに 100 個追加することは避けたいだけです。

最善のアプローチに関する提案はありますか？

4

2 に答える 2

7

「roundy-corner」のようなクラスを定義し、次のように jQuery コーナー プラグインを使用します。

$('.roundy-corner').corner();

jQuery roundy corner プラグインが必要です。

http://www.malsup.com/jquery/corner/

ソース ドキュメントに追加のマークアップを必要としないため、ここでは JavaScript を使用します。スクリプトは、必要に応じてプレースホルダー要素を挿入します。また、遠い将来、私たち全員が空飛ぶ車を手に入れ、IE が境界半径をサポートするようになったら、それを純粋な CSS に置き換えることができます。

于 2010-02-22T12:49:59.503 に答える
1

推奨される角丸プラグインを使用するための Drupal 固有の注意事項:

  1. jquery.corner.jsをダウンロードして、Drupal インストールのスクリプト フォルダーに配置します。ファイルのパーミッションを正しく設定してください。
  2. 次の行を template.php に追加して、(Zen) テーマにスクリプトをロードします。drupal_add_js('scripts/jquery.corner.js');
  3. スタイリング コマンドを template.php に再度追加して、ページの任意の部分に角丸を割り当てます。drupal_add_js メソッドでそれらをフックする必要があることに注意してください。例えば：
drupal_add_js(
  "$(document).ready(function() {
       $('#primary a').corner('top round 4px');
       $('.block-inner h2.title').corner('top round 4px');
   });",
  'inline'
);

それでおしまい！！！画像なしで美しい丸みを帯びた角！

于 2010-02-22T13:40:55.143 に答える