角丸の例(div+css)_html/css_WEB-ITnose

http://www.html.it/articoli/niftycube/index.html（虽然是英文的，但相信大家耐心点还是可看的懂的） by Alessandro Fulciniti

最初のバージョンから 1 年以上が経過しましたニフティコーナーの。これは概念実証に近いものであり、2 番目のバージョンではいくつかの大きな改善が示されましたが、まだ何かが欠けていました。そこで今回は、以前のバージョンよりもシンプルかつ柔軟になった Nifty Corners Cube を紹介します。始めましょう。

新機能

ニフティ コーナーを初めて使用する場合は、特に最初のバージョンの記事を参照して、その背後にあるコンセプトを理解することをお勧めします。基本的に、Nifty Corners は、画像なしで角を丸めるための CSS と Javascript に基づくソリューションです。

Nifty Corners Cube にはいくつかの改善と新機能が導入されており、以前のバージョンよりも多用途で使いやすくなっています。パラメータの数は、最初のバージョンの 4 つ、2 つ目のバージョンの 5 つからわずか 2 つに減り、そのうち 1 つはオプションです。色は自動的に検出されるため、色を指定する必要はありません。丸める要素のパディング (水平方向と垂直方向の両方) が保持されるため、設計プロセスへの統合が容易になります。 他のスクリプトでの使用が容易になります。 CSS セレクターのサポートが改善および拡張されました。 head セクションがライブラリ全体に必要になりました。たとえ CSS と JavaScript の両方に基づいていたとしても、Nifty Corners のプレゼンテーション CSS は js によって自動的にロードされます。これらは現在、GPL ライセンスの下でリリースされています。

いくつかの例を通して明らかになる多くの新機能とともに、以前のバージョンの 2 つの機能が廃止されました。まず、Internet Explorer 5.0/Win のサポートは完全に終了しました。このブラウザのユーザーには、JavaScript が無効になっているユーザーと同様に、四角い角が表示されるだけです。ただし、サポートは依然として非常に良好です。記事の例はすべて、IE5.5、IE6、および IE7 ベータ 2 プレビュー、Opera 8.5、Firefox 1.5、および Safari 2.0 で正常にテストされています。 IE で発生した互換性の問題と、スクリプトの新しいアプローチのため、境界線のある Nifty Corners さえも削除する必要がありました。

Nifty Corners Cube: はじめに

Nifty Corners Cube は、画像なしで角を丸くするためのソリューションであり、この 3 番目のバージョンはは 3 つの主要コンポーネントによって構築されます:

「niftycornerscube.js」という名前の JavaScript ファイル 「niftycorners.css」という名前の CSS ファイル JavaScript はページに固有の呼び出しを行います

これで、最初の例を確認する準備が整いました。 Nifty Corners のおかげで角が大きく丸くなった div です。前にも述べたように、CSS ファイルは JavaScript によって自動的に追加されます。実際、この例での外部ファイルへの参照は次のとおりです。

3 番目の点に関しては、ページに必要な JavaScript 呼び出しと同様に、例のコードは次のとおりです:

太字で、ページに依存するスクリプトの部分を報告しました。それは、Nifty 関数の呼び出しです。この関数はライブラリ全体の中核であり、スクリプトの長所である 2 つのパラメーターを受け取ります。パラメータは引用符で囲み、カンマで区切って指定する必要があります。最初のパラメータは要素を丸めることをターゲットとする CSS セレクター用であり、2 番目のパラメータは省略できるデフォルトの場合のオプションです。それらを詳しく見てみましょう。

パラメーター

最初のパラメーターは、CSS セレクターが Nifty Corners を適用する要素をターゲットにするためのものです。受け入れられる CSS セレクターは、タグ セレクター、ID セレクター、子孫セレクター (ID またはクラス付き)、およびグループ化です。次の表にいくつかの例を示します。

セレクターの例 タグ セレクター "p" ID セレクター "div#header" クラス セレクター "div. news"子孫セレクター(id付き) "div#content h2"子孫セレクター(クラス付き) "ul. news li" グループ化 (前のセレクターの任意の数と組み合わせ) "h2,h3"

オプションについて説明します。オプションはキーワードによって識別され、任意の順序と番号で指定できます。見てみましょう:

"h2"

"h2#about"

"span.date"
"p.comment"

"div#menu a"

"div.entry h4"

"div#header,div#content,div#footer"
"ul#menu li 、div.entry li"

キーワードの意味 tl tr bl br 上 上隅下 下隅左 左隅右 右隅すべて (デフォルト) 四隅すべてなし 角は丸められません (気の利いた列に使用します) small 小さなコーナー (2px) Normal (デフォルト) 通常のサイズのコーナー (5px) big big size コーナー (10px) 透明 内側の透明、エイリアスコーナーが取得されます。このオプションは、丸める要素に背景色が指定されていない場合に自動的に有効になります。 固定高さ CSS 経由で固定高さが設定されている場合に適用されます 同じ高さ 気の利いた列のパラメータ: すべての要素最初のパラメータの CSS セレクターによって識別される要素は同じ高さになります。角を丸めずに効果が必要な場合は、このパラメータをキーワード none と組み合わせて使用​​します。

We'll meet the selectors and options through the many examples I've prepared. Let's start.

Example 1: a single div

The first example has been already presented. The code to round the div with id="box" is the following:

window.onload=function(){
Nifty("div#box","big");
}

The first line is needed to link the nifty corners library, while the others are for the specific page. Background colors of the page and the div id="box" are detected automatically by the script. Another thing to note is that the padding of the div (20px on vertical sides in this case) is preserved.

The part reported in bold is the call to the Nifty function. For the sake of brevity, starting from the next example, I'll report just the calls for this function, but please keep in mind that these have to be incorportated in an embedded script tag or, even better, in an external js file.

Example 2: two divs

In the second example nifty corners were used to round two divs with one single call:

Nifty("div#content,div#nav");

In this case just the first parameter has been used, as is the CSS selector with grouping: the two id selector are separated by a comma. The second parameter hasn't been used, therefore nifty corners will be of medium size (5px) and with antialias by default.

Example 3: transparency

In the example three nifty corners were applied on a div with a gradient background. In such cases the use of inner transparency could be really useful, and will be obtained via the transparent option. Let's see the javascript call:

Nifty("div#box","transparent");

The transparency option is compatible with all others, and is used by default on elements with no background-color set.

Example 4: nifty tabs

The fourth example is one of the major request on nifty corners: a tabbed menu without images. The javascript call is the following:

Nifty("ul#nav a","small transparent top");

Links are rounded on the top side, with small and transparent inside corners. Inner transparency is essential for the rollover effect. In the case rollover with background-color is not needed, here's a small variant where each tab is smooth-rounded and has got a different color. The js call in this case is:

Nifty("ul#nav a","top");

There's a thing to highlight, as is the fact that in both examples the tabs are perfectly elastic, since they're em-dimensioned.

Example 5: nifty buttons

In the fifth example a mini-navigation, suitable for blogs and such, is obtained with nifty corners. The code is the following:

Nifty("ul.postnav a","transparent");

In this markup, a class for the buttons has been used, so it would be possible to get several sets of of link-buttons in the same page. On the nifty corners side, the descendant selector with a class has been therefore used.

Example 6: boxes

In the sixth example nifty corners are used to round six divs with fixed height and bold corners. Each of div has a different color, even the lower-right one which is white like the background of the page. Antialias is automatically done, and padding of the list-items, both vertical and horizontal, has been preserved. But in order to honour the fixed height specified via CSS, the fixed-height keyword has to be specified. Here's the only js call used:

Nifty("div#about li","tl bottom big fixed-height");

Example 7: nifty columns

With the seventh example we introduce one of the biggest new features of nifty corners: nifty columns. This feature allow to get a faux-column effect without background. The option that does the trick is same-height, and the elements must be specified within the first parameter. The call for the example is:

Nifty("div#content,div#nav","same-height");

The option same-height tells the script to detect the height of the elements targetted by the css selector and to assign them the same height, as is the maximum value detected, without the need for background-images.

Example 8,9 and 10: more nifty columns

The examples eight, nine and ten are built on the same markup, which is the following:

• 
    

  Title

  
    
  Content
  
  


• 
    

  Title

  
    
  Content


• 
    

  Title

  
    
  Content
  
  

実際に異なるのは、CSS と、3 つのケースで気の利いた列を使用する気の利いたコーナーへの呼び出しだけです。高さの例では、JavaScript 呼び出しは次のとおりです。

Nifty("ul#split li","same-height");

例 9 では 2 つの呼び出しが使用されています: 1 つは見出し用で、もう 1 つは同じ高さのオプションを使用して下位 div 用です:

Nifty("ul#split h3","top");
Nifty("ul #split div","下と同じ高さ");

例 10 のように、下部の角を丸くする必要はないが、とにかく同じ高さの要素を取得したい場合は、none オプションを指定するだけです:

Nifty("ul#split h3 ","top");
Nifty("ul#split div","同じ高さのものはありません");

例 11 と 12: Nifty Corners のレイアウト

Nifty Corners のレイアウトと同様に、記事の 2 つの主要な例に到達しました。この例では、レイアウトとページ要素に 11 と 12 の気の利いたコーナーが広範囲に使用されています。

例 11 では、前の例と同様に、参照しやすいように、ページに埋め込まれた CSS とスクリプトをそのまま残しました。 JavaScript セクションは次のとおりです:

window.onload=function(){
Nifty("div#container");
Nifty("div#content,div#nav","same-height small");
Nifty ("div#header,div#footer","small");
}

ページが読み込まれると、Nifty コーナーがコンテナに適用され、コンテンツとサイドバーにはナビゲーション用の擬似列が小さく、ページには小さいだけ適用されます。フッター。すべてのページを囲む白い境界線の効果は、コンテナーのパディングによって実現されます。

例 12 は、ブログ デザインで一般的な 2 列のレイアウト、タブ付きナビゲーション、およびいくつかの要素 (日付やコメントなど) を表しています。この場合、CSS と JavaScript は外部ファイルに保持されます。ヘッド セクションの関連コードは次のとおりです:

CSS とは別に、2 つの JavaScript ファイルがリンクされています。 1 つは気の利いたコーナー用のライブラリで、2 番目にはページの特定の呼び出しが含まれています:

window.onload=function(){
Nifty("div#menu a","small Transparent Top");
Nifty( "ul#intro li","同じ高さ");
Nifty("div.date");
Nifty("div#content,div#side","同じ高さ");
Nifty("div.date");
Nifty("div#content,div#side","同じ高さ");
Nifty("div.date");コメント div");
Nifty("div#footer");

Nifty("div#container","bottom");

}

オプションの Same-height は 2 つのケースで使用されています:導入と、コンテンツとナビゲーションの間。この 2 番目のケースでは、コンテンツに背景色が指定されていないため、内側が透明になるため、丸い角は表示されません。

例 13: NiftyLoad

ついに最後の例に到達しました。実際、頻繁に報告される質​​問の 1 つは、window.onload への割り当てが 1 つだけであるという事実を考慮して、Nifty Corners を他のスクリプトと共存させる方法です。

例 13 では、window.onload に添付された警告メッセージが示されています。気の利いたコーナーが進む前に。これは、以前の window.onload 関数を保存する NiftyLoad 関数のおかげで行われます。今回ページに埋め込まれたJavaScriptセクションは以下の通りです:

NiftyLoad=function(){

Nifty("div#box","big");

}

In order to make nifty Corners work together他のスクリプトの場合は、window.onload の代わりに NiftyLoad を使用するだけです。明らかに、関数は外部ファイル内でも使用できます。唯一重要なことは、ライブラリやページ中心の呼び出しと同様、気の利いたコーナー用の 2 つのスクリプト ブロックが、ページのヘッド セクションの最後の 2 つのスクリプト ブロックであるということです。これまでに見た例のように、NiftyLoad 関数は、ページの唯一のスクリプトが nifty コーナーである場合にも使用できます。

トラブルシューティングと問題解決

Nifty Corners Cube を作成している間、スクリプトを管理しようとしましたできる限りシンプルかつ堅牢であり、多くの例を通して読者にインスピレーションを与えられれば幸いです。

JavaScript の知識が必要ない場合でも、CSS と HTML の実用的な知識は必要です。コードを常に検証することもお勧めします。問題が発生した場合は、まず気の利いたコーナーを一時的に削除し、問題が継続するかどうかを確認します。この記事の例を準備する際に私が使用した一般的な開発アプローチは、Nifty Corners をページに追加する前に HTML と CSS を完全に作成することです。

このバージョンで導入された 2 つの機能により、Nifty Corners の使用が簡素化されます。色は自動的に検出され、JavaScript 呼び出しを更新しなくても CSS で変更できます。パディングは垂直方向と水平方向の両方で保持されるようになりました。特に垂直方向のパディングの場合は、コーナーのサイズと少なくとも等しいピクセル値を指定することをお勧めします。

これらの例は良い出発点となるはずです。心に留めておくべきことの 1 つは、場合によっては ID を使用したことです。ただし、ページに複数の要素が必要な場合は、HTML 仕様に従ってページ内の ID は一意である必要があるため、クラスまたは子孫セレクターを使用する必要があります。

クレジット、ライセンス、およびダウンロード

感謝いたしますDavid Lindquist は、Safari での作業を正しく行うために協力してくれました。気の利いたコラムのアイデアは、背景のない擬似コラムを取得する非常に賢い方法である CSS バランスの取れたコラムからインスピレーションを得ました。

Nifty Corners Cube は GNU GPL ライセンスの下でリリースされ、イタリア語と英語の両方で 2006 年 3 月 22 日に公開されました。

サンプルとコードはダウンロードできます。楽しんでください！

左上隅

右上隅

左下隅

右下隅