UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【CSS】おしゃれなイメージギャラリー

CSS

ツイッターで見つけたおしゃれなイメージギャラリーの作り方が気になったのでメモ

また、使ったことがなかったCSSを調べる

place-items

place-items - CSS: カスケーディングスタイルシート | MDN

place-itemsはグリッドやフレックスボックスなどのレイアウトシステムにおいて、一度にalign-items および justify-items プロパティを指定することができるプロパティ

filter

filter - CSS: カスケーディングスタイルシート | MDN

画像、背景、境界の描画をぼかしたり、色を変化させたりなどのグラフィック効果を要素に適用にするプロパティ

:root

:root - CSS: カスケーディングスタイルシート | MDN

CSSの擬似セレクターで文書を表すツリーのルート要素を表す

HTML では :root は <html> 要素を表し、詳細度が高いことを除けば html セレクターと同等

実装してみたもの

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   * {
     box-sizing: border-box;
   }

   body {
     display: grid;
     place-items: center;
     min-height: 100vh;
     background: var(--gradient-9);
   }

   :root {
     --magnifier: 6;
     --gap: 1vmin;
     --transition: 0.5s;
   }
   .container {
     width: 80vw;
     height: 50vmin;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: var(--gap);
   }
   img {
     --brightness: 0.75;
     --grayscale: 1;
     transition: flex var(--transition), filter var(--transition);
     height: 100%;
     filter: grayscale(var(--grayscale)) brightness(var(--brightness));
     object-fit: cover;
     overflow: hidden;
     flex: 1;
   }

   img:hover {
     --brightness: 1.15;
     --grayscale: 0;
     flex: var(--magnifier);
   }
  </style>
</head>
<body>
  <div class="container">
    <img src="https://source.unsplash.com/random/600x600?bear,seed=100">
    <img src="https://source.unsplash.com/random/600x600?bear,seed=200">
    <img src="https://source.unsplash.com/random/600x600?bear,seed=300">
    <img src="https://source.unsplash.com/random/600x600?bear,seed=400">
    <img src="https://source.unsplash.com/random/600x600?bear,seed=500">
  </div>
</body>
</html>

おしゃれな画像がランダムででてくるサイトも初めて知った

unsplash.com

サンプルつくるときとか今後利用してみる