2009 2009年2 17

CSSのClipプロパティをUnderstandng

なぜ私はこれを理解したいか? ヒュム...!!

CSSの作家のほとんどは、そのCSSのClipプロパティは、おそらくほとんどの未使用のCSSプロパティの一つです同意するだろう。 それはあまりにも私にとっては本当だったので、私は変更を開始するまでは、それを無視するのが最も幸せだったMooToolsのTWOノブ(ピン)Sliderコンポーネントを(範囲インジケータ付き)

スライダの範囲を示すために切り取られbackgroudのイメージ(可変幅の分割に対して)を使用して、Sliderコンポーネントを変更するコンポーネントのいずれかのユーザーから良い提案がありました。 したがって、私の楽しみを入力する時間はなく、CSSのClipプロパティの非チャーター(私のためにofcourseの)水が来ました。

よく! それはどのように困難になることができますか? あまりすべてで... YESとNO。 CSSのClipプロパティを使用する構文はかなり直立であるが、意味は/ usuageビットcroockedです。 私のようなメモリでは、毎回私は、スライダのスクリプトの手直しに座っている...私は自分自身に私のスクリプトで作成したロジックを思い出させるために、このClipプロパティの使用方法に戻ってtokeepを参照している.... それゆえ! それは未来(とも思われる人々の利益のためにCSSのクリッププロパティでboggled)覚えておくべき希望をもって、ペンをダウンすると考え

CSSのクリップは何をしますか?

クリップはCSS 2.1のビジュアルエフェクト·モジュールの一部です。 簡単に言えば、そのジョブは追加のファイル(作成しなくても、それ故に画像をクリッピングしてサムネイルを作成、クリッピングされているオブジェクトの上に表示されるウィンドウを配置することです私はすでに、Sliderコンポーネントの活用には、この機能を入れている :)

CSSのClipプロパティを使用して、四角形の図形を使用してクリッピングを作成することができます。 rectを使用して、多くの他のCSSプロパティ(マージン、パディングなどのように)、同様に必要とする4つの座標上、右、下、左(TRBL)。 あなたはこれらの4つの座標を(しばらくの間、トスに脳を送信)を使用して、クリップのクリッピング領域を計算する方法を詳しく見てみたときに、このプロパティのcroocked性質が反映されています。 今、あなたを混乱させるボトムは、トップから始まり、右は左から始まります。 :) あなたは私が言った?を参照してください。 .... したがって、このポスト...

この小さな混乱は簡単に以下のCSSクリップ/矩形プロパティのこの視覚的な説明と、消えることができます!!

CSSクリップの要件

我々が開始したタスクは、正方形を見た画像(また、広角画像)に次のサムネイル画像をクリップすることである

original_image clip_demo
オリジナルThumbnal /イメージ Sqaure Thumbmailのクリップの要件

CSSのクリップが見つかりました

clip_results

デモ表示 | ダウンロード、ソースファイルを


NDKホーム | ITを表現 | 表現口蓋 | Penmenshipを表現 | 表現する素晴らしい | 自分を表現