リンク部分にマウスオーバーした際にマウスポインタに追従する形でのToolTips。exampleのページ内でサンプルを見れます。ページ下部のdownloadのリンクからソースをDLできます。外部.jsファイルを置いて、HTMLヘッダとCSSに加筆すればオッケー。適用するdivとか選べるのかな？ example内のソースでは特にrelやclass指定なしで適用されてますね。ToolTips内に表示されるテキストはtitle属性で指定したものが出るのでちょうどイイ感じ。
Bubble Tooltips >> | example >>
ウェブのデザイニングなどで使うアプリケーションごとに、チュートリアルを各種取りそろえてる投稿サイト。Adobe Photoshopあたり結構イイネタがありました。英語版での解説にはなるけど、使い慣れた人ならだいたい分かるような内容。コレとか好きだな。まぁだいたいどれもちょっと考えれば作れるものばかりではあるけど、ネタ帳として便利だねここ。PHPやJavaScriptのTipsもあります。
Total Tutorial >>
特定のウェブサイトの各種診断をまとめてやってくれる便利なサイト。フォーム内に調べたいウェブサイトのURLを入力してエンター。その後下にある各診断項目をクリックすればオッケー。HTMLやCSSやRSSのW3Cの準拠率、Robots.txtやCreative Commons Licenseの有無、Googleにバンされてないかのチェックなどが一括でできます。サイト製作者にとっては死ぬほど便利なサイト。仕事の仕上げとなる各種チェックも多少はラクになるかもしれません。
The Scrutinizer >> | 翻訳版 About >>
フォトレタッチングの教則にも使えそうな作例。11例とそんなに数は多くないけどクオリティ高いっす。写真家の方のサイトなのでギャラリーに行くと他にも美しい写真がたくさんあります。流行りのミニチュア加工もやってらっしゃいますね。うーん美しい。
Brian Dilg Photography – Photo Retouching >> | Site Top >>
アップルの商品画像などでよく見かける反射効果、日常的にフォトショップを使っている人にとっては2分もあれば作れますが、けどCSSで一元管理できたらそれはそれで便利だし、生産性も上がります。このReflections.jsは名前の通り外部JavaScriptなので、サイト内のどこかに置くだけでオッケー。あとは反射させたい画像にclass指定すれば効果が得られるようです。classも複数用意されていて、反射した画像の深さが選べるようになっています。
Reflections.js >>
主にウェブ製作者が喜ぶTips。CSSで書くボーダーって、Solid表示以外にもDottedとかありますよね。けどアレってブラウザによって見え方がまちまちで、「ちゃんとSafariみたく表示せんかいｄｒｆｔｇｙふじこ！！」ってなった経験ありません？ わたしはございますので最近じゃボーダー指定はめっきり使わなくなってしまいました。こちらではその解決策を画像のbackground表示によって解決してます。白黒ドットの2×2のgifを1枚用意して、そいつを特定のDivなどのコンテナbackgroundに指定。あとはそこに画像を放り込んで、paddingを1pxにすればオッケ。コチラではその応用例が掲載されてます。imgタグの白ボーダーと組み合わせるってのもイイ感じ。2×2のドット絵も上がっています。早速仕事で使えそうな小技ですね。
Dotted image border >>
Ajaxを使ったリロードなしのタブ表現。ってか非同期通信がある事がAjaxの定義だと思ってるけど、コレってただのJavaScriptによるDIV内差し替えだよね？ まぁ細かい事は抜きにして、仕事的に使い勝手が良さそうなのでメモ代わりのエントリ。タブによる表現ってユーザーが今何を見てるのかについて視覚的に分かりやすいから使いやすいんだよね。抽出したコンテンツや問い合わせ内容の切り替え、他にも色々と使える場面がありそうです。.zip形式でソースDLできます。
Ajax Tabs Content script >>
