Glassmorphic Model In HTML Javascript And CSS - letsbug

    In this article we are creating a model in HTML CSS and Javascript. And this model is going to be a card like element and with have that glass effect which we call Glassmorphic Design.

    There is nothing much that you should know before doing this its just a simple single .html page in which we will add internal css and internal javascript.

    So there is only one page that is index.html. If you only know HTML and CSS with a little Javascript you are ready to go.

Glassmorphic Model In HTML, CSS And Javascript


code: HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glassmorphic Model</title>
    <style>

    </style>
</head>

<body>
    <button class="open-model-btn ">Open Model</button>
    <article class="model-container hide">
        <div class="model">
            <div class="model-title">
                <h1>Model Opened</h1>
            </div>
            <div class="model-content">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio nesciunt fuga aliquam fugiat
                    doloremque nobis asperiores odio. Harum, explicabo fugiat!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati, iure.</p>
            </div>
            <div class="model-footer">
                <button class="cancle-btn">cancel</button>
                <button class="ok-btn">Ok</button>
            </div>
        </div>
    </article>
</body>

<script>
   
</script>

</html>

code: Styles - Add this in style tag 

   * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100vw;
            height: 100vh;
            background: url('https://source.unsplash.com/random/1920x1080/?beach');
            background-size: cover;
            overflow: hidden;
        }

        .model-container {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            overflow: hidden;
            display: grid;
            place-items: center;
        }

        .model {
            width: 80%;
            height: fit-content;
            border: none;
            padding: 1rem 1.5rem;
            border-radius: 1rem;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(5px);
            background-color: rgba(255, 255, 255, 0.2);
        }

        .model-title {
            padding: .5rem 0;
        }

        .model-title h1 {
            font-size: 2rem;
            font-weight: bold;
            color: white;
        }

        .model-content {
            padding: .5rem 0 1rem 0;
        }

        .model-content p {
            font-size: 1.2rem;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            color: white;
        }

        .model-footer {
            padding: .5rem 0;
        }

        .model-footer button {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 1rem;
            background-color: white;
            text-align: center;
            font-size: 1.2rem;
            font-weight: lighter;
            color: rgb(58, 58, 58);
            cursor: pointer;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
            margin: 0 .5rem;
        }

        .model-footer button:hover {
            background-color: rgb(58, 58, 58);
            color: white;
            transition: all 0.3s ease-in-out;
        }

        .hide {
            display: none;
            transition: all 0.3s ease-in-out;
        }

        .open-model-btn {
            background-color: white;
            border: none;
            border-radius: 1rem;
            padding: 1rem 2rem;
            cursor: pointer;
            font-size: 1.2rem;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease-in-out;
            margin: 2rem 2rem;
        }

code: animation - Add this in styles tag

    @keyframes click {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

        @keyframes closeModel {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

        @keyframes openModel {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

code: scripts - Add this in scripts tag

 const openModelBtn = document.querySelector('.open-model-btn');
    const modelContainer = document.querySelector('.model-container');
    const cancelBtn = document.querySelector('.cancle-btn');


    openModelBtn.addEventListener('click', () => {
        openModelBtn.style.animation = 'click .3s linear forwards';
        modelContainer.style.animation = 'openModel .3s linear forwards';
        modelContainer.classList.remove('hide');
    });

    modelContainer.addEventListener('click', (e) => {
        openModelBtn.style.animation = '';
        if (e.target.classList.contains('model-container')) {
            modelContainer.style.animation = 'closeModel .3s linear forwards';
            setTimeout(() => {
                modelContainer.classList.add('hide');
            }, 300);
        }
    });

    cancelBtn.addEventListener('click', () => {
        modelContainer.style.animation = 'closeModel .3s linear forwards';
        setTimeout(() => {
            modelContainer.classList.add('hide');
        }, 300)
    });

output:

Glassmorphic card model in html css and javascript
Before Opening The Model

Glassmorphic card model in html css and javascript
After Opening The Model


Comments

Post a Comment

Categories

A Triumph of Surgery Agriculture Array Array Left Rotation Auto Completing Input Basic Question Answers BBA.CA BCA Beehive Big Data
Big Data Analytics Binary Search Binary Search Tree Binary To Decimal binary tree Breadth First Search Bubble sort C Programming c++ Chemical Reaction and equation class 10 class 10th Class 9 Climate Complex Numbers computer network counting sort CSS Cyber Offenses Cyber Security Cyberstalking Data Science Data Structures Decimal To Binary Development diamond pattern Digital Marketing dust of snow Economics Economics Lesson 4 Email Validation English fire and ice Food Security in India Footprints Without feet Forest And Wildlife Resources game Geography Geography lesson 6 glassmorphism Glossary Graph HackerRank Solution hindi HTML image previewer India-Size And Location Insertion Sort Internet Network Status Interview Questions Introduction to cyber crime and cyber security IT javascript tricks json to CSV converter lesson 2 lesson 1 lesson 2 Lesson 3 Lesson 6 lesson 7 Life lines of National Economy life processes Linear Search Linked List lowest common ancestor Machine Learning MCQs median in array Merge sort min and max of two numbers Moment Money and Credit My Childhood Natural Vegetation and Wildlife NCERT Network connectivity devices Network Models Network Security No Men Are foreign Node.js operator overloading P5.js PHP Physical features of India Population Prime Numbers python Quick sort R language Rain on the roof Regular Expression Resources and development reversing array saakhi science Searching Algorithm Selection sort Social Media Marketing social science Software Engineering Software Testing Sorting Algorithm Stacks staircase pattern System Concepts Text Recognition The last Leaf time converter Time Passed From A Date Todo List App Tree Trending Technologies Understanding Economic Development username and password video player Visualization water resources Wired And Wireless LAN साखी
Show more

Popular Posts

Big Data MCQs(multiple choice questions) with answers - letsbug

     In this article we have 30  MCQs(multiple choice questions) on Big Data with answers. 1. According to analysts, for what can traditional IT system provide a foundation when they're integrated with big data technologies like Hadoop?  Big data management and data mining  Data warehousing and business intelligence  Management and business  Collecting and storing unstructured data Answer: 1 2. What are the main components of Big Data? MapReduce HDFS YARN All of these     Answer: 4 3. What are the different features of Big Data Analytics?  Open-Source  Scalability  Data Recovery  All of the above Answer: 4 4. According to analysts, for what can traditional IT systems provide a foundation when they're integrated with big data technologies like Hadoop? Big data management and data mining  Data warehousing and business intelligence  Management of Hadoop clusters  Collecting and storing unstructured data Answer: 2 5. What are the four V's of Big Data?. Volume Velocity Variety
Read More »

Digital Marketing MCQ(Multiple Choice Questions) with Answers | part 1 | letsbug

      Digital marketing is a subset of marketing that is used to promote a brand or product using one are more electronic technologies. The goal is to influence target consumers in taking action .     Digital marketing is the term used for the targeted, measurable, and interactive marketing of products or services using digital technologies to reach the viewers, turn them into customers, and retain them.       Digital marketing is on the rise and here are some Digital marketing MCQs to get you running in this field on new age media. 1. Which of the following describes E-commerce  Doing Business electronically   Doing business  Sale of goods   All of the above Answer: 1 : Doing Business electronically 2. Which of the following is not the type of E-commerce. B2C E2E B2B C2C  Answer: 2 : B2C 3. Which of the following is the benefit of E-commerce. Reduced Prices Global marketplace Any time access All of the above   Answer: 4 : All of the above 4. Which of the following is not the adva
Read More »

Software Engineering MCQs questions with answers - letsbug

Introduction to Software Engineering MCQs 2021 for BBA.CA, BCA and B.Tech students 1. What is a Software? Software is set of programs. Software is documentation and configuration of data. Software is set of programs, documentation & configuration of data None of the above Answer: 3 2. Which of  the following is not the characteristic of Software? Software does not wear out Software is flexible Software is not manufactured Software is always correct Answer: 4 3. Layers in layered technology of software are ...... Process, Methods, Tools Internal, External, Central Inner, Outer, Middle Procedure, Methods, Task Answer: 1 4. Which is not McCall's software quality factor? Product Revision Product Transition Product Operation Product Generation Answer: 4 5. Which is characteristic of software process? Understanding Visibility Reliability All of the above Answer: 4 6. Which of the five Generic Software Engineering Framework Activites? Communication, Planning, Modelling, construction,
Read More »