Email Envelope Design Using Html Css Only

In this article, we will guide you through the process of designing a stylish and functional email envelope using only HTML and CSS. Follow these step-by-step instructions to create an eye-catching email template. First, we'll begin by setting up the basic HTML structure for the email envelope, including the header, body. Then, we'll dive into the CSS styling, where you'll learn how to customize the envelope's appearance, from colors, borders and shadows. By the end of this tutorial, you'll have a well-designed email envelope that can be used for newsletters, announcements, or any other email communication icon. You can access gsap playlist for animation tutorials.

You can read more about web development from this playlist.

01. HTML
02. CSS
03. Output

HTML:

First, let's establish the fundamental structure of an HTML document, as depicted below. Following this, we'll link the necessary files and ensure that all required dependencies have been incorporated into the HTML document. Once these preparations are complete, we can proceed with crafting the HTML code, as detailed below.

<!DOCTYPE html>
<html>
<head>
  <title>Email Envelope Design Using Html Css Only</title>
</head>
<body>

  <div class="container">
     <div class="email"></div>
  </div>

</body>
</html>

<!DOCTYPE html>: This declaration specifies that the document is written in HTML5, the latest version of HTML.
<html>: This tag marks the beginning of the HTML document and contains all the HTML content.
<head>: This section typically contains meta-information about the document, such as the title, links to external resources like stylesheets or scripts, and metadata for search engines. In your code, you have the <title> element within the <head> section, which sets the title of the web page to "Email Envelope Design Using HTML CSS Only."
<body>: This section contains the visible content of the web page that users will see in their browsers.
<div class="container">: This is a <div> element with the class attribute set to "container." It's used for structuring and containing elements within your web page. In this context, it seems like you're preparing to create a container for your email envelope.
<div class="email">: This is another <div> element with the class attribute set to "email". It appears to be a placeholder for the email envelope itself. You'll likely use CSS to style and design this element to resemble an email envelope.

In this basic structure, we created an HTML document with a title and a container for your email envelope. To complete your email envelope design, you'll need to add CSS styles to the ".email" class and possibly additional HTML and CSS code to create the envelope's visual appearance and functionality.

Read Also:

CSS:

*{
  margin: 0px;
  padding: 0px;
}
html, body{
  background-color: #D6FFB7;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.email{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #58355E;
  height: 90px;
  width: 150px;
  overflow: hidden;
  border-radius: 4px;
}
.email:before{
  content: "";
  position: absolute;
  left: 8%;
  transform: rotate(45deg) skew(-4deg, -4deg);
  height: 129px;
  width: 118px;
  background-color: #58355E;
  bottom: -98%;
  box-shadow: -5px -5px 0px 0px #FFF;
}
.email:after{
  content: "";
  position: absolute;
  top: -95%;
  left: 14%;
  transform: rotate(45deg) skew(-4deg, -4deg);
  height: 130px;
  width: 118px;
  background-color: #58355E;
  box-shadow: 5px 5px 0px 0px #FFF;
}

Read Also:

Output:

Read Also:

Archive