html+css3で実装されたログインインターフェース
|
成果を達成する
まずHTMLを使って基本的なフレームワークを構築します <本文> <div class="コンテナ"> <セクション id="コンテンツ"> <フォームアクション=""> <h1>ログインフォーム</h1> <div> <input type="text" placeholder="ユーザー名" required="" id="ユーザー名" /> </div> <div> <input type="password" placeholder="パスワード" required="" id="password" /> </div> <div> <input type="submit" value="ログイン" /> <a href="#">パスワードを忘れましたか?</a> <a href="#">登録</a> </div> </form><!-- フォーム --> <div class="button"> <a href="#">ソースファイルをダウンロード</a> </div><!-- ボタン --> </section><!-- コンテンツ --> </div><!-- コンテナ --> </本文>
CSS3で美しく仕上げる
体 {
背景: #DCDDDF url(https://cssdeck.com/uploads/media/items/7/7AF2Qzt.png);
色: #000;
フォント: 14px Arial;
マージン: 0 自動;
パディング: 0;
位置: 相対的;
}
h1{ フォントサイズ:28px;}
h2{ フォントサイズ:26px;}
h3{ フォントサイズ:18px;}
h4{ フォントサイズ:16px;}
h5{ フォントサイズ:14px;}
h6{ フォントサイズ:12px;}
h1、h2、h3、h4、h5、h6{ 色:#563D64;}
小さい{ フォントサイズ:10px;}
b、強い{ フォントの太さ: 太字;}
a{ テキスト装飾: なし; }
a:hover{ テキスト装飾: 下線; }
.left { float:left; }
.right { フロート:right; }
.alignleft { float: left; margin-right: 15px; }
.alignright { float: right; margin-left: 15px; }
.clearfix:後、
フォーム:after {
コンテンツ： "。";
表示: ブロック;
高さ: 0;
クリア: 両方;
可視性: 非表示;
}
.container { マージン: 25px 自動; 位置: 相対; 幅: 900px; }
＃コンテンツ {
背景: #f9f9f9;
背景: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
背景: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
背景: -o-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
背景: -ms-linear-gradient(上、rgba(248,248,248,1) 0%、rgba(249,249,249,1) 100%);
背景: linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
フィルター: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
-webkit-box-shadow: 0 1px 0 #fff インセット;
-moz-box-shadow: 0 1px 0 #fff インセット;
-ms-box-shadow: 0 1px 0 #fff インセット;
-o-box-shadow: 0 1px 0 #fff インセット;
ボックスシャドウ: 0 1px 0 #fff インセット;
境界線: 1px 実線 #c4c6ca;
マージン: 0 自動;
パディング: 25px 0 0;
位置: 相対的;
テキスト配置: 中央;
テキストシャドウ: 0 1px 0 #fff;
幅: 400ピクセル;
}
#コンテンツ h1 {
色: #7E7E7E;
フォント: 太字 25px Helvetica、Arial、サンセリフ;
文字間隔: -0.05em;
行の高さ: 20px;
マージン: 10px 0 30px;
}
#コンテンツ h1:before,
#コンテンツ h1:after {
コンテンツ： "";
高さ: 1px;
位置: 絶対;
上: 10px;
幅: 27%;
}
#コンテンツ h1:after {
背景: rgb(126,126,126);
背景: -moz-linear-gradient(左、rgba(126,126,126,1) 0%、rgba(255,255,255,1) 100%);
背景: -webkit-linear-gradient(左、rgba(126,126,126,1) 0%、rgba(255,255,255,1) 100%);
背景: -o-linear-gradient(left, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
背景: -ms-linear-gradient(左、rgba(126,126,126,1) 0%、rgba(255,255,255,1) 100%);
背景: linear-gradient(左、rgba(126,126,126,1) 0%、rgba(255,255,255,1) 100%);
右: 0;
}
#コンテンツ h1:before {
背景: rgb(126,126,126);
背景: -moz-linear-gradient(右、rgba(126,126,126,1) 0%、rgba(255,255,255,1) 100%);
背景: -webkit-linear-gradient(右、rgba(126,126,126,1) 0%、rgba(255,255,255,1) 100%);
背景: -o-linear-gradient(右、rgba(126,126,126,1) 0%、rgba(255,255,255,1) 100%);
背景: -ms-linear-gradient(右、rgba(126,126,126,1) 0%、rgba(255,255,255,1) 100%);
背景: linear-gradient(右、rgba(126,126,126,1) 0%、rgba(255,255,255,1) 100%);
左: 0;
}
#コンテンツ:後、
#コンテンツ:前{
背景: #f9f9f9;
背景: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
背景: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
背景: -o-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
背景: -ms-linear-gradient(上、rgba(248,248,248,1) 0%、rgba(249,249,249,1) 100%);
背景: linear-gradient(top, rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
フィルター: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
境界線: 1px 実線 #c4c6ca;
コンテンツ： "";
表示: ブロック;
高さ: 100%;
左: -1px;
位置: 絶対;
幅: 100%;
}
#content:後{
-webkit-transform: 回転(2度)。
-moz-transform:回転(2度);
-ms-transform:回転(2度);
-o-transform: 回転(2度);
変換: 回転(2度);
上: 0;
Zインデックス: -1;
}
#コンテンツ:前{
-webkit-transform: 回転(-3度);
-moz-transform:回転(-3度);
-ms-transform:回転(-3度);
-o-transform: 回転(-3度);
変換: 回転(-3度);
上: 0;
Zインデックス: -2;
}
#コンテンツフォーム { margin: 0 20px; position: relative }
#コンテンツフォーム入力[type="text"],
#コンテンツフォーム入力[type="password"] {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-境界線の半径: 3px;
境界線の半径: 3px;
-webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) インセット;
-moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) インセット;
-ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) インセット;
-o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) インセット;
ボックスシャドウ: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) インセット;
-webkit-transition: すべて 0.5 秒の緩和;
-moz-transition: すべて 0.5 秒のイーズ;
-ms-transition: すべて 0.5 秒の緩和;
-o-transition: すべて 0.5 秒の緩和;
遷移: すべて 0.5 秒の緩和;
背景: #eae7e7 url(https://cssdeck.com/uploads/media/items/8/8bcLQqF.png) 繰り返しなし;
境界線: 1px 実線 #c8c8c8;
色: #777;
フォント: 13px Helvetica、Arial、sans-serif;
マージン: 0 0 10px;
パディング: 15px 10px 15px 40px;
幅: 80%;
}
#コンテンツフォーム入力[type="text"]:focus,
#コンテンツフォーム入力[type="password"]:focus {
-webkit-box-shadow: 0 0 2px #ed1c24 インセット;
-moz-box-shadow: 0 0 2px #ed1c24 インセット;
-ms-box-shadow: 0 0 2px #ed1c24 インセット;
-o-box-shadow: 0 0 2px #ed1c24 インセット;
ボックスシャドウ: 0 0 2px #ed1c24 インセット;
背景色: #fff;
境界線: 1px 実線 #ed1c24;
アウトライン: なし;
}
#ユーザー名 { 背景位置: 10px 10px !重要 }
#パスワード { 背景位置: 10px -53px !重要 }
#コンテンツフォーム入力[type="submit"] {
背景: rgb(254,231,154);
背景: -moz-linear-gradient(top, rgba(254,231,154,1) 0%, rgba(254,193,81,1) 100%);
背景: -webkit-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
背景: -o-linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
背景: -ms-linear-gradient(上、rgba(254,231,154,1) 0%、rgba(254,193,81,1) 100%);
背景: linear-gradient(top, rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
フィルター: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee79a', endColorstr='#fec151',GradientType=0 );
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-境界線の半径: 30px;
境界線の半径: 30px;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8) インセット;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.8) インセット;
-ms-box-shadow: 0 1px 0 rgba(255,255,255,0.8) インセット;
-o-box-shadow: 0 1px 0 rgba(255,255,255,0.8) インセット;
ボックスシャドウ: 0 1px 0 rgba(255,255,255,0.8) インセット;
境界線: 1px 実線 #D69E31;
色: #85592e;
カーソル: ポインタ;
フロート: 左;
フォント: 太字 15px Helvetica、Arial、サンセリフ;
高さ: 35px;
マージン: 20px 0 35px 15px;
位置: 相対的;
テキストシャドウ: 0 1px 0 rgba(255,255,255,0.5);
幅: 120ピクセル;
}
#コンテンツフォーム入力[type="submit"]:hover {
背景: rgb(254,193,81);
背景: -moz-linear-gradient(top, rgba(254,193,81,1) 0%, rgba(254,231,154,1) 100%);
背景: -webkit-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
背景: -o-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
背景: -ms-linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
背景: linear-gradient(top, rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
フィルター: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#fee79a',GradientType=0 );
}
#コンテンツフォーム div a {
色: #004a80;
フロート: 右;
フォントサイズ: 12px;
マージン: 30px 15px 0 0;
テキスト装飾: 下線;
}
。ボタン {
背景: rgb(247,249,250);
背景: -moz-linear-gradient(top, rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);
背景: -webkit-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
背景: -o-linear-gradient(top, rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
背景: -ms-linear-gradient(上、rgba(247,249,250,1) 0%、rgba(240,240,240,1) 100%);
背景: linear-gradient(上、rgba(247,249,250,1) 0%、rgba(240,240,240,1) 100%);
フィルター: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0',GradientType=0 );
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1) インセット;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1) インセット;
-ms-box-shadow: 0 1px 2px rgba(0,0,0,0.1) インセット;
-o-box-shadow: 0 1px 2px rgba(0,0,0,0.1) インセット;
ボックスシャドウ: 0 1px 2px rgba(0,0,0,0.1) インセット;
-webkit-border-radius: 0 0 5px 5px;
境界線の半径: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
境界線の半径: 0 0 5px 5px;
上境界線: 1px 実線 #CFD5D9;
パディング: 15px 0;
}
.ボタン{
背景: url(https://cssdeck.com/uploads/media/items/8/8bcLQqF.png) 0 -112px 繰り返しなし;
色: #7E7E7E;
フォントサイズ: 17px;
パディング: 2px 0 2px 40px;
テキスト装飾: なし;
-webkit-transition: すべて 0.3 秒の緩和;
-moz-transition: すべて 0.3 秒のイーズ;
-ms-transition: すべて 0.3 秒の緩和;
-o-transition: すべて 0.3 秒の緩和;
遷移: すべて 0.3 秒の緩和;
}
.button a:hover {
背景位置: 0 -135px;
色: #00aeef;
}
上記は、html+css3 で実装されたログイン インターフェースの詳細です。html+css3 ログイン インターフェースの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 |
>>: バランスの取れたデジタルスクロール効果を実現するJavaScript
推薦する
Centos7でのSambaサーバー構成（実戦）
サンバの概要Samba は、Linux および UNIX システム上で SMB プロトコルを実装する...
HTMLで境界線を設定する3つの方法の詳細な説明
HTML で境界線を設定する 3 つの方法 境界線の幅: 1px 2px 2px; 境界線のスタイル...
MySQL の隠し列の詳細表示
目次1. 主キーが存在する2. 主キーはないが、一意のインデックスが存在する3. 共同主キーまたは共...
Vue 条件付きレンダリング v-if と v-show
目次1. 動詞-if 2. <template> で v-if を使用する3. キーを使...
キャンバスでPS消しゴムスクラッチカードの効果を実現するためのJSの使用方法の詳細な説明
目次効果のデモンストレーション:メインJSコード実装 <div class="box...
Spring Cloud での Docker デプロイメントに jib を使用する詳細な手順
ジブの紹介Jib は Google が開発した、Java アプリケーションの Docker および ...
CSS の子要素の Z インデックスと親要素の兄弟ノードの階層問題を解決する
1. 問題の出現フラット リストを作成しました。リストの一部には、マウスをホバーすると表示されるポッ...
Mysql 8.0.18 ハッシュ結合テスト (推奨)
ハッシュ結合ハッシュ結合は実行にインデックスを必要とせず、ほとんどの場合、現在のブロックネストループ...
HTML テーブル マークアップ チュートリアル (15): テーブル タイトル
<br />このタグを使用すると、表のタイトルを直接追加し、タイトル テキストの配置プロ...
テキストまたはJSONを返すようにnginxを設定する方法
特定のインターフェースをリクエストするときに、指定されたテキスト文字列または JSON 文字列を返す...
ラベルタグを使用してテキストをクリックしてラジオボタンを選択します
<label> タグは、入力要素のラベル (タグ) を定義します。ラベル要素はユーザーに...
WeChatアプレット認証ログインを処理するエレガントな方法
序文WeChat ミニプログラム プロジェクトでユーザー情報を取得し、ユーザー ログインを実装する場...
Win10でのJDKのインストールと環境変数の設定に関する詳細なチュートリアル
目次序文1. 準備2. インストール3. 環境変数を設定する1. 「新規」をクリックすると、ポップア...
K8Sの5つのコントローラーの紹介と使用
目次k8sのコントローラータイプポッドとコントローラの関係デプロイメント（ステートレスアプリケーショ...
WeChatアプレットでラッキーホイールゲームを実装する方法
ここでは主に、WeChat アプレットでラッキーホイール ゲームを開発する方法を紹介します。主に J...