Codevember に参加しよう
去る11月(November)は、 Codevember 月間でした。
日本では全く盛り上がっていないので、微力ながら紹介しようと思います。
Codevemberとは、 デベロッパー向けに毎日1テーマ、全30テーマを指定してCodePen作品を募る イベントです。
2016年に始まり、まだ2年目のようなので、知名度はほとんど無いかもしれません(笑)。
11月はもう過ぎてしまいましたが、今年度の作品は 今でも投稿され続けている ので、まだまだ便乗できます。
特に期限もなく、最初から順番通りにマッタリ進めるもよし、好きなテーマだけをピックアップして取り組むもよし。
- Codevember テーマカレンダー ＆ 作品集
http://codevember.xyz - Codevember 公式twitterアカウント
https://twitter.com/codevember_
僕自身もカレンダー通りにはアウトプットできていませんが、投稿した作品の一部を以下に紹介します。
#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-path 、 mix-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/
よかったらフォローしてください！