Webデザイナーのための25のコードスニペット（その2）

オリから2007年3月16日· 47コメント

私たちのコードスニペットシリーズの第2回では、あなたのWebデザインに組み込むことができますHTML、AJAXとCSSのより便利な部分を見てみます。あなたはパート1を逃した場合のことができますここでそれを参照してください。

スタイルを持つテーブル -それはそれのように思えないかもしれませんが、表形式のデータをスタイリングすると、多くの楽しみにすることができます。意味論の視点から、にいくつかのスタイルを結びつけるための要素は十分にあります。あなたは、セル、行、行グループと、もちろん、テーブルの要素自体を持っています。ちょうどISNA€™tのエキサイティングな段落にCSSを追加します。

CSSの影 -だから今年のカップルのために、人々はCSS3のbox-shadowのプロパティは、永続的に実際にどこでもWebブラウザに表示されてからわずか数ヶ月離れているように見えるという事実を回避する方法を見つけようとされています。ボックスの影は非常に一般的な設計要素であり、Web上でそれらを使用できることがお尻に本当の痛みはありません。

気密コーナー -ここで1つのイメージだけを使用して、角の丸いボックスを作成する方法について簡単に数があり、各コーナーのために、そのイメージをオフに設定。

DOMとCSSとの折りたたみテーブル -以下の表の各スクリプトは、テーブルが崩壊し、拡大できるようにするフッターの矢印画像を追加させる"footcollapse"と呼ばれるクラスを持っています。

3Dボックスのモデル図 - Hereâ€™saの事。イア€™VEは、背景色や画像などの要素がスタックされる順序を一緒にCSS初心者の方にどのようにパディング、ボーダー、マージンの仕事を示すではなく、非常に多くの図を見た。この穴を埋めるためにしようとすると、IA€™VEの図を描画します。

ドッキングボックス -ドッキング·ボックス（dbxが）アニメーションドラッグ'n'をドロップすると、スナップ·ツー·グリッド、要素の任意のグループに/非表示コンテンツの機能を表示を追加します。

CSSが送信ボタンを -いくつかの時間が今では、すべて知っているあなたが同じように、送信ボタンを扱うことができる方法については、任意のタグにはCSSでそれをスタイリングに来るとき、私たちは信頼できるCSSを使用して、その背景色、境界線とフォントスタイルを変更することができます。

PHPスタイルスイッチャー -あなたのスタイルシート切り替え喜びは、List Apartが提供スイッチャー、動的にページスタイルを変更するJavaScriptの部分を。それは、機能として、それは非常に残念なことに、JavaScriptとCookieを有効に両方を持っているユーザーに依存しています。 Thereâ€™sの非常に我々は、クッキーについては行うことができますが、我々は、PHPから少し助けを借りて、クライアント側の処理を避けることはできません。

二色sIFR - 2つの色のsIFRを実装する方法

キャプションのスタイルを作られたイメージ -問題は単純なものです。クライアントは、コンテンツ管理システムを介して自分のサイトにイメージを追加したいと考えています。彼らはそれが魅力的に見えたい、あまりにも箱型の表示されます（これはすべての激怒であるように、私たちは彼らが素敵な丸みを帯びたコーナーをしたいとしましょう）とその下にあるすてきなキャプションを持っていない。しかし、彼らはイメージエディタを（基本的なリサイズを超えた）を使用する方法やHTMLの編集方法を知りません。

シンプルなCSSイメージスイッチャー -これは軽量であり、標準に準拠した純粋なCSSイメージスイッチャーです。これは、ギャラリーまたは任意の同様の機能を使用することができる。

CSSを使用した動的な円グラフ -これは、サーバー側の画像ライブラリを使用せずにセミダイナミック円グラフを作成する例を示します。

ツリー表を複製する -狙いは、HTMLを使用してグラフィックのテーブルツリーを複製することです

Listamatic -あなたは単純なリストを取得し、根本的に異なるリストのオプションを作成するためにCSSを使用することはできますか？ Listamaticは、単純なリストに適用されるCSSの威力を示しています。

単純なアクセスの外部リンク -外部リンクを識別する方法

CSS要素のホバー効果 - CSSとHTMLだけを使用して

CSSは印刷するゴーイング - Youâ€™VEの前にそれらを見た：â€プリンターフレンドリーのためにここにœclickversionâ€または単語その旨を言ってリンクしています。これらのリンクのいずれかをフォローするたびに、別のレイアウトとまったく同じ情報を提示する別のドキュメント、おそらく別のマークアップをロードします。

CSSでドロップキャップ - dropcapのコードは単純ですが、私たちは少しそれを空想することができます。我々は、ルックをいじるためにインラインCSSを使用しています。

CSS：リストカレンダー順序付けられていない -これは、リストボックスのカレンダーです。それISNA€™tは最も意味の方法、それはfaily安定しているように思えます、それは完全にサイズが変更されます。をCourier Newなどの等幅フォントは、適切な比率を確保するために使用する必要があり、二つの文字を使用する必要があります。心の動的生成で調製した。

訪れたリンク -誰もが異なってリンクを訪問しません。ヤコブ·ニールソンのflunkiesはtheyâ€™VEはどこにいたショーの訪問者を助けるために古い学校の青と紫のコンボを使用しています。実際のデザインテイストを持つ人々ではなく、おそらくもっとおいしい色、またはフォントの太さのバリエーションを使用しています。

トップへリンクしてスマート戻る - このページのトップへ戻る linkâ€™sの目的は、迅速にWebページの先頭にビューポートを配置することである。時にはあなたは、コンテンツの高さが可変を持っており、特定のページには、ビューポートの高さよりも短い場合は、このリンクは不要です

CSSでパーセンテージを表示 -ウェブサイト上で柔軟なものにデザインのこの部分を回すことで、私は2つのオプションを見ました。 巧妙な CSS、またはâ€〜たくさんのImagesâ€™。私はImagesâ€™のâ€〜多くは悪い考えであると判断しました

控えめなSidenotes - 控えめなSidenotesそれはばかばかしいほど簡単にWebページやブログにsidenotesを組み込むことができますJavaScriptとCSSの簡単なミックスです。

CSSチートシート - CSSのチートシートは、すべてのセレクタ（CSS 2.1など）とプロパティのリストを、リマインダとリファレンスシートとして機能するように設計されています。これは、ボックスモデル、CSSユニットのユニットリファレンスおよびCSSが引当金を作る様々なメディアタイプの視覚的な例が含まれています。

CSSナビゲーションテクニック - 37異なるナビゲーション·バーのまとめ

ダウンロードJN0-522は、Webデザインに組み込むことができるHTML、AJAXとCSSアプリケーションについて学ぶためのチュートリアル。使用したWeb設計の専門家になる642から566までのビデオと70から433のデザインガイドを。

このチュートリアルではお役に立ちましたか？

それを共有！

チュートリアルをお見逃しなく！

電子メールでTutorialBlogを購読する：

またはグラブRSSフィードを！

オリについて
オリバーデールはKoocメディア、Webアプリケーション、オンラインコミュニティに特化し、英国ベースのWeb会社の実行Wordpressのチュートリアル＆ Wordpressのプラグイン。

"Webデザイナーのための25のコードスニペット（その2）"〜47の応答

キースDsouza - http://techie-buzz.comは言う：
17:51に2007年3月16日
ただパート1のようなクールなパート2岩
リオ- http://www.rioleo.orgは言う：
午前2時58分に2007年3月17日
Spectafantasticular。そしていくつかの。
キース·ドネガン- http://www.code-sucks.com/は言う：
午前4時10分に2007年3月17日
てください。Javascriptを今はい
R.Daneel - 言う：
午前10:36 2007年3月17日
はい、スニペットの別の超便利なリスト！
どうもありがとう！
Let 'sは、現在いくつかのJavaScriptがあります！
オリゴ- http://tutorialblog.orgは言う：
午前11:59 2007年3月17日
Javascriptをwantersのために - あなたのためにそこに荷重 - Ajaxのチュートリアルについての記事をチェックしてください！
http://tutorialblog.org/100-ajax-tutorials-and-resources/
マック- http://www.userfriendlymyass.comは言う：
13:39に2007年3月17日
良いもの...ありがとうございました。
gleuch - http://www.gleuch.comは言う：
17:11に2007年3月17日
sifr3は、複数の色だけでなく、様々なスタイルとサイズを可能にします。
http://novemberborn.net/sifr3
jayoh - http://jayoh.sqeez.orgは言う：
18:58に2007年3月17日
ブラボー！
マイケルジョシュ- http://blog.michaeljosh.comは言う：
19:23に2007年3月17日
このリストについては、どうもありがとうございました。それは明確では同様にWebデザイナーやコーダーのために読まなければなりません。乾杯。
zoel - http://19fdesign.comは言う：
16:18に2007年3月18日
ThanXへUが、どのようにCSSのフレームワークについて、コードplzの？
ニール·ギャロウェイ- http://thoughtsfrommylife.comは言う：
19:51に2007年3月19日
素晴らしいコレクション。私はカスタムは、自分のブログサイトを構築し、あちこちでいくつか調整してきました。改善するためのものを探したときにこれらのコレクションは素晴らしいです。
kost - http://reg.kost.ru/は言う：
2:40 PMで2007年3月23日
ありがとう！
特にCSSナビゲーションテクニックのために。
tracce - http://www.fnight37.org/tracceは言う：
12:29に2007年4月10日
興味深いコメント..
ブンデスリーガのブログ- http://www.bundesliga-blog.deは言う：
18:16に2007年5月7日
ナビゲーションリストには、スタイルする必要があるたびに私はしばしばListamaticに私の友人を参照してください。
アンドリュー- http://surfto.suentro.biz/amrak-trains.htmlは言う：
20:50に2007年5月19日
良いWebサイト！あなたの仕事していただきありがとうございます！私はすべての私の友人にあなたをお勧めします...私のサイトを訪問し、コメントを追加
ジャック·ニコルソン- http://www.qdosinternet.com/は言う：
12:00 pmに2007年7月4日
あなたは、このウェブサイトをチェックアウトすることができますし、CSS、スクリプトされた方法アイデアを得ることができます...
スージー- http://www.tutsbuzz.com/en.htmlは言う：
午前四時12分に2007年8月18日
再びコレクションをいい、おかげで...
shaz - http://www.miraztutorials.comは言う：
午前11:37 2007年9月22日
これらは本当に使いやすいです。
Rencontre asiatique - http://www.asieweb.comは言う：
午前6時27分に2007年9月26日
私はその1を読んで、今その2、それは良いチュートリアルです。
カムbalkon - http://www.ozgunbalkon.comは言う：
10:00 PMに2007年10月2日
とても素敵なThanXへ
sohbet - http://www.sohbet.inは言う：
午前2時26分に2007年10月9日
再びコレクションを素晴らしい、感謝
チャット- http://www.hobichat.comは言う：
午前二時27時2007年10月9日
goooddベリベリ）））））
hikaye - http://www.pornokolik.netは言う：
18:06に2007年10月16日
erotich hikaye
sohbet - http://www.sohbetiniz.netは言う：
午前1時36分に2007年10月19日
多くのおかげで..
Sohbet - http://www.sohbeth.comは言う：
17:42に2007年10月27日
すべての良いのthanx
ogretmenler sitesi - http://www.ogretmenlernet.comは言う：
16:56に2007年10月28日
あなたに感謝します
A-gretmenler Sitesi [http://www.ogretmenlernet.com]
Sohbet - http://www.sohbeth.comは言う：
午前9時54時2007年10月29日
私はWebデザイン部1のスニペットを見てきましたが、私はパート2が既に出ていた知りませんでした。ニース。
Sohbet [http://www.sohbeth.com]