タグ

ブックマーク / www.webopixel.net (3)

  • リッチなユーザーインターフェイスを簡単に実装できる「jQuery UI」

    リッチなユーザーインターフェイスを簡単に実装できる「jQuery UI」 jQueryUIはドラック&ドロップなどのアクション、アコーディオンやダイアログなどのグラフィカルなユーザーインターフェイス、フェードインアニメーションのエフェクトなどがセットになったjQueryのプラグイン群です。 またプラグインの他にも高品質なテーマファイルもセットになっているので、あまりオープンにしないサイトの管理画面でしたら、そのまま使用しても問題ないのではないかなと。 投稿日2011年03月21日 更新日2011年04月02日 jQueryUIのダウンロード jQueryUIトップページからダウンロードしてもいいですが、テーマファイルのビジュアルを確認してからダウンロードした方がいいと思いますのでこちら。 jQuery UI – ThemeRoller 左ナビゲーションの「Gallery」タブを選択して、好

    リッチなユーザーインターフェイスを簡単に実装できる「jQuery UI」
  • jQueryでマウスオーバーすると全体的にピカーンってなるやつ

    jQueryでマウスオーバーすると全体的にピカーンってなるやつ マウスオーバーは普通同じ大きさの画像を切り替えたりしますが、他の要素の背景画像を変えることで派手なマウスオーバーにすることができます。 投稿日2011年10月11日 更新日2011年10月12日 準備 htmlは特に変わったことはしません、適当な要素にクラスを割り当てます。 html <p class="button"><a href="#">ボタン</a></p> その他マウスオーバーしたときの大きめの画像を用意します。 ここでは「bg.jpg」という名前で1000×1000の画像を使用します。 bodyのbackgroundを指定する方法 一番単純な方法はボタンをマウスオーバーしたときbodyのbackgroundを変更する方法です。 jQueryでimageとpositionの設定をしますので、cssでその他の設定をして

    jQueryでマウスオーバーすると全体的にピカーンってなるやつ
  • CSS3で作るシンプルなマウスオーバーアニメーション5種

    Posted: 2011.06.15 / Category: HTML&CSS / Tag: CSS3, アニメーション css3はアニメーションもできてしまうわけですが、ここではわりと簡単につくれるマウスオーバーアニメーションをご紹介いたします。 Chrome、Firefoxで動作確認しております。 css3マウスオーバーアニメーションの基 マウスオーバーアニメーションの前に通常のマウスオーバーをみてみましょう。 たとえばリンクの文字色をマウスオーバーしたときに変更したい場合はhover疑似クラスでcolorを指定しますよね。 css a { color: #3399FF; } a:hover { color: #FF6600; } これをアニメーションさせるには「transition」というプロパティを追加します。 transition: プロパティ名 時間 アニメーション方法 ;

    CSS3で作るシンプルなマウスオーバーアニメーション5種
  • 1