CHROMA

世の中の "当たり前" を確認する

ボーダーの上にタイトルのっけるやつ

Dev

今更で、使える場面も限られてそうだけど、 いつか使う時がきたらサッと使えるようにここに残しとく。
このサイトの中みてやった。 ほとんどcssは貼りつけただけですね。
DEMO

HTML

<body>
  <article>
    <h1>chroma</h1>
  </article>
</body>

CSS

body {
  background: #F2F2F2;
  color: #666;
  margin: 40px 0 0;
}

article {
  padding: 5px 0 0;
  border-top: 1px solid #D0D0D0;
}

h1 {
  background: #F2F2F2;
  color: #666;
  font-size: 12px;
  font-weight: 600;
  margin: -15px auto 20px;
  text-align: center;
  text-shadow: 0 1px 0 white;
  text-transform: uppercase;
  width: 80px;
}

ボックスの中にタイトル置いて paddingでタイトル下げてボーダーにかぶさる用に合わせる感じ。
タイトルにはbackgroundを全体の背景色に合わせて、width横の余白取りながら後ろの線を消してる。

text-transformgとかtext-shadow、他にもただこれ作るだけなら要らないもの多いコードになっております。