ちょっと素敵だったので備忘録。CSS
で見出しを水平線で囲むテクニック
です。本とかでよくある表現方法です
が、これを画像を使わず実装しよう、
というもの。クロスブラウザで動作
しますので汎用性もありますね。
これはいいですな・・・IE6でも7でも実装出来て、背景カラーや画像にも依存しません。
IE6でも7でも8でも問題なし。
[note]続き書いたので宜しければ。[/note]
これは結構使うかも。他にもいろいろ試したくなりますねー。いいテクニックですね。
以下を参考にしました。
via:impressivewebs
demo
こんな感じ。よく見かけますが、これをCSSのみで実装するTipsです。CSS
h1 {
border-top: 1px solid black;
margin:23px 0 0;
text-align:center;
padding:0; height:24px;
}
h1 span {
position: relative;
top: -24px;
padding: 0 20px;
background:white;
}
borderを使って実装。h1にborderを付けて位置を下げ、spanで囲ってテキストだけ元の位置に戻す・・なるほど。僕がcss苦手だから思いつきませんでしたｗ
html
<h1><span>Kachibito</span></h1>普通に書くだけ。
jQueryを使う
spanが含まれていないような既存サイトに導入したいのであればjQueryでspanを入れてあげればいいですね。$(document).ready(function() {
var h = $('h1'),
htext = $(h).text(),
full = '<span>' + htext + '</span>';
$(h).html(full);
});
IE6
IE6でも7でも8でも問題なし。
[note]続き書いたので宜しければ。[/note]
これは結構使うかも。他にもいろいろ試したくなりますねー。いいテクニックですね。
以下を参考にしました。
via:impressivewebs