Glass Effect in React

Hello Guys Today i am going to show you a contact page template which you might like and can use for your project.
This tutorial is straightforward and i am assuming you are already familiar with React

Lets get started...

Here is the working Demo , Open the Webpage and Click on "Contact" button.

https://knowledge-earth2k99.netlify.app/

First run this npm command in your terminal -

npm i react-icons tailwindcss

npx tailwindcss init

Add this cdn in your html file

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

Structure of the page

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:[e-mail]"
            >
              <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;

Exaplaination

• First We have imported the required modules, Icons from "react-icon" and our CSS file named "Contact.css".

• Then we created a state named display to create a button which will show and hide the contact icons.

• Then we created a div with class ".bg-image" , it will have the image as background which we are going to give blur effect (The image link is provided in the CSS code below).

• Then we created a div with class ".bg-text" , it will have the text part and icons and button part.

• Then we created the text inside , icons and a button to toggle icons ( show and hide ).

• In the button , we have used the onClick method to toggle the state of "display" and we have placed all the icons inside a div and that div has a style attribute inside which we have used the ternary operator which sets the display property of that div, if the "display" state is set to false the div will be hidden and if the "display" stats is set to true the div will be shown as flexbox.

• Inside all the "anchor" tags , we have passed the links related to icons,for whatsapp icon , we have used the whatsApp link with your phone number and when the user click the icon , it will redirect to your whatsapp chat and same for other icons linkedin, instagram and gmail, you can add icons according to your need like github or any other thing which you want your users to redirect to.

• We have given some elements additional class names to use that class name to style the element in CSS file ( Tailwindcss is best but has some limitations which can be solved by pure css ).

NOTE - The classes used for styling here is tailwindcss classes.

CSS File -

*{
    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;
    }
  }

Explaination -

• First we have set the background image and other background properties of "bg-image" class, then we have blurred the element using filter property.
• Then we have styled the "bg-text" class , The properties position,top,left,transform is used to put the element inside the element with class "bg-image" and z-index:2 means it will be in upper layer and the blurred element will be in lower layer and rest of the styling is normal css.
• Then we have set the size of icons using the class name "contactIcons" and we have given this classname to all the icons elements.
• Then we have used the media queries to adjust the elements size according to screen breakpoint.

Output - PC View

Output - Phone View

Thats it for this post.
THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/waadu-css-a-mini-framework-4bfi

https://dev.to/shubhamtiwari909/styled-componenets-react-js-15kk

https://dev.to/shubhamtiwari909/introduction-to-tailwind-best-css-framework-1gdj

Comments

[Andrew Bone]

You can do quite a nice glass look with the backdrop-filter blur effect. Currently only firefox is holding out on the feature but they have it behind a flag so they'll catch up soon.

[Shubham Tiwari]

Sure i would try it

[Sooraj (PS)]

Nice article, I found one thing you could probably change.

It's better if you setup tailwind as a package rather than access from the cdn. Their documentation states this and it gives you a lot of configurability and also its better off using a tailwind.config.js to just purge the unused css.

[Shubham Tiwari]

I provide the cdn for the beginners so they can use it easily
I installed TailwindCss as a package manager with its config.js file