CSS3で6クール画像キャプション

CSS3は本当に強力です。単純なトランジション効果を得るには、画像やJavaScriptコードラインが必要になることがありました。今日ではCSS3だけで同じことができます.

このチュートリアルでは、CSS3を使用してさまざまなトランジションを使用して画像キャプションを作成する方法を説明します。.

デモ
ソースをダウンロード

ブラウザのサポート

このキャプションは比較的新しい機能であるtransformプロパティとtransitionプロパティに大きく依存するので、キャプションをスムーズに実行するために必要なブラウザサポートに注意することが賢明です。.

以下は、すでに変換と移行をサポートしているブラウザです。

Internet Explorer 10以降（まだリリースされていません）
Firefox 6+
クロム13+
サファリ3.2+
オペラ11+

それでは、チュートリアルを始めましょう。.

HTMLの構造

6枚の画像があります。キャプションスタイルが異なる各画像.

     簡単なキャプション
  
     フルキャプション
 Lorem ipsum dolor座ってamet、conctetuer adipiscing elit、sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
     フェードキャプション
 Lorem ipsum dolor座ってamet、conctetuer adipiscing elit、sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
     スライドキャプション
 Lorem ipsum dolor座ってamet、conctetuer adipiscing elit、sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
      これは回転キャプションです
 Lorem ipsum dolor座ってamet、conctetuer adipiscing elit、sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  
 
     フリースタイルキャプション
 Lorem ipsum dolor座ってamet、conctetuer adipiscing elit、sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

基本的なCSS

要素にスタイルを設定する前に、このCSSリセットを使用してすべてのプロパティをリセットし、それらにデフォルトのスタイル値を設定することをお勧めします。すべてのブラウザで同じ結果が表示されます（IE6を除く）。.

スタイルはstyle.cssファイルに分けられるので、HTMLファイルはきれいに見えます。ただし、ファイル内のスタイル規則を適用するためにheadタグの内側にリンクスタイルを追加することを忘れないでください。.

では、HTMLタグとメインラッパーIDから始めて、要素のスタイル設定を始めましょう。

 html 背景色：#eaeaea; #mainwrapper font：10pt通常のArial、sans-serif。身長：オート。マージン：80px auto 0 auto。 text-align：center。幅：660ピクセル。

画像ボックスのスタイル

画像を含むボックスにいくつかの一般的なスタイルを適用します。ボックスは左へフロートで並べて表示されます。オーバーフローも追加したことに注意してください。これは、その内側のすべてのオブジェクトがdivを通過して隠されるようにします。.

後で画像の遷移が必要になる場合に備えて、ボックス内のすべての画像にtransitionプロパティも宣言します。.

 ＃mainwrapper .box border：5px solid #fff;カーソル：ポインタ。高さ：182ピクセル。フロート：左。マージン：5px。位置：相対;オーバーフロー：隠れています。幅：200ピクセル。 -webkit-box-shadow：1px 1px 1px 1px #ccc; -moz-box-shadow：1px 1px 1px 1px #ccc;ボックスシャドウ：1px 1px 1px 1px #ccc; #mainwrapper .box img position：absolute;左：0; -webkit-transition：300ミリ秒のイーズアウト。 -moz-transition：300ミリ秒のイーズアウト。 -o-transition：300msすべてイーズアウト。 -ms-transition：300msすべてのイーズアウト。遷移：300msすべてイーズアウト。

キャプションの一般的なスタイル

キャプションにはいくつかの共通スタイルと遷移プロパティがあります。 opacityプロパティを使用するのではなく、アルファチャンネルに0.8のRGBAカラーモードを使用して、内部のテキストに影響を与えずにキャプションを少し透明に見せます。.

 #mainwrapper .box .caption 背景色：rgba（0,0,0,0.8）;位置：絶対色：#fff; ｚ指数：１００。 -webkit-transition：300ミリ秒のイーズアウト。 -moz-transition：300ミリ秒のイーズアウト。 -o-transition：300msすべてイーズアウト。 -ms-transition：300msすべてのイーズアウト。遷移：300msすべてイーズアウト。左：0;

キャプション1

最初のキャプションには、キャプションに一般的に使用されている単純なトランジション効果があります。画像の上にマウスを置くと、キャプションが下から出てきます。これに対処するため、キャプションの高さは30ピクセルに固定されており、画像の下に隠れるように下の位置に30ピクセルを適用します。.

 #mainwrapper .box .simple-caption height：30px;幅：200ピクセル。表示ブロック;下：-30ピクセル。行の高さ：25pt。 text-align：center。

キャプション2

2番目のタイプは画像/ボックスの寸法の全幅と高さ（200x200px）で、トランジションは上から下にスライドするだけで引き戸効果のようになります.

 #mainwrapper .box .full-caption width：170px;高さ：170ピクセル。上：-200ピクセルtext-align：left。パディング：15px。

キャプション3

3番目のキャプションは色あせ効果があります。そのため、初期状態にopacity：0を追加しました。.

 ＃mainwrapper .box .fade-caption、＃mainwrapper .box .scale-caption 不透明度：0;幅：170ピクセル。高さ：170ピクセル。 text-align：left。パディング：15px。

キャプション4

4番目のキャプションは左から右にスライドするので、最初の位置として200pxを左に固定しました（left：200px）。.

 **キャプション4：スライド** /＃mainwrapper .box .slide-caption width：170px;高さ：170ピクセル。 text-align：left。パディング：15px。左：200ピクセル。

キャプション5

5番目のキャプションは回転効果があります。回転するのはキャプションだけでなく、画像でもあります。回転させて位置を変えるようなものです.

ですから、キャプションを読むためにモニタを回転させるのを好まないのであれば、-180度の回転でtransformプロパティを追加します。.

 #mainwrapper＃box-5.box .rotate-caption width：170px;高さ：170ピクセル。 text-align：left。パディング：15px。トップ：200px。 -moz-transform：rotate（-180deg）; -o-transform：rotate（-180deg）; -webkit-transform：rotate（-180deg）; transform：rotate（-180deg）; #mainwrapper .box .rotate width：200px;高さ：400ピクセル。 -webkit-transition：300ミリ秒のイーズアウト。 -moz-transition：300ミリ秒のイーズアウト。 -o-transition：300msすべてイーズアウト。 -ms-transition：300msすべてのイーズアウト。遷移：300msすべてイーズアウト。

キャプション6

最後のキャプションはスケール変換されます。ただし、前のキャプションでは、その中のテキストは実際には.caption遷移シフトと共に表示されます。このセクションでは、少し違います。.

遷移シフトが行われた後にテキストが表示されます。そのため、テキストにtransition-delayを追加します。この場合はh3タグとpタグです。.

 ＃mainwrapper .box .scale-caption h3、＃mainwrapper .box .scale-caption p 位置：相対;左：-200ピクセル。幅：170ピクセル。 -webkit-transition：300ミリ秒のイーズアウト。 -moz-transition：300ミリ秒のイーズアウト。 -o-transition：300msすべてイーズアウト。 -ms-transition：300msすべてのイーズアウト。遷移：300msすべてイーズアウト。 #mainwrapper .box .scale-caption h3 -webkit-transition-delay：300ms; -moz-transition-delay：300ミリ秒。遷移遅延：300ms。 -ms遷移遅延：300ミリ秒。遷移遅延：300ms。 #mainwrapper .box .scale-caption p -webkit-transition-delay：500ms; -moz-transition-delay：500ミリ秒。遷移遅延：500ミリ秒。 -ms遷移遅延：500ミリ秒。遷移遅延：500ms。

動かそう

次のセクションでは、画像またはボックスの上にマウスを移動したときのキャプションの動作を定義します。.

キャプションの動作1：表示.

最初のキャプションでは、ボックスの上にカーソルを置くと（下から）表示されます。この動きに対処するために、私たちはtransformプロパティを使い、下のCSSコードはキャプションにその重みの100％を一番上に移動するように伝えます.

 ＃mainwrapper .box：hover .simple-caption -moz-transform：translateY（-100％）; -o-transform：translateY（-100％）; -webkit-transform：translateY（-100％）;変換：translateY（-100％）;

あなたが翻訳のために負の値を持っているという意味を得ないならば、あなたはより多くの洞察を得るために最初にこのチュートリアルを読むことを望むかもしれません.

キャプションの動作2：下に移動.

逆に、2番目のキャプションは上から下に移動します。だから、私たちは翻訳のために正の価値を持っていますY.

 ＃mainwrapper .box：hover .full-caption -moz-transform：translateY（100％）; -o-transform：translateY（100％）; -webkit-transform：translateY（100％）;変換：translateY（100％）。

キャプションの動作3：フェードイン.

3番目のキャプションは、実際には最も簡単なものです。ボックスにカーソルを合わせると、キャプションの不透明度が1になり、表示されます。キャプションクラスにtransitionプロパティを追加したので、トランジションはスムーズに実行されます。.

 #mainwrapper .box：hover .fade-caption 不透明度：1;

キャプションの動作4：左にスライドさせる.

前述したように、このキャプションは左からスライドしますが、画像も右にスライドします。それで、ここに2つのCSS宣言があります.

以下のCSSコードは、ボックスの上にマウスを移動すると、キャプションがその幅の100％左にスライドすることを示しています。スライドが水平方向に右から左に移動するようにしたいので、translateXを使用していることに注意してください。.

 #mainwrapper .box：hover .slide-caption 背景色：rgba（0,0,0,1）！重要です。 -moz-transform：translateX（-100％）; -o-transform：translateX（-100％）; -webkit-transform：translateX（-100％）;不透明度：1。変換：トランスレートＸ（約１００％）。

ボックスにカーソルを合わせると、画像が左にスライドします。.

 ＃mainwrapper .box：hover img＃image-4 -moz-transform：translateX（-100％）; -o-transform：translateX（-100％）; -webkit-transform：translateX（-100％）;変換：トランスレートＸ（約１００％）。

キャプションの動作5：回転させる.

このキャプションは他の部分とは異なります。右からも左からも動かず、回転します。ボックスがホバーされているとき、画像とキャプションを含むdivは反時計回りに-180回転して画像を隠しキャプションを表示します.

 / **回転キャプション：ホバーの動作** /＃mainwrapper .box：hover .rotate 背景色：rgba（0,0,0,1）！重要。 -moz-transform：rotate（-180deg）; -o-transform：rotate（-180deg）; -webkit-transform：rotate（-180deg）; transform：rotate（-180deg）;

キャプションの動作6：スケールアップ.

このキャプションはいくつかの変換効果を組み合わせます。ボックスにカーソルを合わせると、画像は初期寸法から140％（1.4）拡大されます。.

 ＃mainwrapper .box：hover＃image-6 -moz-transform：scale（1.4）; -o-transform：scale（1.4）; -webkit-transform：scale（1.4）;変換：スケール（１．４）。

そして上記のCSSを見た場合 キャプション6 見出しとして、テキストを200px左に隠しました。以下のこのCSSコードは、テキストに最初の位置に移動するように指示します。そのため、テキストは同時に左から右にスライドインします.

 ＃mainwrapper .box：hover .scale-caption h3、＃mainwrapper .box：hover .scale-caption p -moz-transform：translateX（200px）; -o-transform：translateX（200px）; -webkit-transform：translateX（200px）;変換：translateX（200px）;

デモ
ソースをダウンロード

概要

これらのCSS機能はすばらしいですが、先に述べたブラウザサポートの制限により、まだ広く適用されていません。ただし、これらの新機能を試してみてください。これが今後のWebページの形成方法となるためです。.

クレジット

チュートリアルの画像サムネイルは、次のWebサイトから取得されます（スクリーンショット）。

離れた本
Archiduchesse
Vlog
ホンキート
あいさつ農場
マーク・エコ