ホーム / HTML /

ゴールデンウィークなのでHTML・CSSで金色を表現してみた

2022年5月4日水曜日

HTML

ステップ1.単色で金色を再現

よくクーピーや色鉛筆なので金色を見かけることがありますが、正直単色では金色ということができません。
どちらかといえば、黄土色なのではないでしょうか。
これが実行図なのですが、んーー...金色って感じしませんね。
一応コードを載せておきます
<!DOCTYPE html>
<html>
<head>
	<title>ゴールデンウイーク</title>
</head>
<body>
	<h1>ゴールデンウィーク！</h1>
</body>
<style type="text/css">
	body{
		background-color: #CAA846;	}
</style>

ステップ2.グラデーションでやってみる！

んー－－－
素人がやると、グラデーション使っても、全然それっぽくなりませんね...
ということでぐぐってみます

ステップ3.これが本物の「ゴールド」！

参考サイト：
CSSで色を限りなくゴールドやシルバーに近づける 
<!DOCTYPE html>
<html>
<head>
	<title>ゴールデンウイーク</title>
</head>
<body>
	<h1>ゴールデンウィーク！</h1>
</body>
<style type="text/css">
	body { background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%); }
	html {
	min-height: 100%;
}
</style>

ということで、残りのゴールデンウィークを満喫してください( ´∀｀ )

ページ

▼

QooQ