Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
実例から学ぶ、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で作るダイナミック且つクールなWebギャラリー・SIDEWAYS - かちびと.net
css3を使う限り実践的なテクニックとは 言えませんが、素敵なWebギャラリー でしたのでメモがてらエントリー。jQuery とcss3で画面全体を使ったダイナミックな Webギャラリーです。かなりFlashに近い 感じで素敵です。 画面全体を使用してダイナミックに動いてくれます。 左のサムネイルをクリックすると右がスライドインして全画面に画像が表示されます。マウスの動きでもスライド。 フルスクリーンモードのままでも次の画像に移動できます。 iPhoneではスクロールバー以外は動作しました。 css3なのでIE、特に6は残念な事になっていますが、jQueryそのものは動いてますね。 SIDEWAYS
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
机の上に写真を無造作に並べたような写真ギャラりー実装デモ:phpspot開発日誌
Interactive Photo Desk with jQuery and CSS3 | Codrops 机の上に写真を無造作に並べたような写真ギャラりー実装デモ。 jQueryとCSS3を使って次のようなドラッグ＆ドロップも可能なギャラリーを作ることが出来ます。 ソースのダウンロードも可能なので参考にしてみましょう。 Flashを使わずともこうしたことが出来るのはよいサンプルかもしれません。 ちょっと変わったギャラリーを実装したい際の参考にしましょう。 関連エントリ jQueryを使ったFlashばりにクールなギャラリー「GalleryView」 高いカスタマイズ性を持つ画像ギャラリー実装用jQueryプラグイン「AD Gallery」 JavaScript製の画像スライダー・ギャラリーいろいろ
[JS]マウスホバーでボックスの真ん中にリンクを表示するスクリプト -Middle Box Links
デモページ 四つのコンテンツボックスは高さが異なりますが、リンク箇所はそれぞれの真ん中に配置されています。 HTMLはシンプルでdiv要素のコンテンツボックスにp要素でテキストを配置しているだけです。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div class="widget widget-one rounded"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet
[JS]CSS3アニメーションと同等の動作を実現するjQueryのチュートリアル
簡単な記述で魅力的なアニメーションを実装できるCSS3アニメーションは、SafariやChromeなどの一部のブラウザでしか動作しませんが、それと同等の動作をjQueryで実装するチュートリアルをMarcofolio.netから紹介します。 CSS3 animations and their jQuery equivalents demo チュートリアルでは左にCSS3、右にjQueryで実装されたものが配置されています。 ※CSS3はSafari, Chromeで動作します。 実装しているのは、以下の5つ。 フェード バウンス パルセート ナビゲーション アコーディオン ブラウザのシェアを考慮すると、まだまだjQueryが有利かもしれません。
New Screencast: CSS3 Slideup Boxes | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Follow along as we use a few very simple CSS3 transitions to create a “slideup” box effect. Roll over the box with your mouse, and the title of the box slides out of the way and a more descriptive stylized box of information jockeys its way into place. This is supported in modern version of
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
3D Thumbnail Hover Effects
CSS3、HTML5、jQuery、デザインなどウェブ制作のテクニックが動画で学べるサイト
IDEA * IDEA