9search | 必要なときに、必要なフリー素材を。

2011/04/02 1947 users フリー素材 サンセリフ アコーディオン スライダー テクスチャ

商用利用可、クレジット表記・バックリンク不要のフリー素材を紹介するサイト。webエレメント (27)アコーディオン (2)カレンダー (2)スライダー (1)ツールチップ (2)ナビゲーション (6)フォーム (5)ボタン (13)アイコン (15)テクスチャ (4)パターン (3)フォント (3)サンセリフ (2)セリフ (1)ブラシ (6)ベクター素材 (1)リボン (5) 続きを読む

もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」:phpspot開発日誌

2011/04/11 578 users jQuery Framework phpspot開発日誌

もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 2011年04月11日- Tipped - The Javascript Tooltip Framework | jQuery & Prototype Tooltips もう他のは要らないかも、なクールなツールチップ作成フレームワーク「Tipped」 これ１つで出回ってるであろう殆どのツールチップは作れる気がします。... 続きを読む

「吹き出し」をツールチップとして実装する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... 続きを読む

まるでネイティブのようなUIを実現できる高機能JavaScript UIライブラリ「w2ui」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/03/03 414 users ネイティブ w2ui エンジニア ソフトウェア グリッド

w2uiはデスクトップ、スマートフォン、タブレットに対応したJavaScript UIライブラリです。新しいJavaScript UIライブラリの紹介です。名前はw2ui、多数のウィジェットを搭載したUIライブラリとなっています。 レイアウト。 グリッド。 詳細検索対応。 ツールバー。 サイドバー。階層表示に対応しています。 タブ。 フォーム。 ポップアップ。 ツールチップ。 その他ユーティリティ... 続きを読む

Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点のまとめ | コリス

2016/03/17 412 users コリス Bootstrap Flexbox class 単位

Bootstrap 4ではそのインストール方法をはじめ、グリッドの単位やレスポンシブ用のclassが変わり、そしてカードやツールチップなどの新しいコンポーネントやレイアウトにFlexboxも利用できるようになりました。 Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点をまとめたリストを紹介します。 How to Migrate from Bootstrap ... 続きを読む

Fireworks用のウェブデザインの無料素材がダウンロードできる -Webportio | コリス

2011/01/12 405 users エレメント コリス スライダー ウェブデザイン 商用

アイコン、ボタン、リボンをはじめ、フォーム、スライダー、ツールチップ、メニューなどウェブデザインでよく使用されるようなエレメントをFireworks用のファイルで配布しているサイトを紹介します。 素材の利用にあたってはウェブサイト・ソフトウェアなど、個人でも商用でも無料で使用できます。また、利用の際にはバックリンクの必要もありません。 お願いとして、このサイトを何らかの形で広めてくれると嬉しい、と... 続きを読む

[JS]これ最強かものツールチップスクリプト -BeautyTips | コリス

2009/01/26 391 users コリス Ajaxコンテンツ トリガー スクリプト カスタマイズ

シンプルなツールチップも簡単に実装できるだけなく、デザインのカスタマイズが可能で、対応トリガーも豊富なツールチップのスクリプト「BeautyTips」を紹介します。 BeautyTips demo BeautyTipsは機能が豊富というだけでなく、テキストや画像、AJAXコンテンツの表示、ツールチップの表示位置の自動補正など基本性能もしっかりと抑えられており、フォームエレメントへの表示、ツールチッ... 続きを読む

タブやスクロール、ツールチップなど、Webサイトで良く見かける機能を1つのファイルで実装可能にする国産jQueryプラグイン・Laquu.JS - かちびと.net

2011/09/15 332 users スクロール タブ 実装 net ページスクロール

たまたま見かけて便利そうだったので シェア。良く使われるドロップダウン メニューやページスクロール、タブや ツールチップなどを1つのjsファイルで 実装可能にする国産のjQueryプラグイン です。制作が楽になるのでLaquu、と いう名みたいです。 国産のプラグインなのでドキュメントも日本語です。英語が苦手な方でも手軽に使えるのではないかなと。また、無駄な装飾も無いので既存サイトに落とし込んだり... 続きを読む

[JS]後発だけに高性能で、実装はシンプルで超軽量のツールチップのスクリプト -jQuery PowerTip | コリス

2012/08/15 315 users コリス スタティック 後発 追従 スクリプト

jQuery PowerTip jQuery PowerTip -GitHub jQuery PowerTipの特徴 jQuery PowerTipのデモ jQuery PowerTipの使い方 jQuery PowerTipの特徴 実装が簡単。 シンプルな構造。 ツールチップはカーソルに追従とスタティックに表示の2種類をサポート。 ツールチップの追従するエリアは設定可能。 カスタマイズも簡単。 ... 続きを読む

商用利用も無料、細部まで美しく作り込まれたUIエレメントが揃ったPSD素材 -Vue UI Kit | コリス

2011/08/30 312 users コリス Freebie UIエレメント PSD素材 細部

タイトルバー、ツールバーをはじめ、ボタン、フォームの各エレメント、ツールチップ、ダイアログなど、ウェブページでよく使用するUIエレメントが揃ったPSD素材を紹介します。 Exclusive PSD Freebie: Vu [...] 続きを読む

[CSS]動きがカワイイ！扇形にふわりと広がるツールチップ -Circular Tooltip | コリス

2013/05/07 266 users 扇形 コリス CSS ポパー かわいい

マウスのホバーやクリックで、ふわりとアニメーションで扇形にツールチップが表示されるスタイルシートのデモを紹介します。 デモは、2種類あります。 まずは、一つ目のデモ。 Creating a Radial Menu in CSS マウスのホバーで、「扇形のツールチップ」がアニメーションで表示されます。 続いて、二つ目のデモ。上記にインスパイアされたもので、動きが絶妙ですごいです！ Circular ... 続きを読む

デザインから選ぶjQueryツールチップ5つ | ウェビメモ

2011/06/22 253 users ウェビメモ 解説 デザイン

ちょっとした解説や情報を表示したい時、あらかじめデザインに当てはめておくよりも 必要な時だけに表示させる方が より目を引く場合があります。 そんな時に利用できそうなツールチップの中から使ってみたいデザインのものをピックアップしてみました :) 続きを読む

[JS]スライダーやタブやページネーションなど便利な機能を少ないコードで実装する超軽量（8kb）のスクリプト -vanity | コリス

2012/07/05 217 users vanity jQuery コリス スライダー ウェブページ

スライダー、タブ、ページネーション、ツールチップなど、ウェブページでよく使用するコンテンツをシンプルにより少ないコードで実装できるよう開発されたjQueryのプラグインを紹介します。 vanity jquery toolset vanityは7種類のツールがあり、それぞれ8kbと超軽量のスクリプトとなっています。 機能はシンプルで、より少ないコードで簡単に実装できるように設計されています。 以下、... 続きを読む

タブ、ツールチップなどクールなＵＩコンポーネント実装jQueryプラグイン「jQuery TOOLS」:phpspot開発日誌

2009/06/15 211 users ライブラリ phpspot開発日誌 タブ アニメーション

タブ、ツールチップなどクールなＵＩコンポーネント実装jQueryプラグイン「jQuery TOOLS」 2009年06月16日 jQuery TOOLS - The missing UI library for the Web タブ、ツールチップなどクールなＵＩコンポーネント実装jQueryプラグイン「jQuery TOOLS」。 同様のライブラリは他にあるかもしれませんが、アニメーションや見た目... 続きを読む

JavaScriptを使わずCSSのみでシンプルなツールチップ実装:phpspot開発日誌

2008/03/27 211 users CSS phpspot開発日誌 ツールチップ実装 hover

Easy CSS Tooltip | Kollermedia.at JavaScriptを使わずCSSのみでシンプルなツールチップ実装。 CSSの a:hover を応用して、次のようにシンプルなツールチップを実装するサンプル。 コードは以下のようにシンプルにかけます。 <html> <head> </head> <style> a:hover {background:#ffffff; text-... 続きを読む

これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけで100種類のツールチップを簡単に実装できる -CSS Tooltips & Speech Bubbles

2024/03/06 206 users CSS HTML デザイ div要素一つ グラデーション

HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで約100種類のールチップとスピーチバブルを実装できるCSS Tooltips & Speech Bubblesを紹介します。 このツールチップって実装すると、けっこう面倒ですよね。ベタ塗りのツールチップをはじめ、グラデーションの枠、しっぽの位置、しっぽの形状など、さまざまなデザイ... 続きを読む

HTML5/CSS3を使った多機能デザインフレームワーク「HTML KickStart」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2013/01/03 155 users エンジニア ソフトウェア HTML KickStart

HTML KickStartはBootstrapライクなデザインテンプレートフレームワークです。最近ではWebサイトのベースにBootstrapを利用することが多いのですが、今回はその類似ソフトウェアとしてHTML KickStartを紹介します。こちらもかなり高機能です。 Typography。 リストとメニュー。 メニューは階層対応。 テーブル。 ツールチップ。上下左右自在です。 アイコン。 ... 続きを読む

[JS]ただのツールチップだと思ったら大間違い、ホバー時にインフォメーションを表示するスクリプト -Hovercard | コリス

2011/12/01 148 users Twitter Facebook jQuery コリス カード

[JS]ただのツールチップだと思ったら大間違い、ホバー時にインフォメーションを表示するスクリプト -Hovercard さまざまなHTMLのエレメントのホバー時にカード状のインフォメーションをアニメーションで表示するjQueryのプラグインを紹介します。 ただのツールチップとは違い、カードのインフォメーションに更にカードを表示したり、Facebook, Twitterと連携したり、コールバック関数... 続きを読む

CSSを使ってカッコいい円形メニューを作る:phpspot開発日誌

2007/04/13 136 users CSS phpspot開発日誌 カーソル 円形 円形メニュー

metal.ize - tutoriales Este es un peque・ experimento con CSS que muestra un men・circular con los elementos a su alrededor.CSSを使ってカッコいい円形メニューを作るサンプル。 次のような円形でアイコンにカーソルを合わせるとツールチップが表示されるような円形メニューのサンプルが紹... 続きを読む

[JS]洗練されたかわいらしいデザインのツールチップを簡単に実装できるスクリプト -Sweet Tooltip | コリス

2012/03/05 128 users コリス stylesheet スクリプト script src

デモページ：Big Yellow Sweet Tooltipの使い方 外部ファイル スタイルシートをhead内に、スクリプトをページの下部に外部ファイルとして記述します。 <link rel="stylesheet" href="sweet-tooltip.css"> <script type="text/javascript" src="jquery.js"></script> <script ... 続きを読む

最近公開された表現力を高めるjQueryプラグインいろいろまとめ7つ(ツールチップ、画像ホバー、スライドショー) - W3Q

2012/03/08 104 users 画像ホバー jQueryプラグイン スライドショー W3Q

[JavaScript] 最近公開された表現力を高めるjQueryプラグインいろいろ 続きを読む

[CSS]さまざまなスタイルのツールチップが簡単に実装できるSassでつくられた -Simptip | コリス

2013/11/07 96 users Sass コリス フェード class CSS

classを変更するだけで、ツールチップを表示する方向、カラーを変更したり、フェードやスライドのアニメーションで表示したりなど、さまざまなスタイルのツールチップを実装できるSassでつくられたスタイルシートを紹介します。 実装にはSassの知識は必要なく、簡単に利用できます。 Simptip Simptip -GitHub Simptipのデモ Simptipの使い方 Simptipのデモ ツール... 続きを読む

Twitter BootstrapをベースとしたフラットなデザインのUIキット・Flat UI - かちびと.net

2013/03/05 94 users Twitter Bootstrap net ベース デザイン

Twitter Bootstrapベースに作られたシンプルでフラットなデザインのUIキット・Flat UIのご紹介。今年はこの手のスタイルよく見かけますけど、確かに見やすいですね。 Flat UI フラットなデザインで見やすい印象です。このまま使うのはアレですけど参考にはなりました。 ドロップダウンメニューとかフォーム周りとか。 ツールチップとかとか。Bootstrapに含まれているコンポーネント... 続きを読む

タブやページネーションを簡単に実装できる！超軽量のJqueryプラグイン「vanity」 | 株式会社LIG

2012/12/14 87 users vanity イージング スライダー jQueryプラグイン

お疲れ様です、ももこです。 今回はタブやツールチップ等、ちょっとした動きをつけるのに便利で超軽量なJqueryプラグイン「vanity」をご紹介します。 jSlider – スライダー デモページ ナビとページ遷移のついた基本的なスライダー、速度やイージングも調整がききます。 jTabs – タブ デモページ コンテンツの切り替えによく使われるタブ。簡単にアニメーションがつけられるのが個人的に気に... 続きを読む

シンプルなデザインのTooltip JavaScript （glt.js） - youmos

2007/06/29 87 users youmos HTMLヘッダ 記述 違和感 デザイン

ツールチップをさりげなく表示したい場合に便利なのが、シンプルなデザインのGood-Looking Tooltips（GLT）。動作も軽く、コンテンツに導入して、さりげなく表示されるので違和感が少ない。凝ったデザインよりもシンプルなのを好む方は気に入ると思う。 実際に導入するにはglt.jsをHTMLヘッダで読み込む記述と、スタイルシートの準備が必要になる。ツールチップの内容を指定するには、表示した... 続きを読む