CSS3のアニメーションで躍動する新着（NEW）ボタン作った！

もっと新着記事を目立たせてくだせい！とお客様が仰るので、「新着のお知らせ」を目立たせるのに新着（NEW）ボタンをCSS3のanimationで作った！

CSS3のアニメーションって1回作ったら結構簡単

なんだかCSS3のアニメーションって難しそうなイメージがあったので手を出さなかったのですが、いやー一回作ってみたら意外に簡単だった。次回作るサイトは各所が動き回るアニメーションだらけのサイトになりそうだ（笑）

で、作ったアイコンがこれ。

See the Pen EaJBry by yogawa (@yogawa) on CodePen.

どうです、目立つでしょう？

これをWordPressのループの中に突っ込んで、記事を公開後◯日間表示させるようにしておけば良さげ。記事を公開後、一定期間「NEW」アイコンを表示させる方法はNxWorld様の記事が非常に分かりやすいです。

[amazonjs asin="4798132195" locale="JP" title="CSS3逆引きデザインレシピ"]

今回このアイコンを作るのに参考にしたのはこの本。著者はサーバーエージェントでフロントエンドやサーバサイドをやられているようで、CSS3を使った小技がてんこ盛りの本。てか、非常にデカい本です（笑）

もうちょいこの本を頼りにいろいろCSS3の小技を取り入れていこ〜。