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.
Table Of Contents
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.
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:
Read Also:
- Blurred Image Background | HTML And CSS
- Image Drag And Drop Animation | HTML And CSS
- Image Overlay Effect On Hover | HTML And CSS
- Image Zoom On Hover | HTML And CSS
- Split Image On Hover | HTML And CSS
- Swap Image On Hover | HTML, CSS And jQuery
- Bookmark Interaction Animation | Html Css And Gsap
- Cursor Animation With Hover Effect Using GSAP | HTML, CSS And GSAP
- Full Screen Responsive Overlay Navigation Bar Design | HTML ,CSS And GSAP
- Gaming CPU Landing Page Design Using GSAP | HTML, CSS And GSAP
- Page Loading With Intro Using GSAP | HTML, CSS And GSAP
- Page Transition Animation Using GSAP | HTML, CSS And GSAP
- Portfolio Landing Page With Responsiveness | HTML, CSS, jQuery And GSAP
- Website Loader Animation Using GSAP | HTML, CSS And GSAP
Comments
Post a Comment