マウスオーバーで瞬時に和訳　Chrome拡張の英和辞書「Mouse Dictionary」がめっちゃ便利 - ねとらぼ

2018/09/08 61 users 英和辞書 瞬時 とらぼ 訳語 マウスカーソル

Chromeに英和辞書機能を追加するChrome拡張「Mouse Dictionary」がとても便利です。マウスカーソルを英単語に合わせるだけで、瞬時に訳語を表示してくれます。 起動すると小さいウィンドウが開き、マウスカーソルを当てた英単語の訳が表示されるように Chromeウェブストアで、「Chromeに追加」ボタンを押して導入すると... 続きを読む

CSS Filtersはアニメーションで使うのがお勧め！手軽に実装するいい感じのマウスオーバー演出 - ICS MEDIA

2017/04/19 95 users ICS MEDIA アニメーション ボカシ エフェクト CSS

CSS Filtersとはボカシや色調整などグラフィカルな効果が得られるCSSの機能です。この記事では「 マウスオーバーなどの表現を作るのにCSS Filtersが便利 」ということを紹介します。 CSS Filtersの使い方は簡単。CSSの filter プロパティーに適用したい種類の指定を行うだけです。例えば、次のような指定をすると、HTML要素にエフェクトがかかった状態で表示されます。 C... 続きを読む

Material Icons - マテリアルデザイン向けに作られたGoogle製アイコン集 MOONGIFT

2014/11/06 61 users アニメーション フラットUI アイコン マテリアルデザイン

Googleが提唱しているフラットUIを発展させたデザインがマテリアルデザインです。アイコンを単純化して情報構造を明確にするだけでなく、さらにマウスオーバーやタップ時のアニメーション、色の変化をつけることでシステムがどういう状態にいるかが明確になります。 そんなマテリアルデザインにフォーカスして作られたアイコン集がMaterial Iconsです。 Material Iconsの使い方 Mater... 続きを読む

ASCII.jp：マウスオーバーで動くなめらかカルーセルパネル (1/2)｜先端サイトに学ぶCSS3/jQueryアニメーションデザイン

2014/05/26 53 users jQueryアニメーションデザイン ASCII.jp 講義

今回の注目サイト： Universiteit van Nederland http://www.universiteitvannederland.nl/ オランダの大学教授の講義を無料配信しているサイト。 軽快でなめらかなカルーセルパネル 毎週アップロードされる充実した動画コンテンツを、カルーセルパネルやボックスレイアウトで賑やかかつコンパクトにまとめている「Universiteit van Ne... 続きを読む

CSSでディスクを回転浮上させるエフェクトのサンプル | 56docブログ

2013/02/15 54 users エフェクト CSS ディスク サンプル 56docブログ

CSSでディスクを回転浮上させるエフェクトのサンプル 【Web技術】 wrote on 2013/02/15 http://blog.56doc.net/Entry/524/CSSでディスクを回転浮上させるエフェクトのサンプル CSS演出小ネタ連投です。 【borde-radius】で作った丸型の要素に対し、マウスオーバーでコンテンツを回転させながら浮かび上がらせる方法です。 スポンサードリンク ... 続きを読む

世界地図でデータをビジュアライズする際に使えるJSライブラリ「DataMaps」:phpspot開発日誌

2012/12/17 90 users 国名 インタラクティブ カーソル JSライブラリ ライブラリ

DataMaps 世界地図でデータをビジュアライズする際に使えるJSライブラリ「DataMaps」。 マウスオーバーでインタラクティブにデータを表示できたりするライブラリです 次のように美しい地図を描けるので、管理画面や、プレゼン資料向けに使ってみてもよさそう １からやろうと思うとかなりの時間がかかりそうですが、これなら直ぐに使えそうです カーソルを合わせると国名が出る、というような世界地図にもで... 続きを読む

画像不要！HTML5のCanvasでグレースケールのマウスオーバーが作れるチュートリアル | デザイナーブログ | 株式会社LIG

2012/10/15 81 users canvas チュートリアル Opera Safari 殆ど

こんにちは、ももこです。 HTML5の新要素であるCanvasを使って、グレースケールのマウスオーバーを実現するチュートリアルをご紹介します！ 現在CanvasはFirefox/Chrome/Safari/Opera/IE9など殆どのブラウザの最新版で実装されています。 未対応のIE8以前のバージョンにはgoogleが公開しているExplorerCanvasやuupaa-excanvas.jsを読... 続きを読む

超面白！文字を選択してその文字にコメントできるJSライブラリ:phpspot開発日誌

2012/07/23 79 users JSライブラリ phpspot開発日誌 超面白 文字 ＨＯＭＥ

Home - Annotator - Annotating the Web 超面白！文字を選択してその文字にコメントできるJSライブラリ。 ブログ等で記事のここにコメントしたい、といった場合に選択するとアイコンがあらわれます クリックするとコメント書き込みフォームがポップアップされます Saveボタンを押すと保存され、マウスオーバーでコメントが出るようになります コメント量の多いところはその分黄色... 続きを読む

pixiv の javascript のコメントが面白い - Dlog 隔離館

2012/06/16 368 users Fun pixiv null JavaScript マジ天使

Online community for artists[pixiv]お絵描きサイト、pixiv！何気なく、pixiv の javascript のソースを眺めてみると、いろんなコメントがありました。 ニョーン ... 7686: // マウスオーバーでおすすめタグをニョーンと出す 7687: var timer = null; ... マジ天使 ... 452: selectCover: fun... 続きを読む

CSS3アニメーションの基本的な実装例のまとめ | コリス

2011/11/03 317 users アニ Firefox CSS Safari Chrome

CSSのプロパティ一つに対して、値を二つ（開始と終了）変更し、さまざまなCSS3アニメーションの基本的な実装例を楽しめるデモサイトを紹介します。 デモページを楽しむには、Chrome, Safariで閲覧ください。 Firefoxでは一部動作しません。 アニメーションのスタートは、2つあります。 マウスオーバーで一つ一つのアニメーションがスタート アニメーションが全部同時にスタート 全部同時にアニ... 続きを読む

スマフォサイト作成時に超便利な画像タッチでタッチ位置をズームできる「Cloud Zoom touch」:phpspot開発日誌

2011/06/01 67 users phpspot開発日誌 バッチ jQueryプラグイン

スマフォサイト作成時に超便利な画像タッチでタッチ位置をズームできる「Cloud Zoom touch」 2011年06月01日- Welcome AlbanX.com スマフォサイト作成時に超便利な画像タッチでタッチ位置をズームできる「Cloud Zoom touch」。 「Cloud Zoom」というjQueryプラグインがあって、こちらへのパッチとして動作するみたい マウスオーバーでも動くみた... 続きを読む

[jQuery] プラグインを使わずに少しのコードを使ってテーブルのセルを分かりやすくハイライトする - かちびと.net

2011/04/01 93 users jQuery nth-child セル Tips 疑似クラス

現在見ているテーブルのセルが 分かりやすいようにマウスオーバー で縦と横のセルをハイライトするよう にするTipsです。css3の:nth-child() 疑似クラスを、jQueryを使用してクロス ブラウザに対応させます。 という訳でメモ書き。探したらプラグインを使うものばかりだったのですが、これだけの為にプラグイン使うのは正直アレなので簡単なコードでハイライトできるようなものを。サンプルマウス... 続きを読む

Twitterブログ: 「マウスオーバーの」問題についての全容

2010/09/21 284 users 全容 Twitterブログ クロスサイトスクリプティング

概要: 日本時間の9月21日午後6:54に Twitter におけるセキュリティ上の弱点に対する 悪用が30分前より発生していることを確認し、即座に問題の対応にあたりました。日本時間21日午後11時までに問題の主要因を解決し、22日午前1:15にホバーカードに関連した小規模な問題も解決が完了しました。 詳細: 昨日夜に発生したセキュリティ上の弱点を付く悪用は、クロスサイトスクリプティング (XSS... 続きを読む

かっこいいメニューバーが簡単に作れちゃうジェネレータ「MenuBuilder」*二十歳街道まっしぐら

2010/03/04 476 users ジェネレータ おしまい CSS グラデーション デフォルト

「MenuBuilder」はメニューバーを作ってくれるジェネレータです。 グラデーションやマウスオーバーも実装できます。 色を選んで、パターンを指定したらおしまい！ 簡単すぎ！ 画像およびHTML（CSS）もダウンロードできるので、使い回ししやすいです。 以下に使ってみた様子を載せておきます。 まず「MenuBuilder」にアクセスします。 メニューはグラデーションになります。 上側がデフォルト... 続きを読む

コンテンツにエフェクトを掛けるjQueryプラグイン10個 - かちびと.net

2009/12/14 427 users エフェクト net jQuery コンテンツ 手助け

個人的に必要になるかもと思ってメモ。 テキストや画像にエフェクトを与えて Webサイトを動きのあるサイトにする 手助けをしてくれるjQueryのプラグイン をいくつかご紹介します。 コンテンツに対するユーザーの興味を高めたり、画像を使用せずテキストを装飾したりと、使い方次第でいろいろ用途がありそうです。 Sliding Door Effect マウスオーバーで画像が4隅に開きます。動きも素敵。 S... 続きを読む

「吹き出し」をツールチップとして実装するjsいろいろ - かちびと.net

2009/11/02 438 users ツールチップ net jQuery Tool CSS

マウスオーバー等で吹き出しが 現れるツールチップのまとめです。 jQueryが殆どになります。 吹き出しは画像やcssを変更 すれば別の形状にする事も可能 なのでうまく活用したいですね。 吹き出し以外のツールチップを実装できるjsをお望みでしたら以下の記事が参考になりそうです。 15 jQuery Plugins To Create A User Friendly Tooltip 40+ Tool... 続きを読む

マウスオーバーをデザインする | DesignWalker

2009/08/10 730 users ウェブデザイン DesignWalker マウス 工夫 ボタン

ウェブデザインには欠かせないリンク要素。 メニューやボタン、画像、テキストのリンクなどちょっとした工夫で、ユーザーがリンクをマウスオーバーしたときに小さな驚きと楽しみを与えられるのではないでしょうか？ 今回は、そんなマウスオーバーをデザインするアイデアをいくつかまとめてみました。 Realistic Hover Effect With jQuery — Adrian Pelletier マウスオー... 続きを読む

最速で辞書が引けるアドオン「FireDictionary」が便利すぎる : ライフハッカー［日本版］, 仕事も生活も上手くこなすライフハック情報満載のブログ・メディア

2009/07/16 717 users アドオン 和訳 Firefox 辞書 ライフハッカー

Firefox , Mozilla , アドオン , フリーソフト 最速で辞書が引けるアドオン「FireDictionary」が便利すぎる 掲載日時：2009.07.16 17:30   コメント [0] , トラックバック [0] Firefoxのみ：このアドオン「FireDictionary」は、英語サイトのナナメ読みに最適です。なぜならマウスオーバーだけで英単語の和訳をサイドバーにリアルタイ... 続きを読む

無料で使える超絶便利な『キングソフト辞書』が最強な件！ - IDEA*IDEA ～ 百式管理人のライフハックブログ ～

2009/03/27 1230 users 辞書 発音 単語 キング 辞書ツール

これはすごい。今すぐダウンロードした方がよいですよ。まじで・・・。 キングソフトから出ている無料の辞書ソフトです。マウスオーバーで単語の意味が出るなんて当たり前で、ちゃんと発音もしてくれたり、英語だけじゃなくて、日本語も訳してくれたりします。辞書ツールはもうこれで決定じゃね？ ↑ まずはダウンロードしてインストール。キングソフト系はうっかりYahoo!ツールバーをインストールさせようとするのでその... 続きを読む

窓の杜 - 【NEWS】“英辞郎”の辞書データをマウスオーバー検索できる「Firefox」v2専用拡張機能

2006/10/26 336 users 英辞郎 Firefox NEWS 作者 辞書データ

“英辞郎”などファイルサイズの大きい辞書をデータベース化し、マウスオーバーで高速に検索できる「Firefox」用拡張機能「Mouseover Dictionary」v0.5.1が、9月12日に公開された。「Firefox」v2以降に対応するフリーソフトで、編集部にてWindows XP上の「Firefox」v2.0で動作確認した。現在、作者のホームページからダウンロードできる。 25日に公開された... 続きを読む

マウスオーバーのタイムアウトを使ったJavaScript - GIGAZINE

2006/07/07 82 users スクリプト マウス スピード GIGAZINE タイミング

通常のマウスオーバーを使うメニューだと、展開まで早すぎる、あるいは遅すぎる場合が多々あるわけですが、このスクリプトだとちょうどいい速度で展開してくれるらしい。 スクリプトの詳細は以下の通り。 Timeout your Mouseovers 上記ページの「Roll over me」の上にマウスを乗せれば展開されます。確かに今までのものよりもスピードやタイミングがちょうどいい感じな気もする。ちょっと一... 続きを読む

[YUI] マウスオーバーでリンク先サムネイル表示

2006/06/24 185 users YUI オブジェクト UI Library Yahoo

Yahoo! UI Library の YAHOO.widget.Tooltip オブジェクトのツールチップ機能と、 Simple API のサムネイル画像取得サービスを組み合わせて、 マウスオーバーでリンク先サイトのサムネイル表示を行うデモです。 Yahoo! JAPAN PC Watch asahi.com Yahoo! UI Library: Tooltip kawa.net xp ゆうすけ... 続きを読む

Luroni.Lab | マウスオーバーで跳ねるRSSアイコン なのです。

2006/06/13 118 users RSSアイコン JUGEM RSS src mode

こんなん作ってみました。 マウスオーバーでRSSアイコンが跳ねます。 Mac のDock風味なのです。 アイコンにRSS1.0をリンクし、マウスオーバーで画像入れ替えするソース(Jugemの場合) <a href="./?mode=rss"><img src="画像アップ先/20081001_523969.gif" onmouseover="this.src='画像アップ先/20081001_52... 続きを読む

Lucky bag::blog: CSS で画像ポップアップ

2005/09/11 166 users CSS Lucky Bag Blog hover 最初

この記事が属するカテゴリー CSS JavaScript を使わずに、CSS を使ってサムネール画像の拡大画像をマウスオーバーで表示せる方法「CSS ~ Image Pop UP」を参考に、拡大画像をその場で表示させるサンプルを作ってみた。 popup.html 最初に拡大画像を高さ 1px 幅 1px に指定しておき、hover で正寸を指定させることによって実現させている。ちなみに、hover... 続きを読む