木曜日, 9月 02, 2010
jQuery プラグイン集
木曜日, 6月 10, 2010
金曜日, 4月 09, 2010
ダウンリストCSS
http://www.lwis.net/free-css-drop-down-menu/
General purpose theme
- Simple horizontal
- Simple vertical left-to-right
- Simple vertical right-to-left
- Simple horizontal upward
- Simple horizontal linear
- Simple limited (for IE5.*)
- Advanced/Ultimate horizontal
A/U vertical left-to-right
A/U vertical right-to-left
A/U horizontal upward
A/U horizontal linear
Flickr full theme
Download & Support
This CSS Drop-Down Menu is free and licensed under the GNU General Public License.
金曜日, 2月 26, 2010
木曜日, 2月 25, 2010
CSS3対応ブラウザだとより美しいドロップダウン型のナビゲーション
上記のキャプチャはCSS3対応ブラウザ（Chrome）のもので、非対応ブラウザでも下記のように正常に動作します。
CSS3非対応ブラウザ（IE7）でのキャプチャ
火曜日, 2月 23, 2010
ｊQueryでクールなフォームエレメント実装プラグイン「Uniform」
Uniform - Sexy forms with jQuery
ｊQueryでクールなフォームエレメント実装プラグイン「Uniform」というのが公開されています。
これを使うと次のようなカッコいいフォームが簡単に作れるみたいです。
初期化が、uniform() メソッドを呼び出すだけで超簡単です。
$("select, input:checkbox, input:radio, input:file").uniform();
ｊQueryでクールなフォームエレメント実装プラグイン「Uniform」というのが公開されています。
これを使うと次のようなカッコいいフォームが簡単に作れるみたいです。
初期化が、uniform() メソッドを呼び出すだけで超簡単です。
$("select, input:checkbox, input:radio, input:file").uniform();
水曜日, 2月 10, 2010
CSS3で何ができるの？ という時にみておきたいサイト集
IEで使えないものもあるけれど、とても参考になります。
CSS3 Click Chart by Impressive Webs
CSS3で何ができるか、どのように実装するかが一目で分かるサイト。
Practical Uses of CSS3
角丸やシャドウをはじめ、CSS3のベーシックなコードとサンプルが豊富に掲載。
CSS3 Techniques You Should Know
CSS3を使用する上で知っておかなければならないテクニックのコードとサンプルを掲載。
Multiple Backgrounds and CSS Gradients
CSS3のMultiple BackgroundsとCSS Gradientsの使い方。
50 Brilliant CSS3/JavaScript Coding Techniques
CSS3を使用したレイアウト、ナビゲーション、アニメーション、グラデーションなどの実践的なテクニック集。
Using CSS3 Visual Effects
CSS3を使用した多彩で面白いビジュアルエフェクト集。
CSS3 – animated menus
スライドのアニメーションが気持ちいいナビゲーション。
CSS3 – menus
fade in / border radius / drop shadow / gradient fill
角丸やシャドウ、グラデーションが美しいナビゲーション。
CSS3 – Zoom Gallery
ズーム機能が楽しい画像ギャラリー。
CSS3 Photo-Slide
滑らかにスライドする画像ギャラリー。
CSS3 – Buttons – no graphics and no extra markup!
画像を使用しなくてもここまでできるボタン。
CSS3 Photo-Info
画像の説明文をスタイリッシュにアニメーションで表示。
CSS3 – Fitted Tabs
グラデーションとドロップシャドウと角丸でタブをスタイリング。
CSS3 – menus
Multi-column slide / border radius / drop shadow / gradient fill
CSS3を使用したメガドロップダウン。
CSS3 Animation – Just for fun
CSS3で実装したマンガのアニメーション。
CSS3 Duff Roll
背景のテクスチャをアニメーション。
CSS3 Parallax scrolling
CSS3でパララックス（視差）のエフェクト。
CSS3 – menus
'Drop Everything'
画像を使用せずに実装するタブ型コンテンツ。
月曜日, 2月 08, 2010
月曜日, 1月 11, 2010
土曜日, 1月 09, 2010
月曜日, 10月 26, 2009
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集
1. サイトのナビゲーション風にデザインされたリスト
2. 番号付き＆番号の横に縦のラインがはいった見やすいリスト
3. 矢印画像を使ったリスト
4. iPhoneスタイルのクールなボックスリスト
5. ツリーっぽい形式にできるリストデザイン
6. 複数行にしてテキストっぽく表示できるテキストリスト
7. ワンラインにして、カンマを付与するリストデザイン
8. カーソルを合わせたときに、アイテムが回転するCSS3のフィーチャーを使ったリストと、なんとも素晴らしいリストデザインのサンプルですね。各々のソースコードは以下より参照してください。
2. 番号付き＆番号の横に縦のラインがはいった見やすいリスト
3. 矢印画像を使ったリスト
4. iPhoneスタイルのクールなボックスリスト
5. ツリーっぽい形式にできるリストデザイン
6. 複数行にしてテキストっぽく表示できるテキストリスト
7. ワンラインにして、カンマを付与するリストデザイン
8. カーソルを合わせたときに、アイテムが回転するCSS3のフィーチャーを使ったリストと、なんとも素晴らしいリストデザインのサンプルですね。各々のソースコードは以下より参照してください。
火曜日, 9月 22, 2009
CSSとJavaScriptで作るフォームエレメントのチュートリアル51
1st webdesignerで、CSSとJavaScriptで作るフォームエレメントのチュートリアルがたくさん紹介されています。
いくつかご紹介。
Changing Form Input Styles on Focus with jQuery。フォームの中にラベルを表示して、フォーカス時にラベルを消してくれる
Turn postcard photo into a stunning comment form using CSS古いポストカードを使ってコメントフォームをつくったようなデザインのチュートリアル
CSS Tableless Formテーブルを使用しないフォームデザイン。floatとネガティブマージンを使用
テクニカルで気の利いたものが多いですね。
その他は以下からどうぞ。
» 51 Form Element Resources and Tutorials Using CSS And Javascript
火曜日, 8月 18, 2009
JavaScriptで作られたオンブラウザエディタ
JavaScriptで作られたオンブラウザエディタです。
これをＡｉｒに組み込めば、TextAreaでのＨＴＭＬのややこしい修正処理をパスできる。
» TinyMCE web上で最も有名なテキストエディタの一つ
» FCKeditor TinyMCEに比べて軽い。ファイルマネージャーとスペルチェッカーが優れている
» YUI Rich Text Editor モバイルアプリを作るならおすすめしたいエディタ
» WIMeditor CSSのマークアップにフォーカスしたエディタ
» Xinha MathMLをサポートしている特徴を持つエディタ
その他のリストは以下からどうぞ。
» 8 Online Text Editors To Consider For Your Projects
これをＡｉｒに組み込めば、TextAreaでのＨＴＭＬのややこしい修正処理をパスできる。
» TinyMCE web上で最も有名なテキストエディタの一つ
» FCKeditor TinyMCEに比べて軽い。ファイルマネージャーとスペルチェッカーが優れている
» YUI Rich Text Editor モバイルアプリを作るならおすすめしたいエディタ
» WIMeditor CSSのマークアップにフォーカスしたエディタ
» Xinha MathMLをサポートしている特徴を持つエディタ
その他のリストは以下からどうぞ。
» 8 Online Text Editors To Consider For Your Projects
月曜日, 8月 17, 2009
ＣＳＳでのリスト表示
5 CSS tricks with lists | Pieter Beulque
ul, ol, dt などのリストを使った各種テクニック集が紹介されています。
(1) 数値部分とリスト部分のデザイン分け
(2) メニュー風のリスト作成
(3) 最後の要素がフェードアウトするリスト作成
(4) 飲食店のメニュー風にスタイルされたリスト作成
(5) １つのリスト要素を複数行にするリスト作成
HTML、CSSがサンプルとして公開されています。
知っておくと便利そうなテクニックですね。
関連エントリ
これを使うと、写真をＣＤジャケットに入れたり、ＣＤレーベルにしてくれる便利もの。木曜日, 7月 09, 2009
サイトをかっこよくするCSSテクニック10
WEB HOSTINGというサイトで、サイトをかっこよくするCSSテクニックが紹介されています。
ざっといくつかご紹介。
» Image gallery with hover box preview
画像マウスオーバー時に拡大表示してくれる
» Alert Box
シンプルでクールなアラートメッセージデザイン
» CSS Sliding Sprite Window
CSSスプライトで背景画像をクールに切り替える
» Gradient text effect using CSS purely
CSSを使ってテキストにグラデーションをつける
» Creating a sliding image gallery
水平・垂直方向のスライドするイメージギャラリー
» CSS rollover buttons
JSを使わずにCSSスプライトでロールオーバーボタンを実装
結構いい感じのがそろっていますね。
その他のリストは以下からどうぞ。
登録:
投稿 (Atom)