定番
新着
履歴

CSS3 グラデーションのサンプル

共通コード
以下のサンプルは共通のコードがあります。
サンプル
コード
縦方向
サンプル
コード
横方向
© 2024 kipure
Top


<style>
.demo.gra1{
	background: linear-gradient(#FFF , #3636c3);
	background: -moz-linear-gradient(#FFF , #3636c3);
	background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#3636c3)); 
}
</style>


<div class="c">
<div class="t">縦方向</div>
<div class="demo gra1"></div>
</div>


<style>
.demo.gra2{
	background: linear-gradient(to left, #FF0000 0%, #ffffff 100%);
	background: -moz-linear-gradient(left, #ff0000, rgba(255,0,0,0));
	background: -webkit-gradient(linear, left top, right top, from(#ff0000), to(rgba(255,0,0,0)));
}
</style>



<div class="c">
<div class="t">横方向</div>
<div class="demo gra2"></div>
</div>


<style>
.demo {
	width: 100px;
	height: 100px;
	margin: 10px;
}

</style>