ガラス効果

こんにちは今日の私はあなたのように、プロジェクトのために使用できる連絡先ページのテンプレートを表示するつもりです.
このチュートリアルは簡単ですし、既に反応に精通していると仮定します
始めましょう.

ここでは、デモを開き、Webページを開き、“連絡先”ボタンをクリックします.
https://knowledge-earth2k99.netlify.app/

最初にこのNPMコマンドを実行します.

npm i react-icons tailwindcss

npx tailwindcss init

このCDNをあなたのHTMLファイルに加えてください

<script src="https://cdn.tailwindcss.com"></script>

ページの構造

import React, { useState } from "react";
import { AiOutlineWhatsApp } from "react-icons/ai";
import { MdOutgoingMail } from "react-icons/md";
import { AiFillLinkedin } from "react-icons/ai";
import { BsInstagram } from "react-icons/bs";
import "./Contact.css";

const Contact = () => {
  const [display, setDiplay] = useState(false);
  return (
    <div>
      <div className="bg-image"></div>
      <div className="bg-text">
        <h2 className="text-2xl py-3">I am Shubham Tiwari</h2>
        <h1 className="text-4xl py-3 postTitle">WEB DEVELOPER at DevRonnins</h1>

        <div
          style={{ display: display ? "flex" : "none" }}
          className="flex justify-center align-middle my-4 p-2"
        >
          <p className="flex justify-center align-middle my-2 p-2 space-x-5">
            <a className="text-xl linkText" href="https://wa.me/YOUR_PHONE_NUMBER_WITH_COUNTRY_CODE">
              <AiOutlineWhatsApp color="#ffcec5" className="contactIcons" />
            </a>
          </p>
          <p className="flex justify-center align-middle my-2 p-2 space-x-5">
            <a
              className="text-xl linkText"
              href="mailto:[email protected]"
            >
              <MdOutgoingMail color="#ffcec5" className="contactIcons" />
            </a>
          </p>
          <p className="flex justify-center align-middle my-2 p-2 space-x-5">
            <a
              className="text-xl linkText"
              href="https://www.linkedin.com/in/shubham-tiwari-b7544b193/"
              target="_blank"
              rel="noreferrer"
            >
              <AiFillLinkedin color="#ffcec5" className="contactIcons" />
            </a>
          </p>
          <p className="flex justify-center align-middle my-2 p-2 space-x-5">
            <a
              className="text-xl linkText"
              href="https://www.instagram.com/s_h.u_b.h_a.m_2k99/"
              target="_blank"
              rel="noreferrer"
            >
              <BsInstagram color="#ffcec5" className="contactIcons" />
            </a>
          </p>
        </div>
        <button
          onClick={() => setDiplay(!display)}
          className="ring-2 ring-red-200 bg-none text-slate-200 rounded-md px-4 py-2 my-4"
        >
          Contacts
        </button>
      </div>
    </div>
  );
};

export default Contact;

拡張

最初に必要なモジュール、「反応アイコン」からのアイコンと「contact . css」という名前のCSSファイルをインポートしました.

私たちは表示という名前の状態を作成し、ボタンを作成し、連絡先アイコンを非表示にします.

私たちはクラス「. bgイメージ」を使ってdivを作成しましたが、背景としてイメージを持ちます.

クラス「bg text」でdivを作成し、テキスト部分とアイコンとボタン部分を持つ.

私たちは、アイコン、アイコンを切り替えるには、ボタンのアイコンを表示します.

ボタンの中で

、我々は“ディスプレイ”の状態を切り替えるためにOnClickメソッドを使用して、我々はdivの中にすべてのアイコンを配置していると、そのdivは、そのdivの表示プロパティを設定する三項演算子を使用しているスタイルの属性を持っています.“display”状態がfalseに設定されている場合、divは隠され、“display”統計がtrueに設定されている場合、divはflexboxとして表示されます.

すべての“アンカー”タグの中で、我々は、リンクには、WhatsAppのアイコンのためのアイコンに関連するリンクを通過している、我々はあなたの電話番号とWhatsAppのリンクを使用しているときにユーザーがアイコンをクリックすると、それはあなたのWhatsAppのチャットにリダイレクトされ、他のアイコンLinkedIn、InstagramとGmailのにリダイレクトされます.あなたはGitHubまたはあなたのユーザーがリダイレクトする必要がある他のもののようなあなたの必要性に応じてアイコンを追加することができます.

私たちはいくつかの要素にクラスクラス名を使用してCSSファイルの要素をスタイル化するようにしました.

注意-ここでのスタイルに使用するクラスはTailWindCSSクラスです.

CSSファイル

*{
    box-sizing: border-box;
  }
  .bg-image{
    /* background properties */
    background-image: url("https://wallpaperaccess.com/full/1163661.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* display properties */
    height: 100vh;
    filter: blur(8px);
  }

  .bg-text{
    width: 70%;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
    text-align: center;
    color: aliceblue;
    font-weight:600;
    box-shadow: 10px 10px 30px black;
    padding: 3rem;
    border: 2px solid white;
    border-radius: 10px;
    text-shadow: 1px 1px 3px black;
  }

  .contactIcons{
    font-size: 2.5rem;
  }

  @media screen and (min-width:100px) and (max-width:500px){
    .bg-text{
      width: 90%;
      top: 80%;
    }
    .postTitle{
      font-size: 1.8rem;
    }
    .linkText{
      font-size: 0.7rem;
    }
    .contactIcons{
      font-size: 1.5rem;
    }
  }

説明

最初に“BG Image”クラスの背景画像やその他の背景プロパティを設定し、フィルタプロパティを使用して要素をぼかしました.

私たちは“bg text”クラス、プロパティの位置、トップ、左、トランスフォームを使用して要素内の要素“BGイメージ”とZ - Indexを使用します.

そして、私たちはクラス名「ContacactiCons」を使用しているアイコンのサイズを設定しました.そして、スクリーンブレークポイントに従って要素サイズを調節するために、メディア質問を使用しました.
出力- PCビュー


出力-電話ビュー

このポストのためにそれをthatsします.
この投稿を読んでいただきありがとうございます、あなたがどんなミスを見つけたり、提案をしたい場合は、コメントのセクションで言及してください.
^ ^ ^ありがとうございました👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck
また、これらのポストをチェック