CSSでログインフォームをデザインする

今回はCSSでのログインフォームデザインをご紹介いたします。

サンプル

ユーザーアイコンと錠アイコンにクリック、またはタップするとフィールドにカーソルがフォーカスされます。

サンプル

html

ラベルを記述し各フィールドに対応させておくと、アイコンをクリック、またはタップしたときに、入力フィールドにフォーカスが当たるのでおすすめです。

css

フォームの基本プロパティとアイコン、ボタンのプロパティに分かれています。

解説1

フィールドなどの線や色、幅などの基本的なプロパティです。

「.login-area dl dd label span」の「visibility: hidden;」でアイコンのテキストを非表示にしています。

解説2

アイコンの上下左右の位置を決めています。

解説3

ユーザーアイコンの頭部と体の大きさを決めています。「radius」で頭部と体の丸みを調整しています。

解説4

錠アイコンの位置と形を調整しています。

解説5

錠アイコンの逆Uと■のプロパティ部分です。「radius」で逆Uの丸みを調整しています。

解説6

ボタンの背景色は「gradient」プロパティでグラデーションを表現しています。

「.login-area button:hover」でボタンにカーソルがホバーしたときに、グラデーションの上下を反転させています。

全ソース

まとめ

  • ラベルを各フィールドに対応させておくと、入力フィールドにフォーカスが当たる。
  • フォームの基本プロパティとアイコン、ボタンのプロパティの3つに分かれている。
  • 「visibility: hidden;」でアイコンのテキストを非表示にしている。
  • 「radius」でユーザーアイコンと錠アイコンの丸みを調整している。
  • ボタンの背景色は「gradient」プロパティで表現、「:hover」疑似要素でオンマウス時にグラデーションを反転表示。
スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

CSSでログインフォームをデザインする
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!