css3
Pocket

超小ネタ。

Pocketのログイン画面ってこんな感じになっていて、このフォームの「又は」ってとこみたいなコーディングをすることがあったのでメモ

pocket-login

忠実に再現するものではないですが。ちなみにPocketは「又は」と区切り線ごと画像にしてCSSの背景で指定してるようです。

flexboxがない頃だったら、画像を使ったりpositionとかを使ってちまちま調整が必要だったかもしれないですがflexboxを使えば簡単にできます。

See the Pen Separation by misumi (@mismith0227) on CodePen.

コードはこちら。

html

<span>区切り</span>

css

span {
  display: flex;
  align-items: center;
}

span::before,
span::after {
  content: "";
  height: 1px;
  flex: 1;
  background: #ccc;
}

span::before {
  margin-right: 8px;
}

span::after {
  margin-left: 8px;
}
Pocket

Category : Tag :