html - 添付の Facebook ログイン画面のように見えるように CSS グラデーションを設計するにはどうすればよいですか

Question

CSSの使い方を学んでいます。アプリの開発の一環として、UI に情報をカード形式で表示する必要があります。CSS3でグラデーションを正しく取得できないようです。このリッチな外観を得るために Photoshop を使用したくありません。どんな提案も役に立ちます。特に、ログイン ウィンドウの背後にある白いハイライトについてヘルプを使用できます。

Answer 1

完全な解決策を提供するつもりはありませんが、それを達成する方法のヒントをいくつか示します。

1. radial gradient背景を中央で明るくし、端近くで暗くするために使用します。グラデーションの途中にログイン画面が表示されるので、白いハイライト効果が得られます！

2. linear gradientログインフォームウィンドウの背景としてのユーザー。

3. border-radiusログインフォームウィンドウに設定して、ウィンドウの端を丸くします。

4. box-shadowウィンドウのログイン時に、そのウィンドウの下の影に設定します。

Answer 2

（タイトルにあるので、グラデーションの作成方法だけを知りたいと思います）

1）ブラウザのカラーピッカー拡張機能（Chromeのスポイトなど）を使用して色を選択します

2）このクールなCSS3グラデーションジェネレーターを使用します：http：//www.colorzilla.com/gradient-editor/

そして、これで完了です:)。