html+css3で実装されたログインインターフェース

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 の他の関連記事に注目してください。

<<:  Linux の圧縮および解凍コマンドの紹介

>>:  バランスの取れたデジタルスクロール効果を実現するJavaScript

推薦する

MySQL5.7 マスタースレーブ構成例の分析

MySQL5.7マスタースレーブ構成の実装方法、具体的な内容は次のとおりですインストール環境:マスタ...

XshellがvirtualBox仮想マシンに接続できない問題の解決策

まず、VirtualBox仮想マシンのネットワーク設定モードについて説明します。NAT+ホストオンリ...

VMware Workstation のダウンロードとインストールの詳細なチュートリアル

仮想マシンは非常に便利なテストソフトウェアです。ハードウェアに損傷を与えることなく、さまざまなテスト...

カルーセル効果を実現するためのネイティブJavaScript+CSS

この記事では、参考までに、カルーセル効果の具体的なコードをJavaScript+CSSを使用して実装...

Linux での i3 ウィンドウ マネージャーの設定と使用に関するチュートリアル

この記事では、Fedora 28 に i3 をインストールして簡単に設定する方法を説明します。 1....

一般的なMySQLストレージエンジンの長所と短所

目次すべてのストレージエンジンを表示InnoDB ストレージ エンジンMyISAM ストレージエンジ...

Node.js の非同期イテレータの詳細な説明

目次序文非同期イテレータとは何ですか?非同期イテレータストリームとしてページング機能を備えたAPIの...

Docker共通コマンドの詳しい解説 Study03

目次1. ヘルプコマンド2. ミラーコマンド3. コンテナコマンド1. ヘルプコマンド1. 現在のD...

VUE + OPENLAYERSがリアルタイムポジショニング機能を実現

目次序文1. ラベルスタイルを定義する2. GeoJSONデータのシミュレーション3. Vercto...

Vueタイマーの詳細な使い方

この記事では、参考までにタイマーを実装するためのVueの具体的なコードを紹介します。具体的な内容は次...

Windows での Tomcat サーバーのインストールに関するチュートリアル

1 ダウンロードして準備するまず、公式ウェブサイトからTomcatをダウンロードする必要があります。...

html の img src="" で js 関数または js 変数を呼び出して、画像パスを動的に指定します。

この問題に関して、オンライン リソースをたくさん見つけました。ここにいくつかの方法を示します。コード...

一般的なイベントを処理するための JavaScript の使用に関する詳細な説明

目次1. フォームイベント2. マウスイベント3. キーボードイベント4. 共通イベントメソッド(ウ...

少なくとも7日間連続して注文を行ったユーザーに対するSQLクエリ

テーブルを作成するテーブル order(id varchar(10),date datetime,o...

Bツリーの特性の紹介

B ツリーは一般的なデータ構造です。彼と一緒にB+ツリーがあります。ここで、概念を明確にする必要があ...