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

2022/11/17

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.