今日は、CSSのみを使用してライトボックスエフェクトを作成する方法を紹介します。 アイデアは、いくつかのサムネイルを作成することです。クリックすると、対応する大きな画像が表示されます。 CSSトランジションとアニメーションを使用して、さまざまなかわいい方法で大きな画像の外観を作成できます。
ターゲット擬似クラスを使用して、画像を表示し、それらをナビゲートできます。
Joanna Kustraによるデモで使用される美しい画像は、 Attribution- NonCommercial 3.0 Unported Creative Commons Licenseの下で使用されます。
これらの例は、 ：target疑似クラスをサポートするブラウザーでのみ機能することに注意してください。
やってみましょう！
HTMLマークアップ
まず、サムネイルのセットを作成します。各サムネイルには、ホバーすると表示される名前があります。 サムネイルをクリックすると、 lb-overlayクラスを持つブロックに画像の大きなバージョンが表示されます。これは最初は非表示になります。 したがって、順不同リストを使用します。各リストアイテムには、サムネイルと、対応する大きな画像を含むブロックが含まれます。
<ul class="lb-album"> <li> <a href="#image-1"> <img src="images/thumbs/1.jpg" alt="image01"> <span>Pointe</span> </a> <div class="lb-overlay" id="image-1"> <img src="images/full/1.jpg" alt="image01" /> <div> <h3>pointe <span>/point/</h3> <p>Dance performed on the tips of the toes</p> <a href="#image-10" class="lb-prev"></a> <a href="#image-2" class="lb-next"></a> </div> <a href="#page" class="lb-close">x </a> </div> </li> <li> <!-- ... --> </li> </ul>
たとえば、href = "＃image-1"などのサムネイルアンカーは、 lb-overlayクラスのdivであるid image-1を持つ要素を指します。 画像をナビゲートするために、前の画像と次の（大きな）画像を指す2つのリンクを追加します。
ライトボックスを「閉じる」ために、 lb-closeクラスのリンクをクリックします 。これは、この例ではbodyタグであるID pageを持つ要素を指します 。
ナビゲーションは最後のデモでのみ使用することに注意してください。
それでは、スタイルを見てみましょう。
CSS
記事が過負荷にならないように、いくつかの新しいプロパティのさまざまなブラウザのプレフィックスを省略します。 しかし、もちろん、それらはソースファイルにあります。
以下は、メインレイヤー、順序なしリスト、およびサムネイルのスタイルです。
.lb-album{ width: 900px; margin: 0 auto; font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; } .lb-album li{ float: left; margin: 5px; position: relative; } .lb-album li > a, .lb-album li > a img{ display: block; } .lb-album li > a{ width: 150px; height: 150px; position: relative; padding: 10px; background: #f1d2c2; box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset; border-radius: 4px; }
各サムネイルの名前は非表示になり、不透明度のトランジションを追加します。トランジションは、サムネイルのアンカーにカーソルを合わせると1になります。 背景として滑らかな放射状グラデーションを使用します。
.lb-album li > a span{ position: absolute; width: 150px; height: 150px; top: 10px; left: 10px; text-align: center; line-height: 150px; color: rgba(27,54,81,0.8); text-shadow: 0px 1px 1px rgba(255,255,255,0.6); font-size: 24px; opacity: 0; background: radial-gradient( center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100% ); transition: opacity 0.3s linear; } .lb-album li > a:hover span{ opacity: 1; }
オーバーレイレイヤーは同じ放射状のグラデーションを持ちます。また、位置プロパティを固定に設定し、高さと幅をゼロにします。
.lb-overlay{ width: 0px; height: 0px; position: fixed; overflow: hidden; left: 0px; top: 0px; padding: 0px; z-index: 99; text-align: center; background: radial-gradient( center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(241,210,194,1) 100% ); }
サムネイルをクリックするとすぐに、このブロックを残りのブロックの上に開きますが、最初に子を見てみましょう。
メインのタイトルと説明のスタイルを定義しましょう：
.lb-overlay > div{ position: relative; color: rgba(27,54,81,0.8); width: 550px; height: 80px; margin: 40px auto 0px auto; text-shadow: 0px 1px 1px rgba(255,255,255,0.6); } .lb-overlay div h3, .lb-overlay div p{ padding: 0px 20px; width: 200px; height: 60px; } .lb-overlay div h3{ font-size: 36px; float: left; text-align: right; border-right: 1px solid rgba(27,54,81,0.4); } .lb-overlay div h3 span, .lb-overlay div p{ font-size: 16px; font-family: Constantia, Palatino, serif; font-style: italic; } .lb-overlay div h3 span{ display: block; line-height: 6px; } .lb-overlay div p{ font-size: 14px; text-align: left; float: left; width: 260px; }
写真のすぐ上にライトボックスaを閉じるためのリンクを配置しましょう。
.lb-overlay a.lb-close{ background: rgba(27,54,81,0.8); z-index: 1001; color: #fff; position: absolute; top: 43px; left: 50%; font-size: 15px; line-height: 26px; text-align: center; width: 50px; height: 23px; overflow: hidden; margin-left: -25px; opacity: 0; box-shadow: 0px 1px 2px rgba(0,0,0,0.3); }
画像の最大高さは100％です。 半透明を作成するトランジションも追加します。 大きな画像を「開く」とすぐに、透明度がアニメーション化されます。 後で、画像にアニメーションを使用する方法を確認します。
.lb-overlay img{ max-height: 100%; position: relative; opacity: 0; box-shadow: 0px 2px 7px rgba(0,0,0,0.2); transition: opacity 0.5s linear; }
次に、ナビゲーションアイテムのスタイルを設定しましょう。
.lb-prev, .lb-next{ text-indent: -9000px; position: absolute; top: -32px; width: 24px; height: 25px; left: 50%; opacity: 0.8; } .lb-prev:hover, .lb-next:hover{ opacity: 1; } .lb-prev{ margin-left: -30px; background: transparent url(../images/arrows.png) no-repeat top left; } .lb-next{ margin-left: 6px; background: transparent url(../images/arrows.png) no-repeat top right; }
サムネイルアンカーをクリックすると、lb-overlayクラスのブロック内にある対応する大きな画像をポイントします。 したがって、この要素を見つけるために、疑似クラス：ターゲットを使用できます。 lb-overlayにパディングを追加し、autoの幅と高さを設定して「ストレッチ」し（これは必ずしも必要ではありません）、rightとbottomを0pxに設定します。 すでにトップに立ち、前に出たことを思い出してください。
.lb-overlay:target { width: auto; height: auto; bottom: 0px; right: 0px; padding: 80px 100px 120px 100px; }
次に、画像の透明度と終了リンクを1に設定します。
.lb-overlay:target img, .lb-overlay:target a.lb-close{ opacity: 1; }
そして、これらはすべてスタイルです！
例1と例2で使用する他の2つのオプションも見てみましょう。
最初の例では、アニメーションを使用して画像を表示し、スケールを変更して不透明度の値を増やしました。
.lb-overlay:target img { animation: fadeInScale 1.2s ease-in-out; } @keyframes fadeInScale { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
2番目の例では、逆の効果を作成しました。つまり、画像の縮尺が小さくなります。
.lb-overlay:target img { animation: scaleDown 1.2s ease-in-out; } @-webkit-keyframes scaleDown { 0% { transform: scale(10,10); opacity: 0; } 100% { transform: scale(1,1); opacity: 1; } }
デモ例
例1：スケールアップ/フェードインアニメーション
例2：縮小/フェードインアニメーション
例3：フェードインとナビゲーション
ご覧のとおり、トランジション/アニメーションに関しては、各ブラウザの動作は大きく異なります。 持続時間、時間関数、遅延を調整することにより、効果をより滑らかにすることができます。 Firefoxのアニメーション時間を変更するには、-mozプロパティを変更する必要があります。
以上です！ これらの例をお楽しみください！ メアリー・ルー
ソースをダウンロード