2017月11月27日

ネタには困らない!Codevemberでアウトプットに集中しよう

Codevember に参加しよう

去る11月(November)は、 Codevember 月間でした。
日本では全く盛り上がっていないので、微力ながら紹介しようと思います。

Codevemberとは、 デベロッパー向けに毎日1テーマ、全30テーマを指定してCodePen作品を募る イベントです。
2016年に始まり、まだ2年目のようなので、知名度はほとんど無いかもしれません(笑)。

11月はもう過ぎてしまいましたが、今年度の作品は 今でも投稿され続けている ので、まだまだ便乗できます。
特に期限もなく、最初から順番通りにマッタリ進めるもよし、好きなテーマだけをピックアップして取り組むもよし。

僕自身もカレンダー通りにはアウトプットできていませんが、投稿した作品の一部を以下に紹介します。

#1 Galaxy

テーマ「宇宙」。
スーパーファミコンの名作 STARFOX より、主人公Foxが乗り込む宇宙戦闘機 A-Wing を再現しました。
以前、CSS3Dの記事で「CSSでモデリングするはやめた方がいい」と言っておきながら、やってしまいました。
三角形ポリゴンは、 border ではなく clip-path で描画しています。

See the Pen Only CSS: Codevember #1 STARFOX by Yusuke Nakaya (@YusukeNakaya) on CodePen.

#2 Cake

テーマ「ケーキ」。
甘いものを欲していたので、 ケーキを無限増殖 するループアニメーションを作りました。
時々、美味しくなさそうな色合いのケーキが出てきます。
誰かForkして寿司バージョン作って欲しいです。

See the Pen Only CSS: Codevember #2 Cake by Yusuke Nakaya (@YusukeNakaya) on CodePen.

#3 Tree

テーマ「木」。
ただの 踊るキモい木 を作りました。
CSSでもボーン(関節)制御が可能です。

See the Pen Only CSS: Codevember #3 Dancing Tree by Yusuke Nakaya (@YusukeNakaya) on CodePen.

#4 Sapphire

テーマ「サファイア」。
宝石のカットが放つ 光の反射による魅惑的なキラめき を目指して作りました。
アニメーションするグラデーション、 clip-pathmix-blend-mode: color-dodge; を使い、うまくキラキラできました。

See the Pen Only CSS: Codevember #4 Sapphire by Yusuke Nakaya (@YusukeNakaya) on CodePen.

#5 Sword

テーマ「剣」。
剣といえば ライトセイバー がパッと思いついたので、パッと作りました。
振り回した時の残像感は box-shadow で擬似的に再現しています。

See the Pen Only CSS: Codevember #5 Lightsaber by Yusuke Nakaya (@YusukeNakaya) on CodePen.

#6 Storm

テーマ「嵐」。
お金が嵐のように降ってきたら 、掌を太陽にかざして、高笑いしたい。
1万円札のグラフィックを使うと多方面から怒られそうなので、妄想で補完してください。

See the Pen Only CSS: Codevember #6 Money Storm by Yusuke Nakaya (@YusukeNakaya) on CodePen.

Try now!

紹介した作品はCSS作品のみですが、Codevemberは技術を指定していません。
WebGLでもシェーダーでも、なんなら平面デザインでも、 Codevemberはテーマを提供しているだけ なので、得意なスキルで腕試ししてみましょう。

登録などは不要です。
どのテーマも端的で取り組みやすく、ネタ切れしてもアウトプットに集中できますよ。

Codevember テーマカレンダー & 作品集
http://codevember.xyz

ネタは、あります!
あとは、やるだけ!

CODEPENで色々サンプル公開中

CODEPEN
https://codepen.io/YusukeNakaya/
よかったらフォローしてください!

RELATED POSTS