生活情報オンライン

ソフトウェアエンジニアが役立つ情報を発信します。

HTML5/CSS3 グラデーションのかけかた

f:id:somegoro:20170917034729j:plain

HTML5/CSS3でグラデーション

写真は「横浜赤レンガ倉庫」です。赤と橙の美しいグラデーションですね。


今回の記事ではグラデーションのかけかたをご紹介します。
グラデーションをかけることによって、より立体的に・より美しいWebサイトになることでしょう。


実際のHTMLではこのようなります。



上記のソースコードです。iPhoneMacのような、どこかAppleな雰囲気のグラデーションにしてみました。どうぞコピーして使ってください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.gradient_div {
  background: linear-gradient(#DBDDDE, #898C90);
  width: 200px;
  height: 200px;
}
</style>
</head>
<body>
  <div class="gradient_div">
  </div>
</body>
</html>

以上、「HTML5/CSS3 グラデーションのかけかた」についての記事でした。