タグ

2011年4月12日のブックマーク (3件)

  • [CSS]画像のキャプションを省スペースにさりげなく表示させるスタイルシート

    画像にマウスをホバーさせると、キャプションがアニメーションでスライド表示される省スペース用エフェクトを実装するスタイルシートのチュートリアルを紹介します。 Slide In Image Captions [ad#ad-2] キャプションをスライド表示させる画像のデモ デモでは、画像ごとに異なる方向から異なる位置にキャプションがスライド表示されます。 デモページ スライドは、CSS3 transitionに対応したブラウザ(Chrome, Safari, Opera)ではアニメーションで表示し、非対応ブラウザ(Firefox3)ではアニメーション無しで表示されます。 [ad#ad-2] 以下は元記事の各ポイントを意訳したものです。 なぜ、このようなエフェクトをするのでしょう? それはレイアウトのスペースを節約するためです。そして、キャプションの存在は画像からユーザーの気を散らしてしまうことも

  • 画像スライダーに関することならお任せ!なjQueryプラグイン「Slider Kit」:phpspot開発日誌

    画像スライダーに関することならお任せ!なjQueryプラグイン「Slider Kit」 2011年04月12日- Slider Kit, sliding contents with jQuery 画像スライダーに関することならお任せ!なjQueryプラグイン「Slider Kit」 このプラグインを使うことで実に様々なスライダーが実現出来ます。以下にサンプルを。 一見普通の画像 カーソルを合わせるとページ送りが出るUI。これだけでもシンプルでかなり使えそう。無駄なUIは不要という方に。 ページインデックスを次のように○で表示したスライダーも作れます。 ページ番号がついたもの サムネイルがついた物 サムネイル+ラベル付き サムネイルを横に配置したもの シンプルにサムネイルを敷き詰めた例 何らかの製品等の特徴を表示するようなおなじみのタブUI型スライダーも。 画像だけでなくHTMLも使える タ

  • 地図上で2点間の直線距離を測る【みんなの知識 ちょっと便利帳】

    Ⓐ、Ⓑ に住所、ランドマーク、緯度経度のいずれかを入力し、[計測する]をクリックすると地図上のマーカー[][]で示された2点間の「大圏航路」「等角航路」を描画し距離を表示します。 マーカーをドラッグし、[計測する]を押すと航路を再描画します。 子午線をまたいでマーカーをドラッグした場合、航路の線が正しく描けないことがあります。 緯度経度で検索する場合は E139.45.56.9N35.41.0.7 (東経 139度45分56.9秒、北緯 35度41分0.7秒)のように入力してください。 [世界]にチェックを入れると、ロンドン、モスクワなど、海外の地名で検索できる場合があります。 特定のキーワードで、目的の検索ができない場合があるようです。 地図左上のマーカー[]をクリックすると「現在地」へ移動します。「現在地」は、ご利用のプロバイダーのIPアドレス情報を使い大まかな位置情報を割り出すため、

    gotack
    gotack 2011/04/12
    直線距離