CSS覚え書き
1.画像の上に複数の画像を重ねる
2.重ねた画像の縁を半透明にする
3.画像の上に文字を入れる
※WordPress cocoonでは画像の下に160pxの空白が出た。
※正攻法で他のページに影響させないで「画像と切り離した文章との空白を埋める」のは相当な労力とストレスを覚悟しないと出来そうもない。
背景画像+4枚の画像+文字列×3を使用。
完成品はポスター風にしてみた。
今回のポイントはCSSではなく、犯人の目に印象が着くようにしたのと左(←重要)にハッピー右(←重要)に絶望の対比を置くことで左から右の時系列で見ると不安になるようにして安定感を崩しその先を読めなくしたところ。
犯人は大きく爆弾処理班をコンパクトにまとめるのはこの手の王道。
画像は元のサイズそのままを使用(CSSで縮小表示)。
完成品の下の方(160px下)に使用した画像を並べておく。
画像の作成はChat GPT
1.画像の上に複数の画像を重ねる
2.重ねた画像の縁を半透明にする
3.画像の上に文字を入れる
※WordPress cocoonでは画像の下に160pxの空白が出た。
※正攻法で他のページに影響させないで「画像と切り離した文章との空白を埋める」のは相当な労力とストレスを覚悟しないと出来そうもない。
背景画像+4枚の画像+文字列×3を使用。
完成品はポスター風にしてみた。
今回のポイントはCSSではなく、犯人の目に印象が着くようにしたのと左(←重要)にハッピー右(←重要)に絶望の対比を置くことで左から右の時系列で見ると不安になるようにして安定感を崩しその先を読めなくしたところ。
犯人は大きく爆弾処理班をコンパクトにまとめるのはこの手の王道。
画像は元のサイズそのままを使用(CSSで縮小表示)。
完成品の下の方(160px下)に使用した画像を並べておく。
画像の作成はChat GPT
Mad Bomber
VS
Bomb Squad








