【CSS】-または- の作り方

最近は面白いデザインのサイトが沢山！！

最近のサイトを見ていると、面白いデザインのものが沢山あるように感じます。

そこで今回は、その中でよく選択肢を分ける時に利用される

この線をご紹介します！

区切り線のコード

よくログインページで「Googleでログイン」「Facebookでログイン」などのボタンの間にあるものなのですが、思うより難しくありません。

実はこの仕組みはとても簡単で、border-topを指定したブロックを少しずらし、文字の部分に白色の背景を入れているだけです。

このラインはこのようなソースコードです。

<div style="border-top:1px solid #cbd2d6;position:relative;margin: 25px 0 10px;text-align:center;">
  <span style="background:#fff;padding:0 .5em;position:relative;color:#666;top:-.7em;">
    または
  </span>
</div>

これを分かりやすくするとこのようになります。

要素の形を分かりやすくしています(赤色が追加した線)。

このような少し実装が難しそうなものでも案外簡単にできてしまうCSSって凄いですよね。

　是非、試してみてください。