コピペで参照できるおしゃれなフォームデザイン10選!


ログインしてほしいとき、意見をちょうだいしたいとき、フォームのデザインは非常にたいせつですよね。ここでは、そんなフォームデザインの中でもCodepenで見つけたおしゃれなフォームを厳選してご紹介します。

 

LESSはこちらのサイトでCSSに変換できます!ぜひご利用ください!

リアルタイムで LESS から CSS に変換する Web ツール作りました! | phiary

またscssをcssに変換したい方はこちらのサイトをご利用ください。

www.sassmeister.com

1.Sign-Up/Login Form

See the Pen Sign-Up/Login Form by Eric (@ehermanson) on CodePen.

2.Flat Responsive Form using CSS3 & HTML5

See the Pen Flat Responsive Form using CSS3 & HTML5 by Rex Kirby (@rexkirby) on CodePen.

3.Login/Logout animation concept

See the Pen Login/Logout animation concept by Nikolay Talanov (@suez) on CodePen.

4.Calm breeze login screen

綺麗な背景に綺麗なUIをしています。CSSで書かれています。コピペでも動きます。

See the Pen Calm breeze login screen by Lewi Hussey (@Lewitje) on CodePen.

5.Flat HTML5/CSS3 Login Form

See the Pen Flat HTML5/CSS3 Login Form by Aigars Silkalns (@colorlib) on CodePen.

6.Material Login Form

See the Pen Material Login Form by Andy Tran (@andytran) on CodePen.

7.Forms-Floated Labels

コピペしても動きます

See the Pen Forms-Floated Labels by Brady Sammons (@soulrider911) on CodePen.

8.Material Compact Login Animation

ログインが楽しくなるようなデザインですね!コピペしても動きます

See the Pen Material Compact Login Animation by Yusuf Bakır (@yusufbkr) on CodePen.

8.Material Compact Login Animation

これも綺麗なログインフォームですね!CSSで動かすことができます!

See the Pen Material Design Input Text by Ben Mildren (@mildrenben) on CodePen.

9.Text input love

かわいい動きをするテキストフォームですね!コピペでも動きます。

See the Pen Text input love by Michael Arestad (@MichaelArestad) on CodePen.

10.Interactive Form

See the Pen Interactive Form by Rosa (@RRoberts) on CodePen.

11.Beautiful login form widget

See the Pen Beautiful login form widget by Thibault Jan Beyer (@ThibaultJanBeyer) on CodePen.

あわせて読みたい

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です