CSSとJavaScriptを巧みに使用した面白いデモンストレーション -PushingPixels
PushingPixelsからPNG画像の影をコントロールするデモとアニメーションで二つの画像を表示するデモを紹介します。 dynamic PNG shadow 「dynamic PNG shadow」では左下のスイッチをオンにすると、その光源の位置に従ってロゴに影が表示されます。 また、ロゴと光源はマウスのドラッグ操作で移動させることができます。 Animated HDR Photo 「Animated HDR Photo」では真ん中のスライダーを移動させることで、二つの画像のビフォーアフターを表示することができます。 スライダーはアニメーション動作に対応しており、画像の任意の場所をクリックするとそのポイントにアニメーションでスライドします。
RedLine Magazine : スタイルシートの切替
スタイルシートの切替 文字サイズ可変がユーザー側で自由にできるように、文字サイズは制作者が固定すべきではない。 ブラウザの設定で文字サイズを自由に可変できるのは大変有効的だと思うのだが、実際その機能に気づいているユーザーばかりではない。 最近サイトの中に「文字を大きくする」「文字を小さくする」等のボタンを配置し、Javascriptを利用してcssを切替て文字サイズの可変を可能にしているサイトも多いように感じる。 cssを差し替えるということだが、テキスト関連のcss指定だけ別ファイルにしておくのも１つの手だし、テキスト部分だけ文字サイズを変えて単一のcssファイルで管理する方法でも構わない。管理のしやすさを考えれば前者がおすめめである。 もちろんスタイルシートを切り替えるJavascriptなので、デザインごとごっそり変更する事も可能。使い方はお好みで。 問題のcssを切り替えるJava
CSS+DHTML: ドロップダウンメニュー
※ サンプルのリンク先はありません。 ※ マウスなどのポインティングデバイスを持たないシステムではご利用頂けません。 メニューはリスト要素を使ってマークアップします。 最上部のul要素のクラス名を dropdown としてください。 複雑になりがちですので、記述ミスには注意が必要ですね。 <ul class="dropdown"> <li><a href="未設定">マジカル</a> <ul> <li><a href="未設定">妖しいページ</a></li> <li><a href="未設定">秘密のページ</a></li> </ul> </li> <li><a href="未設定">コミカル</a> <ul> <li><a href="未設定">アホなページ</a></li> <li><a href="未設定">ハイなページ</a></li> <li><a href="未設定">シャイ
CSSとJavaScriptで作るフォームエレメントのチュートリアル51 – creamu
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 C
[JS]jQueryのプラグイン33+1選 -2009年9月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 jSlickmenu CSS3を使った、ちょっと面白いナビゲーション。 Sexy Vertical Sliding Panel CS
[JS]リキッドレイアウト上のカラムの幅や数を自動調整するスクリプト -Smart Columns
表示されたブラウザの幅に合わせて、ぴったりになるようにカラムの幅や数を自動調整するスクリプトをSoh Tanakaから紹介します。
[JS]配置済みのリンクにドロップダウンを簡単に追加できるスクリプト
ページ内に配置したリンクに、リストで作成したドロップダウン型のナビゲーションを簡単に追加できるスクリプトをDynamic Driveから紹介します。 ナビゲーションに追加したデモ 配置できるナビゲーションは、オプションで不透明度、ディレイ時間、表示位置を調整することができます。 スクリプトの設置方法は、「anylinkcssmenu.js」「anylinkcssmenu.css」を外部ファイルで指定し、リンク要素のclassに「anchorclass」を記述します。 配置するナビゲーションは、divで括りclassに「anylinkcss」を記述し、任意のid（例：submenu1）を記述します。そのidと同じものをリンク要素のrelに記述します。 <textarea name="code" class="html" cols="60" rows="5"> <p><a href="http
スタイルシートやスクリプトなどのテクニックをまとめたフリーのeBook
スタイルシートの構造設計から、グリッド・フォーム・ナビゲーション・角丸などの実装例、データベースやAJAXの実践的なサンプルが豊富に掲載されているフリーのeBook「The Woork Handbook」を紹介します。 The Woork Handbook The Woork Handbookのテキストは英語ですが、キャプチャやコードが豊富に掲載されているため、英語が分からなくても理解できる箇所は多いと思います。 ダウンロードできる「The Woork Handbook」はPDFファイルで、現在配布されているv.0.1の目次は下記のようになっています。 スタイルシート データベース AJAX MooToolsやScriptaculous、他のJavaScriptのフレームワーク Blogger その他 フォント
チェックボックス、ラジオボックスをオシャレに表示するJS:phpspot開発日誌
Custom Checkboxes, Custom Radio Buttons, Custom Select Lists チェックボックス、ラジオボックスをオシャレに表示するJS。 次のようなチェックボックス、ラジオボックスにスタイルできるJSです。 <input type="checkbox" class="styled" /> のように、class="styled" で自動スタイルされます。 CSSを変更でデザイン変更可能です。 関連エントリ CSSデザインされたTextAreaサンプル inputのtype=fileをCSSでクールにスタイルするサンプル サイトのチェックボックス、ラジオボタンを可愛い感じにするためのJavaScriptライブラリ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://depthcode.com/2011/01/css-browser-selector.html
[JS]クロスブラウザ対応、背景をアニメーションで変更するスクリプト -Blend
HTML、CSS、JavaScriptの練習に最適な便利ツール『rendur』 - 100SHIKI ～ 世界のアイデアを日替わりで ～
IDEA * IDEA
Apple風のインターフェイスを実装するチュートリアル集