CSS3グラデーション・角丸のジェネレーターをjQuery/CSS3/HTML5で作成するチュートリアル
jQuery, CSS3, HTML5を使用して、CSS3グラデーション・角丸を生成するCSS3ジェネレーターを作成するチュートリアルを紹介します。 Creating a CSS3 Generator with CSS3, HTML5 and jQuery デモページ ※デモはWebkit系ブラウザ（Chrome, Safari）で動作します。 [ad#ad-2] 上記デモでは、CSS3グラデショーン（上のキャプチャ）、角丸（下のキャプチャ）のCSS3をブラウザで表示確認しながらコードを生成できます。 チュートリアルでは、HTML5のDOCTYPEの解説から、各要素へのスタイルシートの適用まで詳しく解説されています。 時間がない方は、とりあえずページ下のファイル一式をダウンロードすると、上記のデモがそのまま楽しめます。
jQueryとCSS3、HTML5でここまで出来るホバーインタフェース:phpspot開発日誌
WanderWall ? A jQuery, CSS3 & HTML5 Hover-Based Interface | AddyOsmani.com | Where User Interface Ideas Grows jQueryとCSS3、HTML5でここまで出来るホバーインタフェース。 jQueryで様々なことが出来るようになっているのはご存知だと思うのですが、更にCSS3とHTML5も組み合わせるともっとすごいよ、という１つのデモです。 まだまだインタフェースは進化するのだな、という可能性を感じるものになっているので一回見ておいたらよいかも。 WanderWallのデモ とにかく実際にHTML5対応のブラウザで見てみもらうのが一番分かりやすいです 上のメニューにカーソルを合わせると画面がアニメーションしながらクールに切り替わります。 HTML5ブラウザがデフォルトになり、こうした技
jQueryとCSS3でドロップダウンメニューにフォームを埋め込んでしまうデモ:phpspot開発日誌
FormBox ? A jQuery & CSS3 Drop-Down Menu With Integrated Forms | AddyOsmani.com | Where User Interface Ideas Grows jQueryとCSS3でドロップダウンメニューにフォームを埋め込んでしまうデモ メニューにカーソルを合わせるとドロップダウンメニューがアニメーションしながら現れてフォームが表示されるというUIの例と実装サンプルです。 スペースを取ることなく、コンパクトにログインフォーム等を埋めこむことが実現出来ています。 ログインしない人にとっては邪魔なブロックなので、使わない場合は最小化しておくというのはなかなか合理的なUIですね。 サイトの特性などに応じて実装すればサイトの利便性を大きく向上することができそうです。 関連エントリ ドロップダウンメニューにテーブルやフォーム等何
jQuery+css3で作るダイナミック且つクールなWebギャラリー・SIDEWAYS - かちびと.net
css3を使う限り実践的なテクニックとは 言えませんが、素敵なWebギャラリー でしたのでメモがてらエントリー。jQuery とcss3で画面全体を使ったダイナミックな Webギャラリーです。かなりFlashに近い 感じで素敵です。 画面全体を使用してダイナミックに動いてくれます。 左のサムネイルをクリックすると右がスライドインして全画面に画像が表示されます。マウスの動きでもスライド。 フルスクリーンモードのままでも次の画像に移動できます。 iPhoneではスクロールバー以外は動作しました。 css3なのでIE、特に6は残念な事になっていますが、jQueryそのものは動いてますね。 SIDEWAYS
プロフェッショナル用のHTML5+CSS3+jQueryのテンプレート -HTML5 Boilerplate
プロフェッショナル向きに開発された、HTML5+CSS3+jQueryなど直接実装に関わるファイルから、robots.txt, .htaccessなどサーバー関連のファイルも一式にまとまったテンプレートを紹介します。 HTML5 Boilerplate 昨日、当サイトで紹介した「HTML5 Reset」もHTML5+CSS3をベースに開発されたテンプレートセットですが、こちらはよりプロフェッショナル向けに開発されたものとなっています。 下記にその特徴を。 HTML5 Boilerplateの主な特長 クロスブラウザ対応（IE6も） HTML5対応 キャッシュの最適化と圧縮でGrade-Aのパフォーマンス モバイルブラウザへの最適化 クロスブラウザ対応のためにIEでは特定のclassを用意 プリント用のスタイルシート、パフォーマンスの最適化 HTML5でより早いページロードにする「.htac
CSS3とjQueryでHTML5動画プレイヤーを自作するチュートリアル:phpspot開発日誌
Building a custom HTML5 video player with CSS3 and jQuery - Opera Developer Community CSS3とjQueryでHTML5動画プレイヤーを自作するチュートリアルが公開されています。 ライブラリは数多く公開されていますが、自分で作るのが一番自由度が高いということで、自作したい場合に参考にできそうです。 作ったものはjQueryのプラグインなので、再利用も出来ます。 HTML5非対応ブラウザ用にFlashでのカバーをする機能も既存ライブラリなどを参考にして実装してみるのもよいかもしれません。 関連エントリ CSSでスキン作成が可能なHTML5動画プレイヤー実装JSライブラリ「Video JS」 HTML5で動画や音声再生を可能にするライブラリ集 CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装J
机の上に写真を無造作に並べたような写真ギャラりー実装デモ:phpspot開発日誌
Interactive Photo Desk with jQuery and CSS3 | Codrops 机の上に写真を無造作に並べたような写真ギャラりー実装デモ。 jQueryとCSS3を使って次のようなドラッグ＆ドロップも可能なギャラリーを作ることが出来ます。 ソースのダウンロードも可能なので参考にしてみましょう。 Flashを使わずともこうしたことが出来るのはよいサンプルかもしれません。 ちょっと変わったギャラリーを実装したい際の参考にしましょう。 関連エントリ jQueryを使ったFlashばりにクールなギャラリー「GalleryView」 高いカスタマイズ性を持つ画像ギャラリー実装用jQueryプラグイン「AD Gallery」 JavaScript製の画像スライダー・ギャラリーいろいろ
jQueryとCSS3で文字修飾に便利なMS OfficeのMinibar風ウィジェットを実装するサンプル:phpspot開発日誌
jQueryとCSS3で文字修飾に便利なMS OfficeのMinibar風ウィジェットを実装するサンプル 2010年05月27日- Why and how to create Microsoft Office Minibar with jQuery and CSS3 jQueryとCSS3で文字修飾に便利なMS Office 2007のMinibar風ウィジェットを実装するサンプル テキストを選択すると、ツールバーがうっすらと現れ、ツールバー内のボタンを押すと、文字が修飾されるようタグを付与してくれるようなMinibar実装サンプルです。 デモページではその場でプレビューされる機能もあります。 デモでは、b, i, uタグの他、リンクタグしかありませんが、他にも追加することで、テキスト入力をより便利にすることが出来そうですね。 関連エントリ フォームのユーザビリティに貢献するjQuery
jQueryとCSS3を使ったカラフルなレーティングシステムのサンプル:phpspot開発日誌
jQuery quickie: Colourful rating system with CSS3 jQueryとCSS3を使ったカラフルなレーティングシステムのサンプルが公開されています。 点数によって色を変え、アニメーション表示するもので、視覚的にわかりやすい投票のUIが作れますね。 動きをみたい方は以下のムービーでも見ることができます。 こうした投票のUIとしては★が一般的ですが、こういうUIも慣れるとなかなか使いやすそうですね。 関連エントリ jQueryのAjax機能を使った投票システムのサンプルプログラム reddit風のGoodかBadの投票機能実装サンプル Ajax+PHP+MySQLな投票ウィジェット jQueryとPHPでダイナミックな投票スクリプトを作成
キャプションがクロスしながら切り替わるcss3+jQueryのスライドギャラリーのサンプル
cssやプログラミングtransition slide css3とjQueryを使ったギャラリーの サンプルです。css3のtransitionを 使ってキャプションをクロスさせなが ら、切り替えています。transitionは IEが対応していないので参考という 感じで。 css3とjQueryを使ったギャラリーの サンプルです。css3のtransitionを 使ってキャプションをクロスさせなが ら、切り替えています。transitionは IEが対応していないので参考という 感じで。 という訳でサンプルです。 css3 transition slider Chromeで見ると凄くスムーズにクロススライドしてました。css3、いろいろと使いたいんですけどやはりIEが対応しないとですね・・ライブラリでドロップシャドウや角丸は対応できますけど。。 画像の切り替わり時に-moz-transi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3、HTML5、jQuery、デザインなどウェブ制作のテクニックが動画で学べるサイト
HTML5, CSS3, jQuery1.4, WordPress3の厳選チートシート集
動きがかわいいcss3+jQueryのコンテンツスライダー・Pretty Simple Content Slider - かちびと.net