【OWCプロンプトテクニック】CSSを使ったWebサイトの装飾アイデアを考える

はじめに

ChatGPT を使って指定したデザインになるCSSを出力させるプロンプトです。

できること

CSSのアイデアを出しことができます。
何回か試行をして、否定をしたり、追加の会話をしたりして、条件を徐々に限定します。

プロンプト

ここから実際のプロンプトです。

▼以下をコピペ

CSSの linear-gradient と、CSSのアニメーション効果を組み合わせて、DIV要素を書きます。
背景は、#779CE5と#3D4F66のグラデーションで、時間的になめらかに色の勾配を変化させます。
先進的でかっこよく洗練されたイメージで、ループはせず、最終的には #779CE5 の色をメインに使ってください。
HTML、CSSのコードは?

▼回答例

以下がHTMLとCSSのコードになります。

HTML:

<div class="gradient"></div>

CSS:

.gradient {
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom, #779CE5, #3D4F66);
  animation: gradient-animation 5s ease-in-out forwards;
}

@keyframes gradient-animation {
  0% {
    background: linear-gradient(to bottom, #779CE5, #3D4F66);
  }
  50% {
    background: linear-gradient(to bottom, #3D4F66, #779CE5);
  }
  100% {
    background: #779CE5;
  }
}