Unfold the Magic: Creating an Envelope Using HTML and CSS

Today, we're going to embark on a creative journey to craft a stylish and visually appealing envelope animation using HTML and CSS. Envelopes, often used for mailing letters and cards, are an integral part of communication.

But who says envelopes should be confined to the world of snail mail? With a touch of web design flair, we can transform a simple HTML structure into a delightful digital envelope that's perfect for adding unique character to your website.

In this tutorial, we'll dive into the code and learn how to create an HTML envelope element complete with folded flaps and even a message counter. Whether you're looking to add a touch of whimsy to your personal blog or enhance the user experience on your business website, this envelope design is a creative way to engage your audience.

Let's get started on this fun and visually appealing project that will surely leave your website visitors pleasantly surprised.

<div class="main-container">
    <div class="envelope">
        <div class="msg"><span class="count">4</span></div>
        <div class="top-part"></div>
        <div class="right-part"></div>
        <div class="left-part"></div>
    </div>
</div>

This HTML code represents a simple webpage structure with a single container element, main-container, that holds an envelope-shaped element with various parts for creating a visual effect. Let's break down the components:

<div class="main-container">: This is the main container for the entire webpage. It's a wrapping element that holds the envelope.
<div class="envelope">: This div represents the envelope. It's likely styled using CSS to create the appearance of an envelope.
<div class="msg">: This is used to show the message. Inside it, there is a sub-container for the message. This can be used to display the number of messages or notifications. In this case, the number "4" is placed inside a span element with the class "count."
<div class="top-part">, <div class="right-part">, <div class="left-part">: These three div elements represent different parts of the envelope: the top flap, the right side, and the left side. They are likely styled using CSS to create the appearance of a closed envelope with folded flaps.

Overall, this HTML structure serves as the foundation for creating a visual representation of an envelope, which can be further styled using CSS to achieve the desired appearance.

.main-container,
.envelope {
    display: flex;
    justify-content: center;
}

.main-container {
    min-height: 100vh;
    align-items: center;
    min-width: 200px;
}

.envelope {
    width: 160px;
    height: 80px;
    cursor: pointer;
    position: relative;
    perspective: 1000px;
    background: #0d305e;
    border-radius: 0 0 10px 10px;
    transform-style: preserve-3d;
}

.msg {
    bottom: 0;
    width: 80%;
    height: 80%;
    color: white;
    transition: .5s;
    position: absolute;
    text-align: center;
    border-radius: 5px;
    background: #dddddd;
}

.msg::before,
.msg::after {
    content: '';
    left: 5%;
    height: 10px;
    position: absolute;
    border-radius: 50px;
    background: #cbcbcb;
}

.msg::before {
    top: 15%;
    width: 42%;
}

.msg::after {
    top: 40%;
    width: 50%;
}

.count {
    top: -15%;
    right: -10%;
    width: 25px;
    height: 25PX;
    font-size: 20px;
    opacity: 0;
    font-weight: 600;
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    font-family: calibri;
    background: #f46868;
    box-shadow: 0px 0px 2px 1px #47464661;
    transition: transform 1s .5s, opacity 1s .5s;
}

.left-part,
.right-part {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 4;
    bottom: 0%;
    filter: drop-shadow(0px 0px 1px rgb(0, 0, 0));
}

.left-part::before,
.right-part::before,
.top-part::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0 0 10px 10px;
}

.left-part::before {
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    background: #0b2a66;
}

.right-part::before {
    background: #1d3c7b;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.top-part {
    width: 100%;
    height: 50%;
    position: absolute;
    transition: 1s .2s;
    transform-origin: top;
    transform: rotateX(1deg);
    filter: drop-shadow(0px 1px 1px rgb(0, 0, 0, .8));
}

.top-part::before {
    clip-path: polygon(0 0, 100% 0, 50% 100%, 0 0);
    background: #011e43;
}

.envelope:hover .msg {
    transform: translateY(-50px);
    transition: 1.5s .2s !important;
    z-index: 3;
}

.envelope:hover .count {
    transform: scale(1);
    opacity: 1;
}

.envelope:hover .top-part {
    transform: rotateX(190deg);
    transition: .5s !important;
    filter: none;
}

Main Container and Envelope Styling

main-container uses flexbox properties (display: flex, justify-content, and align-items) to center its content both horizontally and vertically. It's positioned absolutely, covering the entire viewport.
The envelope class represents the envelope element. It has a fixed width and height, with a blue background color (#0d305e). The border-radius property gives it rounded corners at the bottom.
It uses CSS properties like transform-style and perspective to create a 3D effect. The cursor property changes the cursor to a pointer when hovering.

Must Read: Professional Loading animation using HTML, CSS and JavaScript

Message Box: The msg class represents the message box inside the envelope. It has a white background and is initially at the bottom. The ::before and ::after pseudo-elements create decorative elements at the top of the message box.

Count Badge: The count is a notification badge that appears when hovering over the envelope. It initially has opacity: 0 and is scaled down (transform: scale(0)). When hovering, it scales up and becomes visible with a transition effect.

Hover Effects: When the envelope is hovered over, several transitions occur. The message box moves upward with a slight delay (transition: 1.5s .2s). The top part of the envelope rotates and filters are removed. The notification badge scales up and becomes visible.

We hope this tutorial has inspired you to think outside the box (or envelope!) when it comes to web design. Feel free to take this concept further, adding animations, interactivity, or custom functionalities to suit your unique project. The web is your canvas, and with HTML and CSS, you have the tools to bring your creative visions to life.

Thank you for joining us on this creative journey. We look forward to seeing the innovative ways you incorporate this envelope design into your web projects. If you have any questions or want to share your creations, please don't hesitate to reach out. Happy designing!

Download

Unfold the Magic: Creating an Envelope Using HTML and CSS

You might like