💤 🌥️ 🙋🏻 NoScriptフォトアルバム 🛌🏼 👖 🧑🏿‍🤝‍🧑🏾

現在、多くのサイトはJavaScriptなしでは実行できず、多くの場合、NoScriptをオフにして、表示したいものを確認する必要があります。そのため、JavaScriptを使用せずに1ページに軽量でコンパクトなフォトアルバムを作成することを考えました。 HTMLとCSSのみが使用されました。

チャレンジ：
1大きな画像は使用可能なスペースを占有します。
2サムネイルも可能な限り埋めます。
3次の画像を表示するためのマウスクリック（ただし、可能）およびスクロールはありません（サムネイルが画面より大きい場合を除き）。
4キーボードとマウスを使用して表示します。
5スクリプトなし。
6下位互換性を維持しながら。

擬似クラス：hoverおよび：focusが実装用に選択されました

空白は単純です（最初は少し複雑でした）：

<！doctype html>
< html >
< 頭 >
< meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" / >
< タイトル > NoScript Album < / タイトル >
< link rel = "stylesheet" type = "text / css" href = "style2.css" / >
< link rel = "stylesheet" type = "text / css" href = "imgs.css" / >
< ベースターゲット = "_blank" / >
< / / ヘッド >
< 本体 >
 < / / span >

<a href = "http://kirpich.example.com/imgs/rust/rust_vid-1.jpg" id = "lnk0" class = "lnk">
 < img src = "http://kirpich.example.com/thmb/rust/rust_vid-1.jpg" alt = "" > 
</a>

<a href = "http://kirpich.example.com/imgs/fjord/fjord_vid-1.jpg" id = "lnk1" class = "lnk">
 < img src = "http://kirpich.example.com/thmb/fjord/fjord_vid-1.jpg" alt = "" > < / / span >
</a>

<a href = "http://kirpich.example.com/imgs/shater/shater_enter.jpg" id = "lnk2" class = "lnk">
 < img src = "http://kirpich.example.com/thmb/shater/shater_enter.jpg" alt = "" > < / / span >
</a>

<a href = "http://kirpich.example.com/imgs/osenniy_list/vid1.jpg" id = "lnk3" class = "lnk">
 < img src = "http://kirpich.example.com/thmb/osenniy_list/vid1.jpg" alt = "" > < / / span >
</a>

<a href = "http://kirpich.example.com/imgs/vsevologsk1.jpg" id = "lnk4" class = "lnk">
 < img src = "http://kirpich.example.com/thmb/vsevologsk1.jpg" alt = "" > < / / span >
</a>

<a href = "http://kirpich.example.com/imgs/luch/Sertolovo.jpg" id = "lnk5" class = "lnk">
 < img src = "http://kirpich.example.com/thmb/luch/Sertolovo.jpg" alt = "" > < / / span >
</a>

<a href = "http://kirpich.example.com/921-1_.jpg" id = "lnk6" class = "lnk">
 < img src = "http://kirpich.example.com/thmb/921-1_.jpg" alt = "" > < / / span >
</a>

<a href = "http://kirpich.example.com/917-1.jpg" id = "lnk7" class = "lnk">
 < img src = "http://kirpich.example.com/thmb/917-1.jpg" alt = "" > < / / span >
</a>
< / スパン >
< / 本体 >
< / html >

CSSのないこのようなアルバムは「古い方法で」機能し、まともに見えます。

少し変えましょう：

body {
背景色：＃555555 ;
色：白 ;
高さ： 100 ％ ;
}

.lnk {
表示：ブロック ;
フロート：左 ;
margin-bottom ： 10px ;
margin-left ： 10px ;
オーバーフロー：非表示 ;
}

.lnk .img {
位置：相対 ;
z-index ： 3 ;
margin-bottom ： 10px ;
境界線： 1pxの黒一色。
オーバーフロー：非表示 ;
表示：テーブルセル ;
高さ： 100px ;
垂直整列：中央 ;
背景色：＃555555 ;
}

img {
垂直整列：中央 ;
ボーダー： 0px ;
幅： 100px ;
}

表示する表面を準備します。

.lnk ：ホバー：後 {
内容： "" ;
}

.lnk ：フォーカス、 .lnk ：ホバー：after {
背景色：＃555555 ;
background- size ：含む;
バックグラウンド位置：中央 ;
background-repeat ： no-repeat ;
カーソル：十字線 ;
}

レイヤーをウィンドウ全体に引き伸ばします：

.cover 、 .lnk ： hover ：after 、 .lnk ：focus {
位置：固定 ;
top ： 0px ;
左： 0px 。
幅： 100 ％ ;
高さ： 100 ％ ;
マージン： 0px ;
}

応答性を維持しながら画像を非表示にします。

。非表示：ホバー。 img {
不透明度： 0.01 ;
フィルター： alpha （ opacity = 1 ） ;
カーソル：十字線;
}

.hideをカバーするため、ホバーは画像でのみ機能します：

.cover {
z-index ： 2 ;
}

.lnkを使用して、他の画像をそれ自体でカバーします。

.lnk ：フォーカス {
z-index ： 4 ;
}

サムネイルを非表示にします。

.lnk ：focus .img {
表示：なし ;
}

そして、以下を示します。

.lnk ：フォーカス + .lnk {
位置：固定 ;
下： 20px ;
右： 0px 。
z-index ： 4 ;
}

透明度を削除します。

.lnk ：focus + .lnk .img {
不透明度： 1 ;
フィルター： alpha （ opacity = 100 ） ;
境界線： 1pxの黒一色。
}

サムネイルが横にある場合、大きな画像を非表示にします。

.lnk ：フォーカス + .lnk ：後 {
表示：なし ;
}

さて、別のファイルに画像をアップロードします：

＃lnk0 ：フォーカス、＃lnk0 ：ホバー：後 {
background-image ： url （ 'http://kirpich.example.com/imgs/rust/rust_vid-1.jpg' ） ;
}
＃lnk1 ：フォーカス、＃lnk1 ：ホバー：後 {
background-image ： url （ 'http://kirpich.example.com/imgs/fjord/fjord_vid-1.jpg' ） ;
}
＃lnk2 ：フォーカス、＃lnk2 ：ホバー：後 {
background-image ： url （ 'http://kirpich.example.com/imgs/shater/shater_enter.jpg' ） ;
}
＃lnk3 ：フォーカス、＃lnk3 ：ホバー：後 {
背景画像： url （ 'http://kirpich.example.com/imgs/osenniy_list/vid1.jpg' ） ;
}
＃lnk4 ：フォーカス、＃lnk4 ：ホバー：後 {
background-image ： url （ 'http://kirpich.example.com/imgs/vsevologsk1.jpg' ） ;
}
＃lnk5 ：フォーカス、＃lnk5 ：ホバー：後 {
background-image ： url （ 'http://kirpich.example.com/imgs/luch/Sertolovo.jpg' ） ;
}
＃lnk6 ：フォーカス、＃lnk6 ：ホバー：後 {
background-image ： url （ 'http://kirpich.example.com/921-1_.jpg' ） ;
}
＃lnk7 ：フォーカス、＃lnk7 ：ホバー：後 {
background-image ： url （ 'http://kirpich.example.com/917-1.jpg' ） ;
}

残念なことに、ホバーは親に影響を与える可能性があり、要素の隣人にとっても、何も発明されていないようです。

それで、私たちは何をしましたか？

画像のサムネイルを「タッチ」すると、そのフルバージョンが表示され、サムネイルが透明になります。サムネイルに注目すると、.lnkはサムネイルで覆われ、大きな画像を表示します。

マウスはサムネイルからサムネイルに移動するだけです。
TabまたはShift + Tabを使用したキーボード（オペラ：Ctrl + UpまたはCtrl + Down）。

参照はhtmlbook.ruでした。

PS Internet Explorerは、この例の機能を完全にはサポートしていません。

PPSは、移行によりフェードプレビューをソフトにしました。

。 img {
/ * Firefox * /
-moz - transition - property ：不透明度;
-moz - transition - duration ： 2s ;

/ * WebKit * /
-webkit - transition - property ： opacity ;
-webkit - transition - duration ： 2s ;

/ * Opera * /
-o - transition - property ：不透明度;
-o-移行期間： 2秒。

/ *標準* /
遷移プロパティ：不透明度;
移行期間： 2秒。
}

NoScriptフォトアルバム

More articles: