Template#045

海をイメージした、水中にいるような神秘的なテンプレートです。
トップページの上に上がっていく泡はCSS animation で遊び倒す - bubble –を参考に制作しました。

メニューの泡はマウスホバーでハイライト部分がくるんと回りますが、IE11ではここのぼかしがかかりません。
トップページに戻る際に上の方にあるタイトル部分まで戻りたくない場合は、Homeや戻るリンクをhref="index.html#index"としてみてください。
ギャラリーページ(gallery.html)のようにimgタグにclass="gallery"を指定すると、丸く切り取られマウスホバーでふわっと広がります。
解像度が820px以下になると、スマホ用の小さい背景画像に切り替わります。
背景画像を変える場合はこちらも忘れずに変更してください。
HTML内にコメントアウトで説明を書きましたので、カスタマイズの際は参考にしてみてくださいね。

画像は全てパブリックドメインのものを使用しています。
HTML5で制作してFlexboxでレイアウトしています。
レスポンシブに対応・Firefox、Edge、Safari、IE11で動作確認済みです。

2020年5月15日