要素にそれっぽい影をつける
XDのデフォルトの値でデザイナーがこのままの値を使う
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
flexの横並びスクロール
スクロールバー非表示と、末尾に余白用の擬似要素を追加するのがポイント
ul {
display: flex;
flex: 1;
overflow-x: scroll;
white-space: nowrap;
&::-webkit-scrollbar {
display: none;
}
li {
margin-left: 8px;
display: inline-block;
&:first-of-type {
margin-left: 16px;
}
&:last-of-type {
position: relative;
&::after {
position: absolute;
top: 0;
left: 100%;
width: 16px;
height: 1px;
content: '';
}
}
}
}
↧