絶対に見て欲しい!CSS3をつかったステキなコードサンプル6選【NIJILOGセレクション】


NIJILOGがネットで見つけた素晴らしいコードを紹介する【NIJILOGセレクション】
思わず人に紹介したくなるほどのクオリティの作品ばかりですので是非コードも合わせてみてくださいね。

※タイマーをつかっている作品などはデモがうまく動かないことがあります。デモ内右下をマウスオーバーしてRERUNを押すか、直接プレイグラウンドで見てみてください。

ウルトラクールな署名付き推薦文スタイル

左下のREPLAYの上にカーソルを持っていくとカッコイイ署名がサラサラっと流れます。
流れる署名はコマ撮り形式で画像を分割して順番に表示して、アニメのように再生されます。
これをCSSだけで作っているのが凄いですね。

See the Pen Signature animation by Damian Drygiel (@drygiel) on CodePen.

インパクト大のプロフィール欄がつくれそうなスライドスタイル

画像を上手につかったデザインでセンスがあふれています。
スライドが派手に動かないのでデザインの邪魔になっていません。
これでプロフィール欄をつくったらカッコイイですね。

See the Pen Einstien Quotes by Barbara Laird (@bhlaird) on CodePen.

CSSの animate を上手に使ったオモシロいロゴ

パーツがバラバラになったり、くっついたりを繰り返す、変わったロゴイメージ。
スクリプトなしの animate だけで実装されています。

See the Pen Breathing Giphy Logo by Michael Lee (@michaellee) on CodePen.

プルプルふるえる可愛い時計

csshake というモジュールをつかっているので動きが可愛いです。
時計の実装方法はオーソドックスなスクリプトなので、カウントダウンタイマーなんかに応用できそうです。

See the Pen Shake Clock by Andreas Gillström (@hynden) on CodePen.

大量のシンプルなフラットデザインボタン

スクウェア、角丸、ラウンド、アイコン付きのフラットデザインボタン。
こういうシンプルなボタンはどんなデザインでも柔軟につかえるので重宝しそうです。
CSSオンリーなところもさらに良し。

See the Pen Flat Buttons by An1l Bilir (@Qanser) on CodePen.

地味だけど凄いCSSオンリーのアイコン

マウスオーバーで矢印が上に流れるアイコンに変形します。
画像なしで出来ていてビックリ。
「トップへ戻る」のナビゲーションに使うとクールですね。

See the Pen Up Arrow by Mark Thomes (@WithAnEs) on CodePen.