memo.xight.org

日々のメモ

カテゴリ : CSS

3ページ目 / 全4ページ

userContent.css で Apache2 の server-status を見やすくする

使用前

クリックして拡大

使用後

クリックして拡大

userContent.css

@-moz-document url-prefix("http://localhost/path/to/server-status") {
	h1 {
		maring: 0;
		padding: 10px;
		color: #fff;
		background-color: #000;
	}
	td,th {
		padding: 5px;
		border: 1px #eee solid;
	}
	th {
		color: inherit;
		background-color: #eee;
	}
	pre {
		padding: 10px;
		color: #fff;
		background-color: #000;
	}
}


Reference

Firefox まとめサイト - usercontent.css
http://firefox.geckodev.org/?usercontent.css

CSSを使ってキーボード入力をアイコンのように表示

Source

kbd {
	color: #333333;
	background-color: white;
	text-align: center;
	border-left: 1px solid #cfcfcf;
	border-top: 1px solid #cfcfcf;
	border-right: 2px solid #666666;
	border-bottom: 2px solid #666666;
	-moz-border-radius: 4px 4px 4px 4px;
	padding-left: 1px;
	padding-top: 0px;
	padding-right: 2px;
	padding-bottom: 0px;
	margin-left: 2px;
	margin-right: 2px;
	vertical-align: top;
	font-family: sans-serif;
}

Sample

Ctrl+Alt+Del

Reference

にわか鯖管の苦悩日記 - 2006-01-11 - CSSを使ってキーボードのアイコンっぽく表示させる
http://kikuz0u.x0.com/td/?date=20060111#p02

via

cl.pocari.org - 2006-01-11
http://cl.pocari.org/2006-01-11-9.html

Cheat Sheets Collection

Reference

Perl Cheat Sheet
http://juerd.nl/site.plp/perlcheat
Perl Cheat Sheet
http://ali.as/devel/cheatsheet.html
Perl Cheat Sheet
http://goldenink.com/perl/perlcheat.html
PHP Cheat Sheet
http://www.ilovejackdaniels.com/php/php-cheat-sheet/
JavaScript Cheat Sheet
http://www.ilovejackdaniels.com/javascript/javascript-cheat-sheet/
CSS Cheat Sheet
http://www.ilovejackdaniels.com/css/css-cheat-sheet/
mod_rewrite Cheat Sheet
http://www.ilovejackdaniels.com/cheat-sheets/mod_rewrite-cheat-sheet/
Vim Commands Cheat Sheet
http://bullium.com/support/vim.html
Cheat Sheet Roundup
http://www.petefreitag.com/item/455.cfm

背景に関する指定がprintメディアに反映されない

問題

background-repeatプロパティにrepeat以外の値を指定すると,背景が印刷されない。

解決法

背景が指定された要素の幅(widthプロパティ)または高さ(heightプロパティ)
を明示すると背景画像が印刷されるらしい。
が,なぜか印刷できない。

Reference

Internet Explorer (Windows) CSSバグリスト - 背景に関する指定がprintメディアに反映されない
http://cssbug.at.infoseek.co.jp/detail/winie/b042.html

理想的なサイトマップ

Summary

<ul>と<li>だけでサイトマップを表現.
lastitem クラスがミソ.

HTML Source

<ul id="linkList">
	<li>
		<a href="/">Home</a>
		<ul>
			<li>
				<a href="/1/">2nd - 1</a>
				<ul>
					<li>
						<a href="/1/1/">3rd - 1</a>
					</li>
					<li>
						<a href="/1/2/">3rd - 2</a>
					</li>
					<li class="lastitem">
						<a href="/1/3/">3rd - 3</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="/2/">2nd - 2</a>
				<ul>
					<li>
						<a href="/2/1/">3rd - 1</a>
					</li>
					<li>
						<a href="/2/2/">3rd - 2</a>
					</li>
					<li class="lastitem">
						<a href="/2/3/">3rd - 3</a>
					</li>
				</ul>
			</li>
			<li class="lastitem">
				<a href="/3/">2nd - 3</a>
				<ul>
					<li>
						<a href="/3/1/">3rd - 1</a>
					</li>
					<li>
						<a href="/3/2/">3rd - 2</a>
					</li>
					<li class="lastitem">
						<a href="/3/3/">3rd - 3</a>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>


CSS Source

ul#linkList ul {
	margin-left:0;
	margin-bottom:1em;
	padding-top:0.3em;
	background:url("first-item.png") 20px 0px repeat-y;
	line-height:1;
}

ul#linkList li{
	list-style: none;
}

ul#linkList ul li{
	margin:0.3em 0 0.3em 0;
	padding-left:45px;
	background:url("all-item.png") 20px 0.7em no-repeat;
}

ul#linkList ul li.lastitem{
	background:url("last-item.png") 20px 0.5em no-repeat;
}


画像

first-item.pngの画像
all-item.pngの画像
last-item.pngの画像

Reference

ミツエーリンクス - サイトマップ
http://www.mitsue.co.jp/sitemap/

CSS Signature

Reference

  MLI - Writings - Tech notes - CSS Tip #2: Making Your Site Modifiable
  http://www.rdrop.com/~half/Creations/Writings/TechNotes/css.tip.2.html
  Eric A. Meyer
  http://www.meyerweb.com/eric/
  [css-d] CSS signatures - 13291 - 2002-09-28
  http://archivist.incutio.com/viewlist/css-discuss/13291

via

  Note @ Temporary-Depot - 2005-01-11
  http://www.pandora.nu/tempo-depot/notes/2005/01/11/#d050111

RSSバーのデザインをカスタマイズ

RssBar.css

a {
	color:#09f;
	background-color: inherit;
	text-decoration:none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:hover {
	color:#fa0;
	background-color: inherit;
	text-decoration:underline;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
a:visited {
	color: #03c;
	background-color: inherit;
}
a:link {
	font-weight: bold;
}
.all {
	margin-top: 2px;
	border-top:    1px solid #fff;
	border-left:   1px solid #fff;
	border-bottom: 1px solid #999;
	border-right:  1px solid #999;
}
.site {
	font-family: 'Tahoma'
}
.title {
	color: inherit;
	background-color: #ddd;
	font-family: 'Tahoma'
}
.title01 {
	color: inherit;
	background-color: #ddd;
	font-family: 'Tahoma'
}
.title02 {
	color: inherit;
	background-color: #ccc;
	font-family: 'Tahoma'
}
.description {
	color: inherit;
	background-color: #ccc;
	font-family: 'Tahoma'
}

Screenshot

  RSSバーカスタマイズデザイン

Reference

  RSSバー オフィシャルサイト
  http://darksky.nureyev.net/sw/rssbar/

CSS でインタラクティブ制御

Summary

  JavaScriptを使用せず,CSSのみでインタラクティブな制御を行う.

Reference

  Stu Nicholls - The CSS Playground - A photograph gallery
  http://www.stunicholls.myby.co.uk/menu/gallery.html
  ご近所ブログ - 2005-04-15 - CSS でインタラクティブ制御
  http://www.miyoshitakayuki.com/archives/39

via

  cl.pocari.org - 2005-04-15
  http://cl.pocari.org/2005-04-15.html#2005-04-15-4

css Zen Garden Shot - css Zen Garden のサムネイル集

Reference

  css Zen Garden Shot
  http://antenna.readalittle.net/thumblink/zenGarden/
  css Zen Garden: The Beauty in CSS Design
  http://www.csszengarden.com/

via

  antipop2.0 - 2005-03-05
  http://antipop.zapto.org/mt/archives/001255.php
  オレンジニュース - 2005-03-07
  http://secure.ddo.jp/~kaku/tdiary/20050307.html#p13