ハロウィンかぼちゃ
Pocket

CSS Trick or TreatというハロウィンパーティをしながらCSSの話をする会に参加してきました。

当日はお菓子を持っていくか、CSSのトリックを持っていかないと変態的なことしちゃうぞ♡というハロウィンパーティです。

当日のTwitterハッシュタグはこちら

#csstrickortreat

軽く飲んだ後にCSSのトリックを持ってきた人たちの発表があり、後半は文房具の話になったり、歯周病の話になったりと、とても充実した会でした。

ぼくは「おばけプロパティ」というものをたまたま見つけたので紹介してきました。

おばけプロパティとは

おばけプロパティはその名前のとおり「おばけ」と指定するプロパティです。HTMLで空のdivなどを用意し、以下のように指定すると使えます。

値で指定したおばけのイラストが表示されます。

div {
  おばけ: かぼちゃおばけ;
}

何を言ってるか分からないと思うので、当日にやったデモをgif動画にしました。

おばけプロパティ

見ての通り、「かぼちゃおばけ」とか「ドラキュラ」、「フランケンシュタイン」などの値があります。

タネ明かし

当然ですが、本当にこんなプロパティがある訳ではありませんww

ちゃんとタネはあります。当日使ったスライドの15ページ。

タネはただ単にPostCSSのプラグインを作って、それで変換していただけです。(にしても、黒背景にPostCSSのロゴはハロウィンに合う)

ちょっとしたPostCSSのプラグインであれば、簡単に作ることができます。

一応GitHubで公開はしてるんですが、先ほどのかぼちゃおばけやドラキュラのイラストは入れてないです。

postcss-halloween

フリーのイラスト素材が著作権明記なしで自由につかえるものの、だいたい再配布は禁止されていて、GitHubで公開したらそこに抵触するだろうなという理由からです。今はとりあえずMITで公開されているSVGのアイコンにしてます。

イラレ使えるようにすればいいんですが、お財布と相談していて悩ましいところ(このプラグインのために使った後は、ほぼイラレ使わなさそうで踏み出せない)

ってことで、イラスト描ける方、プルリクおねがいしゃす!(デモにあるようなシルエットイラストでおねしゃす!)

再配布可能なイラスト

そういえば、再配布OKなイラストがありました。

wapuu

つくりました

postcss-wapuu

GPLで公開しております。

わぷーの種類がもうたくさんありすぎて全部は無理だと思い、ノーマルわぷーと個人的に好きなやつだけにしてます。(ちょいちょい増やすかも)

Pocket