ITを表現する

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

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クリップの要件

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

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

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

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

このポストは "卵を吸うために教育おばあちゃん"というフレーズの良い例かもしれない...これは単なる基本的なCSSの原料である原因。 しかし、これらのために、気づかない私のように、これは不幸中の幸いかもしれません。 私はいつも（私はこれを言うための私の仕事を失う可能性があります）、それは静的なHTMLページのコンテンツの一部を維持するためにのみ可能だと思ったすべてのこれらの科学を行う、いくつかのスマートなスクリプトを使用して、（つまり、その位置など、ウィンドウのスクロールに、ISのまま）計算はWindow.scrollイベントをトラップし、タイムアウトなどを設定し、動的な位置を見つけるために

それはこのような単純なことができるとは思わなかった.... ここで、以下のCSS / HTMLで、私は4つの静的ブロック、ページの各extrimitiesに固定し1、上、右、下と左の...不必要な言うことを持っている...ことを必要とする場合には、いずれか1つ以上を選択することができます...

CSS
静的{表示：ブロック;のz-index：10;色：＃000000;オーバーフロー×：隠された;オーバーフロー-Y：隠された;位置：ixed。
}
＃内容{マージン：100pxに875 0px 160px;国境：1px固体＃e6e6e6}

＃ラップT {トップ：0px;背景：＃33CC66;幅：100％;高さ：55ピクセル;}

＃ラップ-L {トップ：80px;背景：＃FF9966;高さ：300pxの、幅：875、国境：固体＃e6e6e6 2PX;}

＃ラップは、-b {下：0px;背景：＃3333CC;幅：100％;高さ：55ピクセル;}

＃ラップ-R {トップ：80px;背景：＃6666FF;高さ：300pxの、幅：140px;ボーダー：＃e6e6e6固体2PX、右：0;}

HTML
<divのid="contents">あなたのメインページの内容</ DIV>
<div id="wrap-b" class="static">
ページ下部の静的コンテンツ
</ DIV>
<div id="wrap-t" class="static">
このページのトップに静的コンテンツ
</ DIV>

<div id="wrap-l" class="static">
ページの左側の静的コンテンツ
</ DIV>
<div id="wrap-r" class="static">
ページの右側の静的コンテンツ
</ DIV>

ここでwrokingサンプルを見る

私は別にリストにこの記事を読んで" のどの絶対配置
エリック·ソルで "、私は感動よりも少ないものでした。 私も原因となる、すぎなかった落ち込んでいた、正直なところ私は思っていた、なぜ私はこのように素晴らしい何かを思い付く傾ける。

通常、我々は、CSSレイアウトを作成するときに、私たちは "POSITION"または "フロート"、またはその両方の非常に悪いを組み合わせて使用​​します。 エリック·ソルと彼のチームは、彼らは列の存在をシミュレートします偽もの列技法の後に" のどの絶対位置 "として洗礼をしているCSSレイアウトテクニック、新しいタイプの完璧なテクニックの隣に定義されています。

あなたがその問題を知っているCSSの開発者たちのすべてが崩壊のレイアウト（私たちはフロートレイアウトを使用する場合は、ラップして列全体を引き起こす予期しないコンテンツの変更）を持っている...まあ！ 歴史ですね！！
それは国連書かれた標準になる前に、このレイアウト技術は、まだ非常に若いですし、そこにすべてのこれらのCSSの教祖によってゴミ箱する必要があります。 私は今それを使用することが幸せなんだよ！ ...そして、すでにFAPのレイアウトに私の以前の問題/浮動小数点非必ずしもレイアウトを変換するの真ん中に既にです...と言うことをうれしく思います" 我々は、既に同様に、このブログサイトにフォークス絶対配置を使用している " ...今、それを試してみてGO！

名声エリック！