buena suerte!

自分用にまとめのまとめみたいな感じです。

同じフォントでも、等幅、プロポーショナル、太さの種類が複数ある等々のものは、どれも同種としてカウントしたつもりです。ただ、漢字部分は同じで、ひらがなカタカナ部分だけ違うとか、英数字部分だけ違うとか、微妙な違いのフォントがあるので、似たようなのがカウントされてたりするかもしれない。
それでも、かなり古いものから、定番もの、最近リリースされたもの、最近更新されたものまで、まともに使えないのもあるけど、単純にリストの数かぞえたら、番外編抜いても242種類もありました。多すぎて整理できてないのはあれですが。

自分なりに注釈付けてますけど、間違いがあるかもしれないんで、（特に商用）利用する前には、必ず規約やライセンス、付属のテキストをよく確認して下さい。また、ライセンス上無保証であるものも多いので、いずれも自己責任での利用をお願いします。

サンプルは、大きいほうが16pt、小さいほうが10pt、字間は若干調節してあります。アンチエイリアスが掛かっていないのは、有効にしたらうまく表示できなかったものかビットマップフォントです。あと、使えない漢字の部分を平仮名にしているのもあります。

分かりにくいところ以外は、素材サイトとかもあるので、トップページにしかリンクしていません。では、続きからどうぞ。

read more...

CSS を使って描かれたモノといえば Opera のアイコンや、ホーマー・シンプソン、ドラえもんなんかが有名ですが、今回はシンプルな図形、そしてシンボルアイコンっぽいものを、画像もテキストもなしで CSS だけで描いてみようという試み。

• 参考記事: 18 Brilliant Pure CSS Drawings

動作確認

Chrome 7.0.517.44, Safari 5.0.2, Firefox 3.6.12, Opera 10.63 で確認。 Firefox と Opera でうまく表示されないのがあります。

デモサイト ／ Demo Site

• 図形 - Demo: Drawing Shapes in CSS
• アイコン - Demo: Drawing Symbolic Icons in CSS

HTML

図形では1つ（立体は3つ）まで、アイコンでは4つまでの要素で描いてます。要素数の縛りがなければいくらでもいけそう。

<span class="squ"></span>

<div class="apple"><span></span></div>

デモでは無駄に擬似要素の ::before ::after を使ってるけど、下みたいに書いたほうがいいかも。ただ、要素の初期位置と順番が変わるので注意。というか順番とか全く意識しないで書いてた……

<div class="squ">
	<span class="el1"></span>
	<span class="el2"></span>
	<span class="el3"></span>
</div>

<div class="apple">
	<span class="el1"></span>
	<span class="el2"></span>
	<span class="el3"></span>
	<span class="el4"></span>
</div>

CSS

Mayer's CSS Reset でリセットしてます。
一つ一つ説明入れるの大変なので全部一度に貼っていきます。

図形 ／ Shapes

図形はきれいに並んでいるように見せるためにマージンとかで微調整してるのがあるので、修正が必要かと。

read more...

CSS Triangle を使ったパンくずリストを見てて、この方法だと単色はともかく、グラデーションかけたい時、ボーダーで作った三角がネックでうまくいかないだろうなっておもった。

• 参考記事：Breadcrumb Navigation with CSS Triangles | CSS-Tricks

前回、 iPhone Buttons を再現した際に使った方法でグラデーションかけられそうなので試してみた。

オリジナルの詳しい解説は既にコリスさんにありますので割愛。
大分書き進めた後に気づいたけど、コメントにあった span を使う方法のがパッと見簡単やないかな……こっち使うほうがいいかもしれんね……

動作確認

Chrome(7.0.517.41) で確認。もしかすると、ウィンドウ幅が小さいと崩れるかも。横幅 1024px で最大化して確認してます。

同じ webkit の Safari でも表示されますが、微妙に動作が違います。他のブラウザ用のプロパティは機会があれば。も追加してみた。こっちに貼ると長すぎて拒否されるので、デモのスタイルシート見てください。クロスブラウザ難しいなこりゃ……

デモサイト／Demo Site

• Demo: Triangle Breadcrumbs

HTML

<h2>custom</h2>
<div id="custom">
<ol class="custom">
<li><a href="#">Home</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Vans</a></li>
<li><a href="#">Camper Vans</a></li>
<li>1989 VW Westfalia Vanagon</li>
</ol>
</div>

CSS

Mayer's CSS Reset でリセットしてます。

グラデーションかかってないように見えるけど、かかってます。 hsl だと同系色の色指定楽だね。でも要領がわからない。

/* custom
----------------------------------*/
.custom {
	list-style: none;
	overflow: hidden;
	font: 18px Helvetica, Arial, Sans-Serif;
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,95%,1)),
		color-stop(0.49,hsla(34,85%,90%,1)),
		color-stop(0.5,hsla(34,85%,80%,1)),
		to(hsla(34,85%,85%,1)));
	-webkit-border-radius: 5px;
}
.custom li {
	float: left;
	line-height: 50px;
}
.custom li a {
	color: white;
	text-decoration: none;
	padding: 0 15px 0 35px;
	background: brown;
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,50%,1)),
		color-stop(0.49,hsla(34,85%,45%,1)),
		color-stop(0.5,hsla(34,85%,35%,1)),
		to(hsla(34,85%,40%,1)));
	display: block;
	float: left;
}
.custom li a::after {
	position: relative;
	display: block;
	margin-top: -25px;
	margin-left: auto;
	margin-right: -25px;
	height: 25px;
	width: 20px;
	content: " ";
	-webkit-transform: skew(-30deg);
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,35%,1)),
		to(hsla(34,85%,40%,1)));
	border-right: 1px solid white;
}
.custom li a::before {
	float: right;
	display: block;
	margin-bottom: -25px;
	margin-left: auto;
	margin-right: -25px;
	height: 25px;
	width: 20px;
	content: " ";
	-webkit-transform: skew(30deg);
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,50%,1)),
		to(hsla(34,85%,45%,1)));
	border-right: 1px solid white;
}
.custom li:first-child a {padding-left: 20px;}
.custom li:nth-child(2) a {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,60%,1)),
		color-stop(0.49,hsla(34,85%,55%,1)),
		color-stop(0.5,hsla(34,85%,45%,1)),
		to(hsla(34,85%,50%,1)));
}
.custom li:nth-child(2) a::before {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,60%,1)),
		to(hsla(34,85%,55%,1)));
}
.custom li:nth-child(2) a::after {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,45%,1)),
		to(hsla(34,85%,50%,1)));
}
.custom li:nth-child(3) a {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,70%,1)),
		color-stop(0.49,hsla(34,85%,65%,1)),
		color-stop(0.5,hsla(34,85%,55%,1)),
		to(hsla(34,85%,60%,1)));
}
.custom li:nth-child(3) a::before {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,70%,1)),
		to(hsla(34,85%,65%,1)));
}
.custom li:nth-child(3) a::after {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,55%,1)),
		to(hsla(34,85%,60%,1)));
}
.custom li:nth-child(4) a {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,80%,1)),
		color-stop(0.49,hsla(34,85%,75%,1)),
		color-stop(0.5,hsla(34,85%,65%,1)),
		to(hsla(34,85%,70%,1)));
}
.custom li:nth-child(4) a::before {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,80%,1)),
		to(hsla(34,85%,75%,1)));
}
.custom li:nth-child(4) a::after {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,65%,1)),
		to(hsla(34,85%,70%,1)));
}
.custom li:nth-child(5) a {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,90%,1)),
		color-stop(0.49,hsla(34,85%,85%,1)),
		color-stop(0.5,hsla(34,85%,75%,1)),
		to(hsla(34,85%,80%,1)));
}
.custom li:nth-child(5) a::before {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,90%,1)),
		to(hsla(34,85%,85%,1)));
}
.custom li:nth-child(5) a::after {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,75%,1)),
		to(hsla(34,85%,80%,1)));
}
.custom li:last-child {padding-left: 35px;}
.custom li:last-child a {
	background: transparent !important;
	color: black;
	pointer-events: none;
	cursor: default;
}
.custom li:last-child a::before {border: 0;background: transparent !important;}
.custom li:last-child a::after {border: 0;background: transparent !important;}
.custom li a:hover {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,40%,1)),
		color-stop(0.49,hsla(34,85%,35%,1)),
		color-stop(0.5,hsla(34,85%,25%,1)),
		to(hsla(34,85%,30%,1)));
}
.custom li a:hover::before {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,40%,1)),
		to(hsla(34,85%,35%,1)));
}
.custom li a:hover::after {
	background: -webkit-gradient(linear, left top, left bottom,
		from(hsla(34,85%,25%,1)),
		to(hsla(34,85%,30%,1)));
}

続いて以前あちこちで取り上げられてた、パンくずリストをいくつか再現してみる。
※あくまでそれっぽくしただけです。

read more...