CSSだけで出来た2Dで3Dな飛び出すメニュー 3D Menu
こういうタイプのメニューは初めて見ました、CSSだけで作成されていて CSSの3D昨日を活かして、元は2Dなメニューを3Dにした感じのメニューです
hoverすると、くねくねっとする3Dメニュー CSS3 Funny Menu
マウスオーバーすると、メニューがくねくねと少しねじれていく立体的なメニューです
画像では無い CSSで作られたストライプ柄の背景パターン Gnome Backgrouud
CSSのみで作られたストライプがらの背景を実装するコード。画像よりもててもファイルサイズが小さくなりコピペだけで利用可能
画像が折りたたまれて移り変わっていく画像スライド Folding pictures
画像が次へと移り変わるときのエフェクトとして、画像が折りたたまれていく様子を使ったアニメーションです このままではちょっと荒削り感がありますが、アニメーションの速度を抑えて画像に文字とか入れてバナーにしたものを彩りとして設置するのも有りじゃないかと思います
ラジオボタンを使ったCSSでデザインされたボタン Radio Button
YESとNOで表示のデザインが切り替わるラジオボタンのデザインです YESの時にはチェックマーク、NOの時にはペケマークにアニメーションで変化します
すっごくクリック感(押した感じ)がするCSSボタンデザイン Pure CSS Push Buttons
CSSだけで作られたボタンです 特徴はクリックした時の、クリック感が良い 心地いい
アプリっぽい動きの天候を表示するウィジェットのデザイン アイディア Weather Widget
マウスオーバーするとヌルっと動くのが気持ちいいです、デザインもシンプルながらいい感じに出来上がっています。 温度によって背景色が変化するような仕組みになっています
AngularJSというライブラリを使ったタイプライターの入力のように文字を表示するデモ AngularJS ‘Typewriter’ Directive
AngularJSというのはｍjQueryみたいなjavascriptのコード入力を補助するようなものです、それを使ってタイプライターのように文字が入力されていくアニメーションを実装したデモです
カードがクルッと回転して裏面の項目がが表示される ログインフォーム Flipping login form
一見通常のログインフォームなのですが、restore password とうところをクリックするとクルッと回転して裏面にある入力フォームが現れる仕組みです、裏面のBackをクリックすると元のログインフォームに戻ります
カラオケボックスによくある、照明をダイアル,で調整するものをHTML上で再現した Dimmer Switch
カラオケボックスによく付いている光量を調整する照明のコントローラーを再現したものです。 ダイアルの部分でクリックしたまま回すと光量が変化します、少し操作が難しいですが とても面白いギミックです。
マウスオーバーで画像が折りたたまれるアクション Folding Effect on Hover
画像の部分をマウスオーバーすると、画像がクシャッと折りたたまれるアニメーションのアイディアです。 画像自体は分割されていません、1つの画像を背景として4回呼び出して4つのブロックがそれぞれ変形することで表現されています
Box-shadowのinsetを応用した 目隠しアクション Inset box-shadow play
box-shadowsの影を外側ではなく内側にするinsetでbox内を目隠しして、マウスオーバーで中身が見えるようにするアイディア集です。
まとまりのあるSNSボタンバーのデザイン
Facebook、Google+、Twitter、Linkedin、VK、Pinterest、Surfingbirdのアイコンボタンが揃っています。日本で馴染みがあるものが少ないですが、シンプルなので大体ブログデザインにも合うかと思います。
見て目が不揃いなSNSのボタンをカバーを付けて切れに見せるための9つのアイディア
SNSのボタンをアイコン等でかくして、マウスオーバーされた時にSNSのボタンを表示するアイディア集です
プロフィールの画像に使える、SNSアイコンが滑りこんでくるアイディア Hexagonal Team Member
六角形に表示された画像の部分にマウスポインタを乗せると、4つの方向からSNS等のアイコンが滑りこんでくるアイディアです、
入力フォームの入力欄を飾るアニメーション Animated input labels
入力欄にフォーカスすると、ラベル部分がアニメーションしてデザインが変わるものです 入力が必須のところで入力が無いと赤色の表示のエラーを示すようになっていています入力内容も判別しているようです
シンプルでフラットなデザインのツイートカウンターボタン Twitter Button (Tweet)
シンプルでフラットデザインのツイートカウンターです、表示のはじめに数字がコロコロと変化して表示されます。 hoverすると鳥がパタパタと羽ばたきます
パステルカラーの付箋風のWEBデザインが魅力的 Sticky notes without images
背景は画像を利用しているものの、他はCSSでデザインされています。ブロックを付箋で表現したデザインがとてもいいですね。新着記事一覧等にこれを利用するのも有りかと思います
ポップでかわいい テキストベースのローディングアニメーション
カラフルでポップなデザインのローディングアニメーションです #containerLoaderのところを調整すれば、コピペで使えますね
床屋さんに有るクルクル回るアレが CSSだけで作られたアニメーション Barbershop Loader
床屋さん、理容室美容室にある外においてあってクルクル回るサインポールってやつです それがCSSのアニメーションで表現されたものです。
