Result
ちょっとコミック風の、枠線ありのポップなbox-shadowを単一要素で作る、というもの。ポップなコンテンツのカードUIなんかに使えそうですね。
新しいCSS要素を使う的な話ではないです。個人的に思いつかなかったので備忘録。
css
.card { height : 300px ; width : 200px ; border : 4px solid black ; border-radius : 8px ; box-shadow : 14px 14px 0 -4px gold, 14px 14px 0 0 black ; position : relative ; background : white ; transform-style : preserve -3 d; } |
結論としてbox-shadowだけで事足りたようですが自分なら疑似要素でやろうとするかも。
html
< div class = "card" >てすと</ div > |
以下で試行錯誤の末、完成されたコードの解説がありますのでチェックなさってみてください。