[B! jquery][design] tarchanのブックマーク

Wookmark

高さの異なる要素をグリッドに沿って、レンガ状に隙間なく並べるjQueryのプラグインを紹介します。同種の有名スクリプト「Masonry」はアニメーションを使ってダイナミックにレイアウトを変更しますが、このWookmarkはシンプルに並べなおすだけです。デモ:幅800pxで表示 [ad#ad-2] Wookmarkの使い方実装はいたってシンプルです。外部ファイル「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.google apis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.wookmark.js"></script> HTML デモを例にHTMLはリスト要素など、並列に配置しま

tarchan 2012/03/27

リンク

[JS]文字を楽しく見せる、カーブ状に簡単に配置できるスクリプト -Arctext.js

Demo 4: Set/animate 「Animate me」でアニメーション。 Arctext.jsの使い方 Arctext.jsは「Lettering.js」をベースに文字をパスに沿わせて正しく回転させ配置します。 Lettering.jsについては、下記を参考ください。 HTMLファイルを汚さずに細かい設定でspanを挿入できるスクリプト -Lettering.JS では、Arctext.jsの使い方を。外部ファイル「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://ajax.google apis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="js

tarchan 2012/01/27

リンク

http://www.designwalker.com/2010/06/jquery-forms.html

tarchan 2010/06/04

このページ��スクロールに合わせてふわっと表示されてキレイ

リンク

[CSS]スタイルシートの実用的なテクニック集：レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編

tarchan 2009/08/28

リンク

[CSS]スタイルシートの実用的なテクニック集：エレメント・CSS3・Tips編

先日紹介した「レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編」の続編となる、リスト・カレンダー・表・フォームなどのエレメントの実装や進歩したスタイルシートのテクニック集をSmashing Magazineから紹介します。

tarchan 2009/08/28

リンク

フッターとかの区切り『｜』のサンプル1種

ふと、昔のサンプルを見て、今そんな組み方しないよ。とか思ってしまったので、最近もっぱらコレっていうのを書き書き。コレに限らず、昔のエントリーを見てると、自分で無いな～使えねー！って突っ込みたくなるエントリーが多いっす・・・うぅ。念じたら全部最近の書き方になおらないかな。・・・残念ながらなおらないと思うので、昔のエントリーを見る場合は、ちょっと気を付けたって下さい。何気に大掛かりな計画は有るけれど、計画がでか過ぎて中々どうにもこうにも。というかブログ書いてる暇有るなら、「お前アレやれよアレ。」ってお怒りの声が聞こえてきそうなので、アレに専念する為にまた大人しくしてるっぽいです。最近フッターで区切りが有る場合は、:first-child疑似クラスを使って対応するケースが殆どです。実際のサンプルも用意しました。サンプルサイトを見る XHTMLはこんな感じ。 <div id="f