クールな円形メニューをピュアCSS3で実装するチュートリアル:phpspot開発日誌

2012/09/21 50 users チュートリアル phpspot開発日誌 円形メニュー フル

The Creation of a CSS3 Clickable, Rotating Menu | InsertHTML クールな円形メニューをピュアCSS3で実装するチュートリアル。 クリックすると回転したり良い感じに立体感が出ていたりアニメーションしたりCSS3の機能をフルに使った円形メニュー。 奇抜なメニューであっと驚かせたいという場合に使えそうです デモページ メニューアイコンもしっかり回... 続きを読む

[CSS]シンプルながらバリエーションが豊富なソーシャルメディアのボタン | コリス

2012/03/09 81 users コリス クロスブラウザ CSS バリエーション 階層

デモページ：カスタム CSS Social Buttonsの使い方 このソーシャルメディアのボタンはピュアCSS3でもHTML5 Canvasでもなく、背景画像を使って実装するものです。これらのアイコンはクロスブラウザで、さまざまなデザインに利用できるよう広い用途を目的としたものです。 外部ファイル スタイルシートを外部ファイルとして記述し、画像フォルダをスタイルシートを同じ階層に設置します。 <... 続きを読む

ピュアCSS3で作られた「path.com」っぽい円形メニュー実装デモ:phpspot開発日誌

2011/12/07 40 users phpspot開発日誌 path.com ビローン デモ すま

Path menu in pure CSS3 ピュアCSS3で作られた「path.com」っぽい円形メニュー実装デモ path.comのメニューというのは次のようなもので、クリックするとアニメーションしながらビローンと開くようなものです これをCSS3で実装したデモが公開されています。 アニメーションもしてJavaScriptも使っている気がしますがピュアCSS３とのこと。 気持よく動きます スマ... 続きを読む

ピュアCSS3のコンテンツスライダー:phpspot開発日誌

2011/11/14 24 users ピュアCSS phpspot開発日誌 コンテンツスライダー

The Pure CSS3 Content Slider ピュアCSS3のコンテンツスライダーが公開されています。 色々できるのはわかってきたんですが、次から次とピュアCSSなものが出来ていってますね。 開発者としてはマルチプラットフォームで作りやすい方を選ぶのが自然ですがこういう可能性を知っておくことも重要かも。 良い感じにアニメーションしてます 関連エントリ ピュアCSS3でタイピングアニメー... 続きを読む

CSS3のアニメーションサンプル４７:phpspot開発日誌

2011/10/12 40 users phpspot開発日誌 CSS3 transform 実際

47 Amazing CSS3 Animation Demos CSS3のアニメーションサンプル４７。 CSS3 の transform、 transition を使ってアニメーションさせるテクニックが満載です。 実際には使わないにしてもCSS3でできることを把握しておくことは重要かもしれません。 関連エントリ jQueryとCSS3を使った3Dのフォトスタック実装例 ピュアCSS3でタイピングア... 続きを読む

ピュアCSS3でタイピングアニメーションするデモ:phpspot開発日誌

2011/09/08 19 users タイピング phpspot開発日誌 デモ steps ローデ

Pure CSS3 typing animation with steps() | Lea Verou ピュアCSS3でタイピングアニメーションするデモ。 タイピングした文字を画面に表示するような効果をJSなしでピュアCSS3でsteps()を使って実現しています。 こんなことが出来ちゃうんですね。 一目見ておくだけでも可能性について感じ取ることができます。 関連エントリ Ajaxスタイルのローデ... 続きを読む