2015.01.07タグ:

CODEPENで見つけたスタイリッシュすぎるCSSエフェクトをご紹介。

hamaken
Hamamoto Kensaku
会社員ブロガーです。スタートアップやマーケティング、個人的に面白いなと思った動画をアップしていきます。
最近は越境ECの仕事をがっつりやってます。



こんにちわ、ハマケンです。
最近海外のデザインサイトやブログなどをちょこちょこ回っています。
その中で何個かのブログなどでCODEPENの紹介があって、よくシェアされていたエフェクトを8個ほどご紹介します。
どれもクオリティも高くカッコ良いので使ってみては如何でしょうか。

CodePen


Advertisement



CODEPENって何?

CODEPENは、ソースコード、CSS、JSなどを公開・シェアできるサイト。
日本で言うとjsdo.itに近いですね。ライブプレビューが表示されているので、フロントエンド周りの動作確認にも使えます。
シェアも簡単にできるので、デザイナーさんとかにはかなり重宝するし、ノンデザイナーの人も便利ですね。

横長のアコーディオンメニュー


Pure CSS Horizontal Accordion

フラットデザインアイコン


Pure CSS Iconex Flat Icon Set

NEXUS4のフラットデバイス


Nexus 4 Pure CSS

Parallaxな感じ


Pure CSS Parallax Scrolling

CSS3でのチェックボックス


CSS3 Checkbox Styles

本めっちゃスムーズにめくれる。実際は動いてます。


CSS 3D Bending Effect – Page Flip

見てて飽きない。実際は動いてます。


CosmiCZ

写真にテープをペタッとな。


Scotch tape css effect

便利だから使っちゃおう。

如何でしたか?
本当にノンデザイナーでも簡単に実装出来たり、楽しめる世の中になってきましたね。
公開・シェアしていただいているデザイナーや技術者の方々に感謝申し上げます。

と言う訳でCODEPENよりのご紹介でしたー。
それでは。




[ あわせて読みたい ]

この記事はいかがでしたか?







Advertisement