複数の画像を一つにまとめてCSSで表示·SmartSprites MOONGIFT
Webサイトでは一度の表示であっても、複数のコネクションで様々なデータが送信される。JavaScript、CSS、画像、Flashなどなど。コネクションが増えればそれだけ表示に時間がかかり、ユーザビリティは悪くなる。 コマンドラインで実行して連結する GoogleやAmazonでは回避策として複数の画像を一つにまとめ、CSSを使ってずらして表示する手法が使われている。それを実現するのがSmartSpritesだ。 今回紹介するオープンソース・ソフトウェアはSmartSprites、画像を連結してコネクションを改善するライブラリだ。 SmartSpritesはJava製のソフトウェアで、別途PHP版も提供されている。ルートディレクトリを指定すると、そこ以下にある画像ファイルを探索し、それらを結合してくれる。同時にそれを元のように表示するためのCSSも生成される。後は画像をそのまま表示する代わ
画像ファイルなしでグラデーションを可能にするCSS生成ツール公開しました - Cyokodog :: Diary
画像ファイルを使用しないでグラデーションをかける方法を調べてみました。まずIE専用な書き方になりますが、 filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#5588ff,EndColorStr=#ffffff); のような記述でグラデーションがかけられます。確かExt.jsのWindowのドロップシャドウにも使用されてたと思います。次にIE以外のモダンブラウザですが、 background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAYAAABHLFpgAAAAP0lEQVQYlWMI7fj/n4mRkYGBiQlOIHGZULkIJUwk6ECTRRfDYh6SEiJ1oDsSpzNIdzh
CSSと一枚の画像だけで透明感のある角丸パーツをつくる方法 | S i M P L E * S i M P L E
※ 下記の記事に誤りがありました。謝罪＆修正記事はこちらへ。 あいかわらず流行っている角丸系パーツですが、新しいテクニックが紹介されていたのでエントリー。 » Even More Rounded Corners With CSS – Schillmania.com 一つの透過処理されたPNG画像とCSSだけで下のようなパーツを作れてしまいます。 PNG画像を縮小したりしているみたいですね。もちょっと複雑なデモページはこちら。スクリプトのダウンロードもできます。 » Even More Rounded Corners (Fluid, Alpha-transparent, Single Image Approach) Using CSS 透過処理もされていてなかなかきれいですが、一長一短があるアプローチなので用途に合わせてお使いください。
れぶろぐ - [CSS][JavaScript] VML を利用して IE で border-radius が使えるようにする
■ VML を利用して IE で border-radius が使えるようにする 元ネタはこれ。 IEでもborder-radiusっぽいことをするbehavior IE の機能不足を、IE の独自機能で補う、というアプローチが実に素敵だが、 残念なことに後方互換モードでしか使えないという制限がある。 でもきっとなにか方法があるはずだと思ったので、いろいろ調べつつ、 標準準拠モードや IE7 でも問題なく使えるように手を加えてみた。 サンプル (border-radius.html) ダウンロード (border-radius.htc) 標準準拠モードで使えない これは Microsoft のサポート技術情報に対処法が載っていた。 VML element is not displayed in strict standards-compliant mode in Internet Expl
印刷用 CSS で背景画像を印刷させる方法 - lucky bag
media="print" な印刷用 CSS を用意している場合、そこに背景画像を設定していたとしても印刷されない。ヘッダに画像を使って CSS で文字を非表示にしているウェブサイトの場合、ユーザーがそのサイトのヘッダ画像を含めて印刷したいのに、タイトルが味気ないテキストだけで印刷されるのを不満に思うとしたら、どう解決すれば良いのかってことで下記リンク先のバッドノウハウ。 wg:Printing CSS background images (sort of) カラクリを大雑把に言うと、印刷用 CSS の指定で当該箇所を display:list-item; にして、list-style-image に印刷させたい画像を指定するって感じ。以前紹介した「letter-spacing を使って背景画像置換」を使って、テキストを非表示にするんだけど、これって IE だと 1 バイトの文字はうまくい
CSSレイアウトテクニック"偽装絶対指定" - A List Apart | エンタープライズ | マイコミジャーナル
A List Apart - Faux Absolute Positioning CSSでポジションを指定する方法は大きくわけてfloatを使う方法と絶対位置で指定する2つの方法がある。多くのサイトではヘッダとフッタを伴うカラムレイアウトを採用していることが多い。絶対位置指定では縦方向にコンテンツが成長するタイプのレイアウトでフッタの位置を指定できないという問題がある。このためfloatレイアウトを使うわけだが、こちらでは予期しないコンテンツの内容変更によって予定していたポジションからずれてしまうことがある。とくにIEではwidthの挙動に問題があるため制御するのがきわめて難しいという状況だ。 Eric Sol氏はこうした現状に対して新しい指定手法を考案したとし"Faux Absolute Positioning"としてA List Apartにおいて紹介している。同氏はより自由にドラッグ
CSS - dtをfloatする場合の注意点 | Try | d-spica
dtをfloatし，margin, padding, borderなどをあてる場合の注意点です。 Tried at 2008-05-12 まず，マークアップは次の通り <dl class="recent"> <dt>2008-05-12</dt> <dd>ページ5を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-10</dt> <dd>ページ4を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-07</dt> <dd>ページ3を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> <dt>2008-05-06</dt> <dd>ページ2を更新しました。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> <dt>2008-05-04</dt>
scale nine : skins and themes for flex and adobe air
Give your Flex or AIR application a new look. ScaleNine provides skins and themes for Flex and AIR created by the community using the Adobe Creative Suite of tools and Flash Catalyst. Check out the Gallery to see the latest submissions or gain a little inspiration from the Showcase area of great looking applications. Browse the Gallery
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c
クロスブラウザでちゃんと動作するCSSボタン集サイト「CSS Buttons」:phpspot開発日誌
CSS Buttons is the Plug and Play Solution for Web Designers and Developers - CSS Buttons.net CSS Buttons will allow designers to quickly implement consistently looking, cross-browser, buttons regardless of the element used. クロスブラウザでちゃんと動作するCSSボタン集サイト「CSS Buttons」。 CSS Buttons を使えば、Win,Mac,Linux上の色々なブラウザでちゃんと動作するボタンが実装できるようです。 ブラウザのボタンに関するレンダリングの差異を吸収するCSSが含まれています。 a, button, input タグによるボタン実装が考えられて
CSS2 Specification 順で sort するスクリプト - 2nd life (移転しました)
http://rails2u.com/misc/vim_css_sort/ (Flash 動画) hail2u.net - Weblog - CSS2 Specificationでのプロパティの出現順序 のエントリーを読んで、へー普段全く持って順番とか気にしてなかったけどこんなポリシーもあるんだ、とちょっと感心しました。 というわけで vim の場合、フィルタを使って特定順序でソートしてくれるプログラムがあればエディタ上から簡単にソート可能なので作ってみました。 http://rails2u.com/misc/vim_css_sort/sortcss.txt *1 このファイルを適当なパスが通ったディレクトリに sortcss などの名前で保存して実行権限を与え、.vimrc などに nmap gso vi{:!sortcss<CR> vmap gso i{:!sortcss<CR>とか書
各種CSSメニューをカスタマイズしてダウンロードできる『CSS MENU MAKER』 | 100SHIKI.COM
このサイトでメニューを作って張ってみたんですが メニューがTOP画像の上に表示されるのです。 どうすればよいでしょうか？ Top Tools Yotube Music Diary これがHTMLで ul#menu { margin:0; padding:0; list-style-type:none; width:auto; position:relative; display:block; height:36px; font-size:12px; font-weight:bold; text-transform:lowercase; background:transparent url(“http://error911.up.seesaa.net/image/bg.jpg?20090326204938″) repeat-x top left; font-family:”Trebuchet
使われていないCSSセレクタを発見することが可能なFireFox拡張「Dust-Me Selectors」:phpspot開発日誌
使われていないCSSセレクタを発見することが可能なFireFox拡張「Dust-Me Selectors」 2007年08月03日- Dust-Me Selectors Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors. 使われていないCSSセレクタを発見することが可能なFireFox拡張「Dust-Me Selectors」。 インストールするとFirefoxの右下に次のようなアイコンが表示されます。 クリックすると、次のように、表示中のページで使われていないCSSセレクタを表示してくれます。 (ファイル名、行数も表示してくれます) サイトを作っていると、CSSが次々と肥大化して使わないCSSもそのまま、ということがありますが、このツールを使えば不要なC
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]overflowとpositionを使うとスクロールできなくなる(IE)![[CSS]overflowとpositionを使うとスクロールできなくなる(IE)](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
Loading...
CSSハックしない、JavaScript使わないCSSの教科書みたいなテンプレ*ホームページを作る人のネタ帳
http://www.stylish-style.com/csstec/hi-level/domannaka.html
ScaleNine : Skins and Themes for Flex and AIR
http://flexonrails.net/stylescreator/public/
WordPress › Error