CSSで様々なアクセサリをつける装飾CSS＋ｊQuery*ホームページを作る人のネタ帳
どのように表示するのか 以下のような感じで、Divとclassによって何の装飾もない画像に、ワンポイントのアクセサリーをつけるというもの。 サンプルデモが以下。 CSS Decorative Gallery クリップや、映像マーク、セロハンテープ、光沢など、様々な装飾が可能。 セロハンテープ テープで写真を貼り付けたように見せてくれる装飾。 サンプルデモ ビデオマーク Diggなんかでよく見かけるような小さなアイコンを画像に付加できます。 サンプルデモ ポインタを合わせると吹き出しが出る ポインタを合わせると吹き出しが画像から出てきます。 サンプルデモ 付箋付きクリップ 付箋とクリップの装飾。 サンプルデモ 光沢の演出 透Png画像を使って写真に色々な演出も。 サンプルデモ IE7のPng透過問題も解決するものが同梱されています。 様々なブラウザに対応しているようで、実用性も高いかも。 以
マイクロソフト製サイト作成ソフト「Expression Web」日本語ベータ版
以前まで「Microsoft Expression Web Designer」という名称だったモノで、日本語ベータ版は無料で利用できます。ウリとしては、Web標準へ準拠しており、なおかつ洗練されたCSSページレイアウトが可能という点。 個人的には、Wordで作ったHTMLを最適化する機能やCSSなどのチェック機能、アクセシビリティの検査機能がなかなかお役立ち。使用感はDreamweaverっぽい。 というわけで、ダウンロードして実際に動かしてみました。 Microsoft(R) Expression(R) Web 日本語ベータ版 起動にはMicrosoft .NET Frameworkが必要で、上記ページにダウンロード用のリンクが用意されています。 インストール可能な環境はWindows XP + SP2、Windows Server 2003 + SP1、Windows Vista。推奨
Flash,JavaScript,CSS,PHPでグラフ作成のためのライブラリ色々:phpspot開発日誌
16 librairies et scripts pour g・・er des graphiques sur Internet | Simple Entrepreneur Flash,JavaScript,CSS,PHPでグラフ作成のためのライブラリ色々。 Flash amCharts Maani JavaScript EJSChart PlotKit AjaxMGraph CSS Css For Bar Graphs Vertical Bar Graphs with Css and Php Bargraph Dynamic Pie Chart with Css Css Vertical Bar Graphs Displaying percentages グラフ画像生成ライブラリ JFreeChart Artichow JpGraph Chart Director Graphviz Ima
[CSS]画像をクリップや額縁でデコレーションするスタイルシート
Web Designer Wallのエントリーから、画像にテープ、ピン、クリップ、テキスト、フレームなどを使用してデコレーションするスタイルシートを紹介します。
小粋なインターフェースを実現する25のコード （パート4） | S i M P L E * S i M P L E
先日ご紹介した第三弾に続き、第四弾。さて、いつまで続くのやら・・・と思いつつエントリー。 小粋なインターフェースを実現する25のコード 小粋なインターフェースを実現する25のコード （パート2） 小粋なインターフェースを実現する25のコード （パート3） 今回も素敵なコードが揃っていますよ。いくつかご紹介。 ↑ CSSでアラートメッセージを作る方法。ウェブサービスなどにいいですね。 ↑ こうしたメニューのコードをブラウザ上で作れるジェネレーター。 ↑ スライド式のナビゲーションメニュー。 新しくウェブをつくるときに参考にしたいですね。ご利用は以下からどうぞ。 » 25 Code Snippets for Web Designers (Part4)
101CSS技術の続き（part2）＋CSS関連エントリおまけ*ホームページを作る人のネタ帳
101のCSS技術というエントリから英語が苦手な人向けのエントリ抜粋 前回記述したものとあわせて使うとより便利かもしれません。 101個無いということに一言だけ触れていたのですが、リンク先のNoupe氏の話だと『基本』という意味がこめられているようです。 なんにしても第2弾がでましたので、101個狙って欲しいところではありますね。 101 CSS Techniques Of All Time- Part2 例によって英語が苦手な人でもなんとななりそうなエントリを抜粋してご紹介。 今回は数あるリンクから5つを厳選しています。 ブロックリンクの説明 How to Create a Block Hover Effect for a List of Links | Smiley Cat Web Design ポイントをあわせることで、CSSによってわりあてたブロック自体にリンクを発生させる方法。
CSSでお店のメニュー風なページを作成:phpspot開発日誌
CSS - A Recipe for Success If you look at most restaurant menus (or recipes) you will see the dish described on the left hand side followed by a dotted line that continues to the right side of the menu where the price is situated. Have a look at Figure 1 to see what I mean. CSSでお店のメニュー風なページを作成。 CSSで次のような、お店のメニューとプライスを書いたようなページを作成するチュートリアルです。 実際のデモページはこちら マークアップも次のように美しく作れます。 <ul> <li> <p><em>Lorem
CSSを使ってカッコいい円形メニューを作る:phpspot開発日誌
metal.ize - tutoriales Este es un peque・ experimento con CSS que muestra un men・circular con los elementos a su alrededor.CSSを使ってカッコいい円形メニューを作るサンプル。 次のような円形でアイコンにカーソルを合わせるとツールチップが表示されるような円形メニューのサンプルが紹介されています。 尚、紹介したページの言語は英語ではないのですが、解説ページのサンプルコードを読みつつ原理を理解するとよいでしょう。 HTMLがリスト要素になっていて綺麗なHTMLになっているのが特徴。ＣＳＳをオフにすると次のようなリスト要素の見栄えになります。 Flashや画像のクリッカブルマップでこういったナビゲーションを作るのは簡単そうですが、リスト形式のものはなかなか無かった気がします。
固定幅ベースの elastic レイアウトサンプル
elastic レイアウトと言っても、固定幅ベースか可変幅ベース（とは言っても min、max-width による半固定だけど）のどちらかからのアプローチになるとは思う。当サイトでは、ここ1年半ほど可変幅ベースの elastic レイアウトを採用しているんだけれども、ちょっと思い立って固定幅ベースの elastic レイアウトのサンプルを 3 つほど作ってみた。 文字サイズの変更に追随する elastic レイアウト 作ったのは 600px（640×480向け）、780px（800×600向け）、960px（1024×768向け）の幅をデフォルトで持っていているレイアウト。それぞれ、だいたいどれくらいの幅を指定すれば良いのか調べたかったってのがサンプルを作った主な理由。ブラウザの表示メニューなどから文字サイズを変更すると、それに追随してレイアウトの大きさも変化する。内包するカラムを黄金比
CSSの便利ツール集:phpspot開発日誌
CSS Tools CSSの便利ツール集。 Em Calculator - ピクセル(px)とemの対応を計算することが出来ます その他オプティマイザ Clean CSS - CSSのオプティマイザ. CSS Tweak - CSSのオプティマイザその２ Online CSS Optimizer - CSSのオプティマイザその３ W3C CSS Validator - CSSバリデーター その他、便利なCSSツールのリスト。 どれもWEBで使えるのでＣＳＳ開発に便利ですね。 関連エントリ CSSデザインのページを作る際のスタイルガイド クールなCSSサイトをチェックできる『CSS Allstar』
全てのブラウザで同じに見える必要はないし、それは不可能で間違ってる - 氾濫原
だって、ブラウザには、画像を表示できないブラウザとかがあるんだもんね。IE も Fx も Opera も、そういう意味では同じような違いで、Fx では先行実装を使って段組になってよみやすくなっていたり、IE ではのっぺりだったり、そういうのがあっていいはず。なのに、一個の表示に統一しないといけないみたいな、わけわかんないのに縛られたりする。別に違ってていいと思う。 あと Web と紙は違うから、違うアプローチの仕方 (可変レイアウト) をすべきなのに、紙と全く同じスタンスで作るから、問題になる。いろんな UA にむけてデザインするのがウェブデザインじゃないの？ 今のウェブデザイナーは殆どウェブデザイナーじゃないよね。そんなだから「ウェブデザイナー(笑)」みたいになるんだ。 しかし、ウェブデザイナーでもなんでもない自分がごたごたいうのもおかしいので、あれなんだけど、最近どうも甘く考え気味 (
正しい知識を得たい人の爲のCSS2リファレンス
作者ホームページサービス（hp.vector）は終了いたしました。 長らくのご利用、ありがとうございます。 ご不明な点があれば、お問い合わせページをご覧の上、お問い合わせください。 ※15秒後にトップページに戻ります。 (c) Vector HOLDINGS Inc.All Rights Reserved.
CSSとJavaScriptでアニメーションがカッコいいメニューを実装「FreeStyle Menus」:phpspot開発日誌
CSSとJavaScriptでアニメーションがカッコいいメニューを実装「FreeStyle Menus」 2006年10月04日- FreeStyle Menus Demonstration This script is a highly flexible means of converting HTML content into powerful popup menus, using either nested lists or DIV tags for menu data, and following best practice guidelines for powerful and accessible menus. CSSとJavaScriptでアニメーションがカッコいいメニューを実装「FreeStyle Menus」。 ブラウザ上で動くWindowsのメニュー風のUIは結構見かけ
文字関係のCSSサンプル - CSSTYPE - web safe typography on screen for pixel perfectionists
This domain may be for sale!
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.dhtmlgoodies.com/scripts/css-lookup/css-lookup
デザイナー必見。CSS デザインで被リンクを獲得する方法 | 住 太陽のブログ
*LOVE IS DESIGN* - ちょっとしたメモ風のCSSデザイン
簡単にブラウザ別CSSを導入するJavaScript （CSS Browser Selector） - youmos
http://www.designwalker.com/2007/04/tlbox.html
usrb.in