CSS3で表現できるようになった「角丸(border-radius)」「影(box-shadow)」「線形グラデーション(linear-gradient)」の利用例です。
目次
border-radius｜カドマル
border-radius では、 border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius をまとめて指定できます。
.boxA{
width: 200px;
height: 50px;
border: solid 1px #ccc;
text-align: center;
border-radius: 5px;
}.boxB{
width: 200px;
height: 200px;
border: solid 1px #ccc;
text-align: center;
border-radius: 50%;
}See the Pen border-radius by waku-waku (@raku-raku) on CodePen.
box-shadow｜ボックスの影
.boxC{
width:200px;
height:50px;
border:solid 1px #ccc;
text-align: center;
/* offset-x | offset-y | blur-radius | color */
box-shadow:0px 3px 2px #ccc;
}.boxD{
width:200px;
height:50px;
border:solid 1px #ccc;
text-align: center;
/* offset-x | offset-y | blur-radius | color */
box-shadow:3px 0px 2px #ccc;
}.boxE{
width:200px;
height:50px;
border:solid 1px #ccc;
text-align: center;
/* offset-x | offset-y | blur-radius | color */
box-shadow:2px 2px 6px #ccc;
}.boxF{
width:200px;
height:50px;
border:solid 1px #ccc;
text-align: center;
/* 内側に影を描写 | offset-x | offset-y | blur-radius | color */
box-shadow:inset 0px 1px 2px #ccc;
}See the Pen box-shadow by waku-waku (@raku-raku) on CodePen.
| 項目 | 説明 | 補足 |
|---|---|---|
| offset-x | 水平方向の距離 | 負の値だと影は左方向に延びる |
| offset-y | 垂直方向の距離 | 負の値だと影は上方向に延びる |
| blur-radius | ぼかし |
linear-gradient｜線形グラデーション
linear-gradient は、2つ以上の色を指定して色の変化を表現できます。
.boxG{
width:200px;
height:50px;
text-align: center;
border:solid 1px #ccc;
background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.1));
}.boxH{
width:200px;
height:50px;
text-align: center;
border:solid 1px #ccc;
background-color: #C9E8F1;
background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.1));
}See the Pen gradient by waku-waku (@raku-raku) on CodePen.
opacity｜透明
.boxI{
width:200px;
height:50px;
text-align: center;
border:solid 1px #ccc;
background-color: #C9E8F1;
}
.boxI:hover{
opacity:0.7;
}See the Pen opacity by waku-waku (@raku-raku) on CodePen.
