実例から学ぶ、CSS3とjQueryを併用する際の切り分け方法
CSS3でもjQueryでも実装できるシャッターのようにスライドするエフェクトを例に、CSS3とjQueryを併用し切り分けて実装する方法を紹介します。 Garage Door Style Menu デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 マークアップとスタイリング jQuery Method CSS3 Method CSS3とjQueryの併用 -Modernizr マークアップとスタイリング HTML HTMLはクリーンでセマンティックに実装されています。 <ul id="garagedoor"> <li id="shutter1"><a href="#1">Link 1</a></li> <li id="shutter2"><a href="#2">Link 2</a></li> <li id="shutter3"><a href="#3">Link 3
jQueryとCSS3でドロップダウンメニューにフォームを埋め込んでしまうデモ:phpspot開発日誌
FormBox ? A jQuery & CSS3 Drop-Down Menu With Integrated Forms | AddyOsmani.com | Where User Interface Ideas Grows jQueryとCSS3でドロップダウンメニューにフォームを埋め込んでしまうデモ メニューにカーソルを合わせるとドロップダウンメニューがアニメーションしながら現れてフォームが表示されるというUIの例と実装サンプルです。 スペースを取ることなく、コンパクトにログインフォーム等を埋めこむことが実現出来ています。 ログインしない人にとっては邪魔なブロックなので、使わない場合は最小化しておくというのはなかなか合理的なUIですね。 サイトの特性などに応じて実装すればサイトの利便性を大きく向上することができそうです。 関連エントリ ドロップダウンメニューにテーブルやフォーム等何
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
jQueryとCSS3で構築された超絶クールな画像ギャラリーサンプル:phpspot開発日誌
Beautiful Photo Stack Gallery with jQuery and CSS3 | Codrops jQueryとCSS3で構築された超絶クールな画像ギャラリーサンプルが公開されています。 プログラムのまるごとダウンロードも可能。 これを使って、ちょっとカッコいいギャラリーを作ってよ、みたいな案件にすぐ対応出来るかもしれません。 一覧画面は次のような感じでCSS3の機能をフルに使ってクールにデザインされています。 画像をクリックすると、写真がLightBox風にオーバーレイして開きます。 何枚にも重なってますが、クリックするとシャッフルできます。 アニメーションなんかもいい感じで動いてくれます。 関連エントリ 画像ギャラリーを作る際に使えるFlashやJavaScriptを活用したライブラリ＆サンプル集 超クール画像ギャラリーが作れるJavaScriptライブラリ 画
フォントサイズを変える「大・中・小」ボタンを実装する方法
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか？という質問をいただきました。 CSSとJavaScript（場合によってはJSのみ）で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し
jQueryとCSSで作るiPhone風ラジオボタン・チェックボックス
2014年8月20日 jQuery いつも使っているラジオボタンやチェックボックスにもっと彩りを！ここではCSSとjQueryを使ってiPhone風のデザインに変える方法を紹介します。使用する画像は一枚のみ。CSSスプライトで表示位置を変えます。サンプルも用意してみたので覗いてみてくださいね！ ↑私が10年以上利用している会計ソフト！ サンプルはこちら。IE7, IE8, FF, Chromeで正常動作 See the Pen Mobile like radio/check buttons by Mana (@manabox) on CodePen. ファイルを準備 必要なファイルを準備します jQuery こんな感じの画像を作る コーディング ファイルを読み込む ヘッダー内にjQueryを読み込ませます。 <script type='text/javascript' src='/samp
[JS]CSSスプライトをアニメーションで変更するチュートリアル
Photoshopでの画像作成からはじまり、CSSスプライトをアニメーションで変更するボタンを実装するチュートリアルをTutorial9から紹介します。 Creative Button Animations with Sprites and JQuery デモページ デモではHTMLとCSSを使用したベーシックなCSSスプライトで実装したボタンだけでなく、XHTMLとCSSとJavaScriptを使用しフェードのアニメーションでじんわりと変更するボタンなどがあります。 エキスパート モードでは、一つの画像で複数のボタンを変更するもの、矩形ではなく円形のボタンをアニメーションで変更するものもあります。
Scroll/Follow Sidebar, Multiple Techniques | CSS-Tricks
Really simple concept today folks! A sidebar that “follows” as you scroll down a page. There are a number of ways to go about it. We’ll cover two: CSS and JavaScript (jQuery) with a bonus CSS trick. View Demo Download Files The easiest way to handle this is just to use CSS fixed positioning. Our sidebar is within a #page-wrap div with relative positioning, so the sidebar will set inside there, t
Using jQuery for Background Image Animations
After reading Dave Shea's article on CSS Sprites using jQuery to produce animation effects, I felt like playing around with things to see what could be done but accomplish it with a simpler HTML structure (no need for adding superfluous tags) and simpler code, too. Changing the position of the background image felt to be the best approach to creating the type of effect we're looking for (and I'm n
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5, CSS3, jQuery1.4, WordPress3の厳選チートシート集