CSSのみで実現する軽量なツールチップ「Ballon.css」
WEB上で、ボタンや画像などの補足説明に用いられるツールチップ、そこまで多くは見かけませんが、ユーザーナビゲーションとしては直感的で有効な手法で、制作するにあたって導入を検討するWEBデザイナーの方は多いのではないでしょうか？今日紹介するのはCSSのみで実現する軽量なツールチップ「Ballon.css」です。 CSSのみで制作されていますが、なめらかなアニメーションを実現しています。ICONフォントや絵文字にも対応しています。 詳しくは以下 上、下、左、右と4方向にツールチップが出せ、単語から文章まで大きさも5段階にコントロールする事が可能です。 導入は非常にシンプルで、「Ballon.css」CSSを読み込ませて、あとは動かしたい所定の動きをdata-balloon-posという型で呼び出すだけで実装できます。ソースコードなどは「Balloon.css — CSS tooltips fo
プログラミング不要で、マウスオーバー時にポップアップ表示ができる超軽量CSSライブラリ「Hint.css」を使ってみた！ : うえぶはっく
今すぐ、自分のWebサイトやブログなどにポップアップ表示を導入できる超軽量なCSSライブラリ「Hint.css」のご紹介！ HTMLの好きな要素に、専用のクラス名を指定するだけで誰でもすぐに利用できるのが特徴で、メッセージやインフォメーション、ヒントなどを表示させるのに最適です。 そこで、スマホでの利用シーンも踏まえて、サンプル例と一緒にご紹介しようと思います！ 使い方！ 利用方法はシンプルで、GitHubからファイルをダウンロードするか、以下のCDN経由でCSSライブラリを取得します。 https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.0.0/hint.min.css HTMLの骨組みはこんな感じになるでしょう。 // index.html <!doctype html> <html> <head> <meta charset="utf-
ツールチップ、モーダル、通知等を一手に扱えるjQueryプラグイン「jBox」:phpspot開発日誌
jBox by Stephan Wagner ツールチップ、モーダル、通知等を一手に扱えるjQueryプラグイン「jBox」 これ１つでかなり多機能。ツールチップやモーダル、通知、それぞれに色々なデザインバリエーションがあってデザイン・アニメーション自体もカッコいい Bootstrapを使うまでもないけど、こうした機能だけ使いたいという場合にいいかも 関連エントリ レスポンシブでモバイルフレンドリなツールチップ実装ライブラリ「Mobile-Friendly Tooltip」 黒ベースでクールにアニメーションするツールチップ実装jQueryプラグイン「DarkTooltip」 ツールチップなどを表示した際に画面からはみ出さないようにしてくれる「offscreen.js」 フラットデザインが美しいシンプルかつスモールなツールチップjQueryプラグイン「Tipr」
[JS]シンプルながら優れモノ！ホバーやクリックでさまざまなツールチップを表示するスクリプト -DarkTooltip
ツールチップ系のスクリプトは数多くありますが、これはなかなか使いやすそう！ トリガーはホバーだけでなくクリックにも対応、HTMLコンテンツの表示にも対応、カスタマイズにも優れており、カラー、サイズ、不透明度、表示方向、アニメーションのさまざまなエフェクト、Confirmからのイベントにも対応しています。 上段はサイズ、中段は方向、下段はアニメーション アニメーションなどの実際の動作はデモページでぜひ試してみてください。 DarkTooltipの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとしてhead内に記述します。 <head> ... <link rel="stylesheet" href="darktooltip.css"> <script src="jquery-1.10.2.min.js"></script> <script
簡単にWebサイトツアーが作れるスクリプト「Intro.js」 | 佐賀でふらふり
会員制サイトなどに訪問した際に、ユーザーにどういう順番でリンクを踏んで欲しいか、どうすれば作り手が考えるように動いてもらって会員登録してもらうかは、非常に考えるところだと思います。 そのために、まずは、Webサイトツアーなどを見せたり、手順ページへ誘導したりすることが多いんじゃないかと思います。 そのWebサイトツアーを簡単に作れるJavascript「Intro.js」をご紹介。 目次 Intro.jsを使うとこうなる Intro.jsの使い方 終わり Intro.jsを使うとこうなる Intro.jsを使うと、この元々のサイトに こうやって番号と説明が表示されます。 次のステップに行くと わかりやすいですね。 Intro.jsのgithubに色々とサンプルが載っているので、そっち見たほうが早い気もします。 「usablica/intro.js · GitHub」 Intro.jsの使い
[CSS]さまざまなスタイルのツールチップが簡単に実装できるSassでつくられた -Simptip
classを変更するだけで、ツールチップを表示する方向、カラーを変更したり、フェードやスライドのアニメーションで表示したりなど、さまざまなスタイルのツールチップを実装できるSassでつくられたスタイルシートを紹介します。 実装にはSassの知識は必要なく、簡単に利用できます。 左から、角丸、半アロー、スライド、フェードの4種類 これらのスタイルはclassを変更するだけで、簡単に使い分けができます。他にもさまざまなスタイルが用意されています。 Simptipの使い方 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" type="text/css" href="simptip-mini.css" /> </head> Step 2: HTML ツールチップのスタイルはclassで、中身はdata
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
