プロファイルカードの作成

こんにちはDEVS、私の最初の時間ここで書く.私はどのようにGlassmorphicプロフィールカードを作ったかを共有したいと思います.
─
私はcodeenを使用して、私はちょうど“新しいペン”をクリックすることができますし、コーディングを開始便利な見つけるコツを使用します.
だから、任意の時間を無駄にすることはできませんし、実際のものを作り始める.
─
まず最初に、私たちは通常のHTML文書から始めます.
─
─
これをコピーするか、単にフォント素晴らしいウェブサイトから最新版をコピーしてください.
さあ
div要素を追加してセンタリングします.
唐辛子
─
─
高さと幅は完全にあなたのニーズに従っています、その後、我々は「マージン:Auto」を使用して水平に中央のdivをして、それからLilトップマージンを与えました.
2 .さて、メインパーティションに2つのパーティションを追加します.
写真と情報の1つ.
─
今、我々は、メインの部門内のきれいに私たちの写真divと情報divを配置するグリッドレイアウトを使用することができます
─
これによって、私たちは40 %の幅を写真divと60 %の幅に情報部に与えました.
3私たちのメインカードをスタイルを追加し、背景画像を追加します.
─
我々は、背景に2つのほぼ透明色の斜め線形勾配を追加しました.
それから、背景ぼかしフィルタは、それがガラスのように見えるようにします.
境界線は、カードをより多く見て、我々がガラスの角で持っている細い線をつくる境界線を作るために.
そして、箱の影は、深さの幻想を与えます.
─
私はあなたがバックグラウンドとして使用する大きなsur暗い壁紙を認識できることを確認してください.
さて、カードはカードのように見え始めます.
─
スタイリングカードはほとんど行われ、今、あなたは何をしたいカードを追加することができますが、この特定のポストは、我々はプロファイルカードに取り組んでいるので、それを得ることができます.
4あなたの写真を追加し、それが良いようにスタイルを追加します.
私はunsplashからダミーイメージを取った、あなたはこれであなたの写真を使用する必要があります.
─
─
ここで、我々は写真divのためにFlex表示を使用しました、そして、我々はそれにイメージでイメージタグを加えました.
イメージは、正当化内容を使用して、中間に整列して、アイテムを整列させます.
[フレックスについては良いですが、アライメントは簡単です.
さて、写真のスタイリングも、メインカードをガラスにどのように作ったかについてはかなり理解できます.
何が新しい境界線です、そして、あなたはそれを知っていなければなりません
「境界半径:50 %;」円を意味します.
さて、あなたのカードがこのように見えるならば、あなたはすべてを正しくしました.
─
すべてが今まで良いならば、次のステップに進んでください.
今すぐカードをあなたの名前を与え、いくつかの連絡先のリンクを追加することができます.
あなたは今フォントを選択する必要があります、私はMontserratを選択する必要があります、私はあなたが同じを選択することを好むが、バーは、あなたの想像力を野生に実行し、いくつかの他のフォントは、それが良く見えることができますしよう.
インポートタグを
─
今すぐ名前を書きましょう
─
私は情報divを2に分けました.連絡先リンクの名前と別の1つ.
今、あなたの社会的アカウントにいくつかのリンクを追加します.
─
ここでは、フォントの素晴らしいアイコンを使用してリンクとして社会的なアイコンを追加します.
はい、何も良い今すぐ見えます.それはよく見えるように魔法のCSSを使用してみましょう.
─
さて、LemmeはこのCSSを壊します
我々は再び情報divと中心的なアイテムのためにflexを使用しました.
私たちは名前をより白い色にしました、しかし、まだ多少半透明で、名前スタイリングの境界は名前とリンクの間のきちんとした線を作るためです.
今、社会的なアイコンは、私たちが私たちのカードをスタイリングし、サイズを変更することができますあなたの願望ごとに、48 px私に適しているようにスタイルを整えているので、私は48 pxを続けた.
連絡先リンクに小さなホバー効果を追加しましょう
─
─
おめでとう!あなたは私の最初のポストをしたし、あなたと素敵なガラスのプロファイルカードを持っている.
─
このCodepenの1つの余分なものは、社会的なアイコンに加えられたグラデーションです.次のポストできっと説明します
そして、ねえ、このポストを好み、後でそれを参照できるようにそれを保存してください.
フレンドになりたい人
そして、これがコメントでよりよくされることができるならば、私に話してください.
ありがとう、良い一日を.🙂