CSS3のアニメーションで躍動する新着(NEW)ボタン作った!

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

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

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

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

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

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

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

20150412

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

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