HTML HTML5 HTMLタグ スマートフォン |
CSS CSSプロパティ CSS・HTML便利ツール |
HTML色見本 配色組み合わせツール 特殊文字 |
JAVA Android |
PHP Smarty修飾子 EXCEL |
▼生成したグラデーション
CSSコード
.gra {
/*グラデーションの設定*/
background: -webkit-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #f1f1f1 51%, #dfdfdf 99%, #cccccc 100%);
background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #f1f1f1 51%, #dfdfdf 99%, #cccccc 100%);
background: -o-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #f1f1f1 51%, #dfdfdf 99%, #cccccc 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #f1f1f1 51%, #dfdfdf 99%, #cccccc 100%);
background: linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #f1f1f1 51%, #dfdfdf 99%, #cccccc 100%);
}
.box{
/*ボックスの設定*/
width:300px;
height:50px;
padding:5px;
text-align:center;
border: 1px solid #dddddd ;
border-radius: 5px ;
box-shadow:1px 1px 2px 0px #101011 ;
}
HTMLコード
<div class="box gra">あいうえお</div>
▼以下を設定して下さい。