写真の部分は色の面の画像（SVG）です。src をお使いの写真のURLに、alt を写真の説明に差し替えてください。枠のずれる量と向きは --cs-x --cs-y で変えられます（マイナスにすると逆向き）。
IMAGE
画像の見せ方・写真装飾のCSS素材
写真をおしゃれに見せる飾り方です。見本の写真は色の面にしてあります。<img> の src を差し替えて使ってください。
11種類
写真の部分は色の面の画像（SVG）です。src をお使いの写真のURLに、alt を写真の説明に差し替えてください。少し傾けて置き、マウスを乗せるとまっすぐになって持ち上がります。傾きは --cs-rot で変えられます。
写真の部分は色の面の画像（SVG）です。src をお使いの写真のURLに、alt を写真の説明に差し替えてください。切り抜く形は clip-path と border-radius で決めています。使いたい形のクラスだけ残してください。
写真の部分は色の面の画像（SVG）です。src をお使いの写真のURLに、alt を写真の説明に差し替えてください。枠の大きさは変えずに、中の写真だけがゆっくり大きくなります。カード全体がリンクになっていて、キーボードで選んだときも同じ動きをします。
写真の部分は色の面の画像（SVG）です。src をお使いの写真のURLに、alt を写真の説明に差し替えてください。ふだんは白黒で、マウスを乗せた1枚だけ色が付きます。スタッフ紹介や施工事例の一覧に。スマホ（マウスがない端末）では最初からカラーで表示します。
写真の部分は色の面の画像（SVG）です。src をお使いの写真のURLに、alt を写真の説明に差し替えてください。マウスを乗せると、写真の下から説明が出てきます。マウスがない端末（スマホ）では、最初から見出しだけ見えるようにしてあります。
写真の部分は色の面の画像（SVG）です。src をお使いの写真のURLに、alt を写真の説明に差し替えてください。大きい写真の右下に、小さい写真を白いふちで重ねます。「工事の前と後」や「外観と店内」の組み合わせに。
写真の部分は色の面の画像（SVG）です。src をお使いの写真のURLに、alt を写真の説明に差し替えてください。テープは半透明なので、下の写真が少し透けて見えます。ブログやお知らせ、手作り感のあるお店のページに。
写真の部分は色の面の画像（SVG）です。src をお使いの写真のURLに、alt を写真の説明に差し替えてください。columns で段組みにしているので、縦長・横長の写真を混ぜても隙間なく詰まります。並ぶ順番は「左の列を上から下、次に右の列」です。列の数は --cs-cols で変えられ、スマホでは2列になります。
写真の部分は色の面の画像（SVG）です。src をお使いの写真のURLに、alt を写真の説明に差し替えてください。写真の右端を斜めに切り、文章と組み合わせます。切る角度は --cs-cut（写真の幅に対する割合）で変えられます。スマホでは下の辺を斜めに切ります。
写真の部分は色の面の画像（SVG）です。src をお使いの写真のURLに、alt を写真の説明に差し替えてください。写真の4つの角に、カメラのファインダーのような線を付けます。マウスを乗せると、角の線が少し外へ広がります。