WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

CSSでグラデーションの練習

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSSでグラデーションの練習</title>
<style>
.box {
  width: 300px;
  height: 100px;
  margin: 10px;
}
.one {
  background: -webkit-linear-gradient(left, red, blue 50%, green 100%);
  background: linear-gradient(to right, red, blue 50%, green 100%);
}
.two {
  background: -webkit-linear-gradient(315deg, red, blue 50%, green 100%);
  background: linear-gradient(135deg, red, blue 50%, green 100%);
}
.three {
  background: linear-gradient(to bottom,rgba(204,0,0,0.5),rgba(66,0,183,0.5));
}
.four {
  background: -webkit-radial-gradient(center, #ff0000 0%, #0000ff 100%);
  background: radial-gradient(#ff0000 0, #000ff 100%);
}

.five{
	-webkit-box-shadow: inset 0 0 7px rgba(255,255,255,.4);
	-moz-box-shadow: inset 0 0 7px rgba(255,255,255,.4);
	box-shadow: inset 0 0 7px rgba(255,255,255,.4);
	border: solid 1px #ae037b;
	background-image: -webkit-linear-gradient(bottom, #db34a4, #a80077 49%, #c146a1 49%, #c141a4);
	background-image: -moz-linear-gradient(bottom, #db34a4, #a80077 49%, #c146a1 49%, #c141a4);
	background-image: -o-linear-gradient(bottom, #db34a4, #a80077 49%, #c146a1 49%, #c141a4);
	background-image: -ms-linear-gradient(bottom, #db34a4, #a80077 49%, #c146a1 49%, #c141a4);
	background-image: linear-gradient(to top, #db34a4, #a80077 49%, #c146a1 49%, #c141a4);
	width: 328px;
	height: 52px;
}
.five p a {
width: 328px;
height: 52px;
  text-align: center;
  display:block;
  color: #FFF;
  text-decoration:none;

}
</style>
</head>
<body>
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
<div class="five"><p><a href="#">TOP</a></p></div>
</body>
</html>