プログラミング不要で、マウスオーバー時にポップアップ表示ができる超軽量CSSライブラリ「Hint.css」を使ってみた！ : うえぶはっく

2016/01/27 84 users ウェブ インフォメーション プログラミング HTML ヒント

今すぐ、自分のWebサイトやブログなどにポップアップ表示を導入できる超軽量なCSSライブラリ 「Hint.css」 のご紹介！ HTMLの好きな要素に、専用のクラス名を指定するだけで誰でもすぐに利用できるのが特徴で、メッセージやインフォメーション、ヒントなどを表示させるのに最適です。 そこで、スマホでの利用シーンも踏まえて、サンプル例と一緒にご紹介しようと思います！ 使い方！ 利用方法はシンプルで... 続きを読む

コピペOK！CSSでリンクテキストにアニメーションを付ける11の技 | ブログマーケッターJUNICHI

2015/10/12 47 users ブログマーケッターJUNICHI CSS アニメーション

リンクのついているテキストにマウスを乗せた時（マウスオーバー時）にアニメーションを付ける方法を解説します。プラグインを使えば、初心者でもこの記事内で紹介しているコードをコピペすれば簡単に実装することができます。是非挑戦してみて下さい。どうも、JUNICHIです。 リンクが付いたテキストや画像にマウスを乗せた時（マウスオーバー時）、色んなアニメーション・効果があるとなんだかカッコいいサイトになった気... 続きを読む

CSSのみで実装するキャプションエフェクト 20 | NxWorld

2014/05/20 640 users キャプション 備忘録 アイキャッチ NxWorld 文言

自分用にひと通りの動きを一覧化したものが欲しかったので備忘録です。画像のマウスオーバー時にエフェクト付きでキャプションを表示させる動きをCSSのみで実装する方法です。キャプションとはしていますが、例えばブログであればリンク付きのアイキャッチに実装してマウスオーバー時に「もっと見る」のような文言を表示させたりといった用途にも使えます。 共通のHTML 一部異なっているものもありますが、今回はサンプル... 続きを読む

CSSのみでマウスオーバー時にリンク先のURLをツールチップで表示させる | かちびと.net

2011/09/07 61 users CSS After ツールチップ net URL

cssの小技的な内容です。さほど使う機会は 無さそうなんですけど、JavaScriptを使うほど でも無いようなものなのでcssだけでやって 見た、みたいな記事。リンクにマウスを乗せる とそのリンク先のURLをツールチップとして 表示させます。 対応ブラウザはモダンブラウザとIE8以上です。:afterを使うのでIE7以下は対応できません。 cssでリンク先のURLを表示する まずはcssのみでリ... 続きを読む

Mozilla Re-Mix: リンクやダウンロードファイルの詳細情報を確認できるFirefoxアドオン「Extended Link Properties +」

2011/07/03 16 users Firefoxアドオン 見覚え ダウンロードファイル URL

リンクをクリックする時や、ファイルをダウンロードするような時、その内容がどんなものであるかは基本的にクリックしてみるまでわかりません。 このような事から、普段はマウスオーバー時にURLを確認している程度だという方も多いと思います。 しかし、見覚えのないURLにアクセスするときやよくわからないファイルをダウンロードするようなときは、もう少しリンク先の情報が欲しいということもあるのではないでしょうか。... 続きを読む

アイコンがふわっと拡大するjQuery | CREAMU

2010/02/24 368 users jQuery CREAMU マウス デモ アイコン

マウスオーバー時に気持ちのいい効果をつけたい。 そんなときにおすすめなのが、『BubbleUP』。アイコンがふわっと拡大するjQueryです。 アイコンにマウスオーバーすると、ふわっとサイズが大きくなりますね。動きが滑らかで気持ちいいです。 デモは以下から。 jQuery Menu Plugin: BubbleUP 実装方法も詳しく解説されているので、ぜひ見てみてください。 Learning jQ... 続きを読む

JQueryで簡単に作るドロップダウンメニューいろいろ | DesignWalker

2009/02/26 441 users jQuery DesignWalker シンプ エフェクト

今回は、JQueryを使って簡単に導入できるドロップダウンメニューをいろいろとご紹介。 ブログなどでも利用できるシンプルなものをなるべくピックアップしてまとめてみました。 初心者の方には、マウスオーバー時のメニューのでかたがそれぞれ微妙に違っていたりするので、好みのエフェクトを見つけて使ってみてもいいかもしれませんね。 Simple jQuery Dropdowns デモ | ダウンロード シンプ... 続きを読む