角丸, 影, 線形グラデーションの利用例

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.