最近では、css3パンを実際に試してみて困惑しました。 彼らが現実に適合するものをご覧ください。 誰もが知っているファンシーボックスギャラリーなどに目が行きました。 言い換えれば、私はjsギャラリーの外観を作ることにしましたが、それは純粋なhtml + cssのみです。
始めましょう。
写真の配置に煩わされることなく、フロートを介して「壁」に並べました。左。 画像の親はリンク（タグ「a」）でしたが、その理由は以下で明らかになります。 なぜなら 私は4つの写真を4行作成することにしました。高さと幅の25％を要求します。 枠線は、ボックスサイズ設定によってコンテナに「配置」されます。 次のようになります。
a{ float: left; width: 25%; height: 25%; position: relative; border: 1px solid #333; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
次に、画像を操作します。 それを100％に設定し、絶対位置と遷移位置に配置します。 コードが添付されています：
a img{ display: block; width: 100%; height: 100%; -webkit-transition-property: width, height; /* , */ -webkit-transition-duration: 300ms; /* , */ -moz-transition-property: width, height; -moz-transition-duration: 300ms; -o-transition-property: width, height; -o-transition-duration: 300ms; position: absolute; opacity: 0.3; /* */ cursor: pointer; }
ギャラリーのオプションの1つで、写真に署名することにしました。 疑似要素の後に実装されます。
a:after { display: block; position: absolute; width: 100%; height: 100%; content: "Studio.com"; color: #eaeaea; font-family: "Trebuchet MS"; font-size: 16px; opacity: 0.5; }
ここではすべてが明確だと思います。
画像を開くためにどのアクションが必要かという疑問が生じました。 結局のところ、開くまで開いて、この状態のままにしておく必要があります。 解決策は次の場所にあります：focus疑似クラス。 また、フォームフィールドとリンクに対してのみ機能するため、「a」タグが必要でした。
私たちは作ります：
a:focus img{ width: 250%; /* */ height: 250%; position: absolute; opacity: 1; /* */ z-index: 1; /* */ -moz-box-shadow: 0 0 15px 2px #000; -webkit-box-shadow: 0 0 15px 2px #000; box-shadow: 0 0 15px 2px #000; /* */ -webkit-transition-property: width, height; /* «» */ -webkit-transition-duration: 2s; /* , */ -webkit-transition-delay: 0.3s; /* , , */ -moz-transition-property: width, height; -moz-transition-duration: 2s; -moz-transition-delay: 0.3s; -o-transition-property:width, height; -o-transition-duration: 2s; -o-transition-delay: 0.3s; cursor: default; }
ご注意 フォーカス擬似クラスがChromeブラウザーで正しく機能しないため、解決策はtabindexリンクを追加することで見つかりました。
原則として、すべての準備が整っており、使用を開始できます。 しかし問題は、すべての画像が左上から右下に展開されることであり、これが常に手に届くとは限りません。 結局のところ、このギャラリーがブラウザーウィンドウの右または下の境界の近くにある場合、展開された画像は対応するスクロールバーを形成します。 それを取り除く方法は？ 疑似クラス：nth-childは、プロパティを適用する頻度を設定する機能を思い付きました：
a:nth-child(4n+4) img, a:nth-child(4n+3) img{ right: 0; } /* 3- 4- */
a:nth-child(n+9) img{ bottom: 0; } /* , */
なぜなら 4 * 4のグリッドがあり、この場合、たとえば12要素は、左下隅から右下に向かって展開します。 したがって、すべての画像は画像コンテナ内に表示されます。 途中で、動的に追加された画像の問題を解決しました-クラスを割り当てる必要はありません-nth-childがこれを自分で処理します。
さて、これですべてです...しかし、画像を強制的に閉じる方法は？ 合理的な質問。 決めます。 写真は「フォーカス」で開かれるため、写真を閉じるには、フォーカスを削除する必要があります。 ここではあまり気にしなかったので、1つの共通の「ボタン」を作成して、ギャラリーの右上隅に吊るすことにしました。 ここでの注目すべき点から、私はそれを普通のプラスにして、45度回転させ、影を追加しました。
-webkit-text-shadow: 0px 0px 5px #222; -moz-text-shadow: 0px 0px 5px #222; text-shadow: 0px 0px 5px #222; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); cursor: pointer;
ただし、ある要素が別の要素に依存し、その要素が子孫である場合にのみそのアクションに応答できるという事実に慣れています。 そして、不本意の子孫を20個生成するために（ちなみに、同じ理由で、ボタンを1つだけ作成しました。）
一般化された関連要素「〜」のセレクターが助けになりました。 その結果、マークアップに1つの要素を作成し、それを画像のコンテナに配置して、共通の親が1つになるようにしました。 さて、標準的な手法を使用します。
.closed{ display: none; } a:focus~.closed{ display: block; }
これで、いずれかの写真をクリックすると、右上隅に十字が表示され、クリックすると画像が最小化されます。 そして、十字架もそれぞれ消えます。
作業例：
最初のオプション
二番目のオプション