アイドルマスターCSS一発芸
どうも アドベントカレンダー芸人です。今23時58分です。オフ会してたらこんな時間です。
さて、今回はみなさんにアイドルマスターCSS一発芸を披露したいと思います。ではどうぞ。
CSSのlinear-gradient
のみでトラプリのロゴを構成しています。
$color1: rgb(80, 170, 165); $color2: rgb(102, 107, 162); $color3: rgb(103, 188, 223); /* 全体の背景色 */ body, body.app-body, .ui { background: linear-gradient(63.43deg, transparent 66.6%, white 66.6%) 0 0, linear-gradient(-63.43deg, transparent 66.6%, white 66.6%) 0 0, linear-gradient(63.43deg, transparent 64.6%, $color1 64.6%) 0 0, linear-gradient(-63.43deg, transparent 64.6%, $color2 64.6%) 0 0, linear-gradient(to bottom, transparent 98%, $color3 98%) 0 0, linear-gradient(to bottom, transparent 98%, white 98%) 0 -2px, linear-gradient(63.43deg, transparent 62.6%, white 62.6%) 0 0, linear-gradient(-63.43deg, transparent 62.6%, white 62.6%) 0 0, linear-gradient(63.43deg, transparent 60.6%, $color1 60.6%) 0 0, linear-gradient(-63.43deg, transparent 60.6%, $color2 60.6%) 0 0, linear-gradient(to bottom, transparent 98%, $color3 98%)0 -4px, linear-gradient(to bottom, transparent 98%, white 98%)0 -6px, linear-gradient(63.43deg, transparent 58.6%, white 58.6%) 0 0, linear-gradient(-63.43deg, transparent 58.6%, white 58.6%) 0 0, linear-gradient(63.43deg, transparent 56.6%, $color1 56.6%) 0 0, linear-gradient(-63.43deg, transparent 56.6%, $color2 56.6%) 0 0, linear-gradient(to bottom, transparent 98%, $color3 98%) 0 -8px ; // background-color: #36c; background-size: 30px 30px; }