Open1
逆引き: CSS
グラデーション
html
<!-- グラデーションコンテナ -->
<div class="app-gradient-container">
<img src="..." alt="" />
<!-- グラデーション -->
<div class="app-gradient-top"></div>
<div class="app-gradient-left"></div>
</div>
scss
// グラデーション
.app-gradient-container {
position : relative;
$SHADOW-SIZE: 50px;
$SHADOW-BGCOLOR: #fff;
// グラデーション: 上部
.app-gradient-top {
content : "";
position: absolute;
top : 0;
left : 0;
width : 100%;
height : $SHADOW-SIZE;
background: linear-gradient(180deg,
rgba($SHADOW-BGCOLOR, 1),
rgba($SHADOW-BGCOLOR, 0)
);
}
// グラデーション: 左部
.app-gradient-left {
content : "";
position: absolute;
top : 0;
left : 0;
width : $SHADOW-SIZE;
height : 100%;
background: linear-gradient(90deg,
rgba($SHADOW-BGCOLOR, 1),
rgba($SHADOW-BGCOLOR, 0)
);
}
}