保育士していた学生が起業してビジネスの成功者になるまで...

保育士の働く環境、学童と児童館で教育を受けれられる環境を作るために活動。ビジョンは「子どもに人生の糧をつくる」である。ここではそんな活動の経緯と自分のアイデアをまとめていきます。

Codepenで見つけた|コピペで参照できるおしゃれなフォームデザイン10選!|CodeDoIt.com

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

f:id:hajime0308:20170205142203p:plain

 

 

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

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

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

www.sassmeister.com

http://phiary.me/web-tool-less-to-css/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.




スマホ向けのログインフォームが多かった印象ですね。ぜひご活用ください!

また、このような便利なCodepenをたくさん紹介しているサイトを現在以下のサイトで作っています。ぜひご覧ください!

http://codedoit.com/

 

関連記事

hajimesbusiness.hatenablog.com

hajimesbusiness.hatenablog.com

 





このような便利なCodeたちを集めているのが今作り中ないかのサイトです。気になる点があればコメントくださいませ!

http://codedoit.com/

関連記事

hajimesbusiness.hatenablog.com

hajimesbusiness.hatenablog.com

hajimesbusiness.hatenablog.com