Milkcocoaのドットをbox-shadowで作ってみようとした話


Milkcocoaのドットをbox-shadowで作ってみました。

Milkcocoaの実際のサンプルはこれ。

これは実際に色を変えたところのデータを送信・保存して、ほかのユーザからも見えるようにしたり、照明と連動させたりしています。
私の作ったやつは色を変えるだけでMilkcocoaとの通信はしていません。
(そしてFirefox対応していません。Chromeでご覧ください)

See the Pen dots color change by natsumi (@mayo31) on CodePen.18228

きっかけは、下記のツイートが流れてきたのを見て。

これを見て、たったひとつのdivで麻雀牌も描画できるCSSすごいの記事で紹介したbox-shadowの表現が自分の中で流行っているので、これでやってみたいなぁと思って作りました。

パフォーマンスとかはどうなんでしょうね。
ただCSSでこういうことできるぜっていうのをアッピールしたかっただけなんや…

同じく手前味噌な記事ですが、画像を使わずにcanvasで描画した日本地図SPAデモで紹介している不動産のサイトなんかは、Firefoxだとすっごく重くなるのでcanvas使うにしてもきっとjsをうまく書かないといけないんだろうなぁと。

box-shadowにしても、最近またFirefoxとChromeで解釈・描画が変わってしまってもうどうしたらいいんだかわかりません。
こういうのに対応し続けなければいけないWebの世界はやっぱり大変ですね。
業務アプリはその点は楽。

Milkcocoaのサンプルでは、divがババババッと並んでいて、さらにその中にdivが入っていて、それぞれのdivに同じclass名がババババッとついていて…ってこういうの私は苦手なんです。フレームワークで生成されたソースが嫌いなのと同じ理由。
SEOとか関係ないのわかってる。わかってるんだけど…中身のないdivが並んだり入れ子になっているのを見ると…(;´Д`)
そういう意味だと私の作ったやつも空divだから嫌なんだけど。
やっぱおとなしくcanvasにするべきなんだろうね~

もしこれをセマンティックにマークアップ!とか目指すなら、ulを使うかな。
liをずらずらーっと並べて、各ドットのカラーコードかなんかをテキストで入れておく。
そのテキストはfont-size:0;color:transparent;にでもしておく。

これならMilkcocoaみたいに各ドット個別でもイベントつけられるし、座標とる必要もないね。

さらに、style属性で上書きするんじゃなく、data-color=”ff0000″とかなんとかdata-カスタム属性使いたい。

とにかくhtmlから「見た目」の情報を排したいという思想。

スポンサードリンク

菜摘

Web制作がメインですがときどきフライヤーデザインやCDラベルなどDTP系もやってます。 デザイナーだったはずがhtml/cssコーディングに目覚めた。 黒い画面は相変わらず怖い。 javascriptはこのごろちょっと頑張ってるよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です