【CodePen】ログインフォームのアイデア14選

💡 実装のポイント
JSは一切使わず、ラジオボタン#tab-1/#tab-2のチェック状態をCSSの隣接セレクタで拾って.sign-in-htm/.sign-up-htmをrotateY(180deg)させる仕組み。パスワード入力は-webkit-text-security:circleで丸伏字にしているが、これはWebKit系ブラウザ専用の非標準プロパティ。ボタン色は.group .buttonのbackground:#1161eeを変えるだけ。

💡 実装のポイント
チェックボックス#reg-logのON/OFFで.card-3d-wrapperをrotateY(180deg)させ、.card-front/.card-backをbackface-visibility:hiddenで裏表に配置するカードフリップ構成。JSは不要でCSSのみで完結。Bootstrap＋Uniconsアイコンフォントに依存しているため、単体で使う場合はこの2つの読み込みを忘れずに。背景色はbodyのbackground-color:#7f9a7d、アクセント色は#ffeba7を変更すればOK。

💡 実装のポイント
Haml＋SCSS＋jQueryの構成。送信ボタンクリック後、setTimeoutを300ms〜3200msまで多段に仕込み、.test/.testtwoクラス付与によるperspective回転＋スライドアウト→「Authenticating…」パネル表示→成功メッセージ表示、という一連のログイン演出をタイマー制御で組み立てている。単純なトグルではなく状態遷移のシミュレーションが見どころ。

💡 実装のポイント
Daily UI Challenge #001への回答作品。.box-infoパネルはonclick属性から呼ぶopenLoginInfo()/closeLoginInfo()でjQueryの.css()を使いleft/rightを直接書き換えてスライド表示させている。送信時は$.trim()で未入力チェックを行い、警告アイコン用クラスi-warning/i-saveを切り替える簡易バリデーション付き。アイコンはBase64インラインSVG。

💡 実装のポイント
トグルスイッチのチェック状態に応じて、JS側でroot.style.setProperty()を使い--body-rotate（rotateY(0deg)⇔180deg）や--body-heightなどのCSSカスタムプロパティを書き換える構成。SCSSの@extendで.signup-*系のスタイルを.login-*から継承しているため、コード量の割にクラス数が少ない。

💡 実装のポイント
アカウント作成の最初のステップとして使えるパスワード入力を含む複数ステップフォーム。#progressbar liはCSSのcounter()で自動採番、Next/PreviousボタンはjQuery＋jquery.easingプラグインの.animate()でscale・opacity・leftを同時に変化させるスライド演出を実装している。

💡 実装のポイント
JSなし、Pug＋SCSSのみで構成。.formの::before/::after疑似要素をskewY()で傾け、紙の折り目のように見せている。:hoverだけでなく:focus-withinにも対応しているため、キーボード操作でフォームにフォーカスしても展開アニメーションが発火する点はアクセシビリティ面で参考になる。色やサイズは--color-primaryなどのCSSカスタムプロパティで一括管理。

💡 実装のポイント
.forms-wrapperにperspectiveとtransform-style:preserve-3dを設定し、.signup-form側はあらかじめrotateY(270deg) translateZ(25rem)で裏側に配置。ボタンクリックで.changeクラスを付与すると.forms-wrapper全体がrotateY(100deg)回転し、まるで立方体を回すようにフォームが切り替わる。

💡 実装のポイント
.container:before疑似要素に巨大な円（2000px四方のborder-radius:50%）を仕込み、.sign-up-modeクラスの有無でtransform:translate()させることでカラーパネルが波のように移動する演出を実現。フォーム自体はopacityとz-indexの切り替えのみとシンプルで、JSはクラストグルの1行だけ。

💡 実装のポイント
2カラムグリッドの左側に装飾用のインラインSVGイラストを配置したビジュアル重視の構成。入力欄のフォーカス時はaddcl/remclという素朴なJS関数で親要素に.focusクラスを付け外しし、::before/::afterの下線をwidthのトランジションで伸縮させている。

💡 実装のポイント
このPenはCodePen側のアクセス制限によりソースコードの詳細確認ができませんでした。タイトルの通りニューモーフィズム（ソフトUI）スタイルのログインフォームです。実装の詳細はCodePen上で直接ご確認ください。

💡 実装のポイント
グラデーションの色は--linear-grad/--grad-clr1/--grad-clr2のCSSカスタムプロパティにまとめられており、CSS内にコメントアウトされた配色パターンが4つ用意されているので差し替えるだけで別テーマになる。切り替えボタンはrequestAnimationFrameでクラスを一度外して再付与し、scaleBtnのkeyframesアニメーションを毎回リスタートさせている。

💡 実装のポイント
基本構造はオーバーレイスライド式で#12と近いが、入力欄やボタンに明るい影と暗い影を組み合わせたbox-shadow（例：-5px -5px 10px #fff, 5px 5px 10px #babebc）を重ねてニューモーフィズムの凹凸感を表現。ボタンの:active時はinset指定の影に切り替えて「押し込まれた」見た目にしている。

💡 実装のポイント
固定表示された.page-footer内に「Sign In」リンクがあり、jQueryで.shownクラスをトグルすると.login-wrapがmax-width:0から800pxへ横方向に展開する仕組み。SCSSの親セレクタ参照.shown &を多用し、通常状態と展開状態のスタイルを1つのブロックにまとめて書いているのが特徴。