clover.blue

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

苦労ポイント

  1. CSSでどうやってたくさんのマークを置きたいところに配置するか
  2. マークが逆さまになる部分をどうするか

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

またもう少し考えてシンプルにできて分かりやすくできたら、一つづつ説明する記事作ろうかなぁと思います。