【CSS】切り替えのアニメーションがクールなナビゲーション・メニュー
シングルページの構成で、ナビゲーションのアイコンをクリックすると。クールに切り替わるアニメーションがjavascriptを使わないCSSのみで作られたページデザイン、スムーズなアニメーションとクール
【CSS】背景の色が少しズレた印刷チックなボタンのデザイン
CSSのみで作られたボタン。印刷のズレ的なデザインのボタンでマウスオーバーすると、ズレの部分がアニメーションして戻るようになっている。コミック調のデザインのメニューボタン等に使うとしっくり来るのではと思います
CSSのみで作られた3Dに回転するかっこいいフリップギャラリー
CSSだけで作られた、マウスオーバーするとクルッと回転するエフェクトを実装できるコード。表と裏面に違った画像が設定できるギャラリースタイルとなっている
CSSのみで作れるグラデーションが変化するフラットデザインのボタン
CSSのみで作られたクールでフラットなボタンのデザイン。ボタンの縁にはCSSのグラデーションが使われており、またそのグラデーションがアニメーションで変化するようになっている
javascript Canvas で作られた3Dに回転する電光掲示板のようなデジタル時計
javascriptのCanvasで作られたクールなデジタル時計。3Dに回転し、触ると時計がさらに別軸で回転する機能が付いている。サイトのモニュメント的な存在に利用できそう
ページのスクロール位置に合わせて全体の進行状態をプログレスバーで表現するスクリプト
ページのスクロールの進行状態をプログレスバーで表現したスクリプト。jQueryを使って実装することができる。
ついついホバーしたくなるクールでかっこいい、10のHOVERエフェクト
10種のかっこいいホバーエフェクト。ついついホバーしたくなってしまうようなクールでかっこいいエフェクトになっている。
ボタンをホバーするとスペーシーでかっこいいマウスオーバーエフェクト
CANVASで作られたエフェクト。マウスオーバーすることで、ボタンにキラキラしたエフェクトが与えられる。ウェブサイトのアクセントにグッド！
CSSで作られた、かわいいデザインのボタン 10種
CSSでオシャレでかわいいボタンのデザイン。CSSだけで作られており画像は使われていない。ボタンにはそれぞれ背景の色があるのでその色を参考にしたデザインのウェブサイトにするといい感じに出来る
3Dに回転するスライドとSVGアニメーションがユニークなギャラリー
マルチスライドのユニークなウェブデザイン。またSVGのアニメーションが良い
番号付きのページネーションのボタンのレスポンシブなアイディア
レスポンシブなサイトの時に使える、レスポンシブなページネーションのアイディア。多段階に見せ方を変えつつ最適な表示にする
素晴らしい！HTML+CSS+jQueryで絵本のようにページをめくっていけるぜひ参考にしたいコード
絵本をHTMLとCSSとjQueryで作ったものです。ページのめくれ方や、そのあとのちょっとした動作が素晴らしいリアリティあるクオリティの高いものです。こういったものを作るときにはぜひ参考にしたいコードです。
canvasを使った、ブロックが降ってくるアニメーション効果と影効果
CANVASを使った効果。ブロックが降ってくるアニメーションとマウスの位置によってロングシャドウが動く効果。ヘッダー等の背景に使えば魅力的なサイトを作れそうな効果です
ぷにっと感がたまらない ローディングに使えるCSSアニメーション
ぷにっと、ピョンピョン跳ねる感じが和む、CSSで作られたアニメーション。ローディングなどの待ち時間の表示に使えば和める
マウスオーバーでラインが動くようなアニメーションのボタンを実装出来るコード
マウスオーバー時のアニメーションをグレードアップする、ラインが動くアニメーションを実装出来るコード。CSSのアニメーションだけで出来ているので使い勝手の良いコードです。
ドラッグで回転する3Dなギャラリーのアイディア
3Dに回転する、ギャラリー表示が導入出来るコード、ライブラリーを使用せずjavascriptで出来ています。
ペーパー的な立体感がある、CSSで作れるtext-shadowを使ったタイポグラフィ
CSSを使ったタイポグラフィ。画像を使わずに、CSSだけで立体的な文字を表現する方法です、ポイントはtext-shadowに複数の値を設定することでより立体的な質感を出すことが出来ます
背景が4方向にスライドするコンテンツの切り替えが美しい jQueryをつかったアイディア
複数のコンテンツを、コンテンツごとに1画面表示にして それぞれを、表示するときの切り替えが美しい
自動で途切れなくエンドレスにスライドし続けるCSSだけでつくるギャラリーのアイディア
jQueryプラグインのスライダーとかで、自動で動くエンドレスなスライダーを 実装することが多々有りますが こちらの方法は、javascriptを使わずにCSSのみで エンドレスに途切れずに流れるスライダーを実現しています また背景と、画像がパララックスに動いているのも良い
画面が分割されてコンテンツが表示されるWEBサイトのエントランスページのデザインのアイディア
ENTER ボタンをお押すことで内容が見れるようになる エントランスページのデザインのアイディア
