HTMLとCSSだけでトランプを作る
- Data
- 2019/12/04
- Tag
HTMLとCSSだけでどうにかトランプを作れないかなーと思って。ちょっと無理やりなところはありますが作ってみました。(Chromeでしか動かないかと思います)
コード自体はpostcssでプラグインをバリバリ作って作っています。 結構前に作れてはいたのだけど、コードが少し複雑で見づらくなってしまったので、リファクタしてから記事にしようーと思っていて放置していました; リファクタまだできていないのだけど、せっかくなのでこの間Vueで少し書き直したところもあるので公開しちゃいました。
HTML
なるべくシンプルなHTMLで再現したかったのですが。たくさんのマークを書くのでなかなか難しかったです。。
<li class="card ♠ ♠_1 num_1">
<div class="animation-inner inner">
<div class="front"><i class="mark">♠</i></div>
<div class="back"></div>
</div>
</li>
CSS
苦労ポイント
- CSSでどうやってたくさんのマークを置きたいところに配置するか
- マークが逆さまになる部分をどうするか
2.の逆さま部分..どうやって作ろうって考えていたときに。-webkit-box-reflectを使えばできるのでは!? とひらめいたときは、すごいウキウキしました^^(ただこのせいで使えるブラウザは限られていますが;)
CSS3による要素を反射させる | CSS3逆引き | Webサイト制作支援 | ShanaBrian Website
Postcssで使っているプラグイン
- postcss-each
- postcss-each-variables
- postcss-extend
- postcss-for
- postcss-foreach
- postcss-preset-env
トランプのコンポーネント
ちょっと全部一つづつ説明するのが大変なので、今回Vueで作り直したコンポーネントを貼っておきます。
https://github.com/kamem/clover.blue2/blob/master/components/Card/Card.vue
またもう少し考えてシンプルにできて分かりやすくできたら、一つづつ説明する記事作ろうかなぁと思います。