ChatGPTとは
使い方のガイド
文例・例文のサンプル
ChatGPTについて教えて
始め方(はじめかた)、書き方
プロンプトのテンプレート

AIへの会話指示文/プロンプト

image

Web制作でCSSを考えてもらう

20     6945   𝕏 シェア


基本的な使い方

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; } }`


 
テーマ デザイン・Web制作
タスク コーディングアイデア・ブレスト
タグ #コーディング
動作環境の例 OpenAI ChatGPT 3.5~
投稿・編集日 2023/04/01・2023/04/01
提案者 まめたろう
出典・参考 なし
留意事項 他の「プロンプト集」へ収載する場合は、出典として本サイトのURLを明示してください



お気に入り機能は登録不要で使えます
※このブラウザ内にのみ保存されます



ご提案を受付ています

サイトの拡充・改善に取り組んでいます。
感想やリクエストなどお気軽にどうぞ
ご提案フォームを開く