Dive #26: 行方不明、不信感、水深 -5m、揺れる気持ち、そして
使用したAI
その他
コンテンツ:
https://mitsugu.github.io/likebar/202507/08.html#2025070801
内容:
和歌山県古座町 上瀬・内の根 ダイビング・ログ (フィクションです)
画像は 1 枚目がコンテンツ内で使用したもので 2 枚目がオリジナルの画像になります。
プロンプトは Gemini 2.5 Flash で生成しているためありません。
サイトで使っている画像が、まるでオリジナルの画像をさらに加工した別の画像に見えますが違います。
Web ではオリジナルの画像を使っていて CSS で、レンズフレアを追加しています。ソースは以下のようになっています。
--- html
<figure>
<div class="lens-flare">
<img width="512" height="512" src="fig2025070801.png">
</div>
<figcaption>
</figcaption>
</figure>
---
--- css
.lens-flare {
position: relative;
display: inline-block;
}
.lens-flare::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
pointer-events: none;
mix-blend-mode: screen;
}
---
CSS のグラデーションのパラメータは適宜変更してください。
1 枚目の少しレンズフレアっぽい効果が加わってる画像は、div 要素ごとスクリーンショットを撮ったものです。
生成エンジン:
Gemini 2.5 Flash (Imagen 4)
https://mitsugu.github.io/likebar/202507/08.html#2025070801
内容:
和歌山県古座町 上瀬・内の根 ダイビング・ログ (フィクションです)
画像は 1 枚目がコンテンツ内で使用したもので 2 枚目がオリジナルの画像になります。
プロンプトは Gemini 2.5 Flash で生成しているためありません。
サイトで使っている画像が、まるでオリジナルの画像をさらに加工した別の画像に見えますが違います。
Web ではオリジナルの画像を使っていて CSS で、レンズフレアを追加しています。ソースは以下のようになっています。
--- html
<figure>
<div class="lens-flare">
<img width="512" height="512" src="fig2025070801.png">
</div>
<figcaption>
</figcaption>
</figure>
---
--- css
.lens-flare {
position: relative;
display: inline-block;
}
.lens-flare::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
pointer-events: none;
mix-blend-mode: screen;
}
---
CSS のグラデーションのパラメータは適宜変更してください。
1 枚目の少しレンズフレアっぽい効果が加わってる画像は、div 要素ごとスクリーンショットを撮ったものです。
生成エンジン:
Gemini 2.5 Flash (Imagen 4)
呪文
入力なし
