CSS テキスト飾り罫

border等でやるのもいいけど、そろそろCSS擬似要素でハッチャケちゃってもいい時期だと思うので、実験を兼ねて色々なパターンのサンプルを作ってみる。フォントによってどうなるかわからんのである程度は「お遊び」程度のものと捕らえて欲しい。ポイントになるのは、

字詰めをやっとかないとアスキーアートやメルマガなんかと変わらないものが多いので注意。

その他、このパターンも良いよてなものがあったらコメント欄にでもガンガン入れちゃってください。サンプルに追加します(気が向いたら)。尚、サンプルのスタイルは都合上contentの量を減らしています。あと、このページのみ、のけぞるようなソースをしているが借り物のシステム上、お察し下さい。

hr要素に使いたいんだが、どうもうまくいかない。やってみればわかると思いますが、うまくいった方はできたら報告下さい。お会いした際にコーヒーでも奢ります。但し、その場合オレはお会いすることを全力で避けるでしょう。

A:綱みたいな感じ

半角英数「z」を利用。

h2.a:before {
content:"zzzzzzzzzzzzzzzzzzzzzzzzzz";
display:block;
letter-spacing:-0.1em;
text-align:left;
white-space:pre;
font-size:10px;
font-weight:normal;
}

B:連続のび太メガネ、のような。

-O-Oこんなん。

h2.b:before {
content:"-O-O-O-O-O-O-O-O-O-O-O";
display:block;
letter-spacing:-0.2em;
text-align:left;
white-space:pre;
font-size:10px;
font-weight:normal;
}

C:連続のび太メガネ、のような。をCにすると

貫通っぽくなるか。。あんまり変わらんか。

h2.c:before {
content:"-C-C-C-C-C-C-C-C-C-C-";
display:block;
letter-spacing:-0.1em;
text-align:left;
white-space:pre;
font-size:10px;
font-weight:normal;
}

D:ありがちな連続+。

ちょっと字詰めするだけで割といい感じに。

h2.d:before {
content:"+++++++++++++++++++++++++";
display:block;
letter-spacing:-0.1em;
text-align:left;
white-space:pre;
font-size:10px;
font-weight:normal;
}

E:アレンジ。

定規みてえだな。

h2.e:before {
content:"+---+---+---+---+---+---+---";
display:block;
letter-spacing:-0.1em;
text-align:left;
white-space:pre;
font-size:10px;
font-weight:normal;
}

F:キリトリセン

偏見かもしれんが、素材屋とかにありそうなやつ。

h2.f:before {
content:"-----------キリトレマセン-----------";
display:block;
letter-spacing:0.1em;
text-align:left;
white-space:pre;
font-size:10px;
font-weight:normal;
}

G:ギザギザ。

マーキー(スペルすら忘れたが)で高速で動かしたいスタイルNo1。

h2.g:before {
content:"/\/\/\/\/\/\/\/\/\";
display:block;
letter-spacing:-0.1em;
text-align:left;
white-space:pre;
font-size:10px;
font-weight:normal;
}

H:ギザ。

Wギザ。全角Xや記号の×とかでもいいでしょう。

h2.h:before {
content:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
display:block;
letter-spacing:-0.1em;
text-align:left;
white-space:pre;
font-size:10px;
font-weight:normal;
}

I:Wギザ。を細胞ちっくに。

ミトコンドリア?だっけ。

h2.i:before {
content:"※※※※※※※※※※※※※※※※※※※※";
display:block;
letter-spacing:-0.2em;
text-align:left;
white-space:pre;
font-size:10px;
font-weight:normal;
}

J:波線。

DTPでは常識。というか古のテクニック。

h2.j:before {
content:"〜〜〜〜〜〜〜〜〜〜";
display:block;
letter-spacing:-3px;
text-align:left;
white-space:pre;
font-size:14px;
font-weight:normal;
}

K:おたまじゃくし。

コメントより。おたまじゃくし風。

h2.k:before {
content:"〜● 〜● 〜● 〜●";
display:block;
letter-spacing:-3px;
text-align:left;
white-space:pre;
font-size:14px;
font-weight:normal;
}

l:種ぽ。

コメントより。背景色入れて白文字にしたりしないように。

h2.l:before {
content:"〜●  〜●  〜●  〜●";
display:block;
letter-spacing:-3px;
text-align:left;
white-space:pre;
font-size:14px;
font-weight:normal;
}

m:種ぽ2。

しつこいって?

h2.m:before {
content:"〜・  〜・  〜・  〜・";
display:block;
letter-spacing:-3px;
text-align:left;
white-space:pre;
font-size:14px;
font-weight:normal;
}

1:夜秋   2008年12月14日 15:33
〜● 〜● 〜● 〜●
どうなるのかわくわくします。
2:l-_-l   2008年12月14日 21:27
どうみても略ございました。
更に全角スペースで
〜● 〜● 〜● 〜● 〜● 
多分ボンバーマン的な感じになるかも。
3:優乃   2008年12月20日 16:33
|◎×−

うまいこと組み合わせて.

“マーキー”思い出したw
4:Josie   2013年06月01日 19:43
A few things i have seen in terms of pc memory is that there are specs such as SDRAM, DDR and the like, that must go with the features of the mother board. If the personal computer’s motherboard is reasonably current and there are no main system issues, changing the ram literally will take under a couple of hours. It’s among the easiest laptop upgrade procedures one can visualize. Thanks for giving your ideas. Josie http://beatingfootpain.wordpress.com

text_site at livedoor.com 公開日:2008年12月14日 テーマ:web | top
-->