忍者ブログ

栃木県のおもしろあるある

関東地方の1県栃木県にまつわるあるある情報紹介ブログです。

オシャレ見出し

こんばんは、こうちゃんです。

スタイルシートの組み合わせで、
画像を使わないのにおしゃれな見出しにする方法です。

h1{
  position: relative;
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  color: #454545;
}
h1:after {
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #fff #fff #a8d4ff;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

見出しのh1に対してこのような書き方でスタイルを当てると、
一見画像で作ったかのようなおしゃれな見出しになります。

こうちゃん
PR