CSS Email Background Shapes

Developer
Vanessa Vevoda
Size
3,044 Kb
Views
26,312
  1. CSS Email Background Shapes Previews
  2. CSS Email Background Shapes HTML Codes

How do I make an css email background shapes?

What is a css email background shapes? How do you make a css email background shapes? This script and codes were developed by Vanessa Vevoda on 12 September 2022, Monday.

CSS Email Background Shapes Previews
IQ Test

CSS Email Background Shapes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Email Background Shapes</title>
</head>
<body> <!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<meta name="viewport" content="width=device=width, inital-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta property="og:title" content="New Resources" />
<meta property="og:description" content="" />
<meta property="og:image" content="">
<style type="text/css">	.responsive-table-container {margin:10px auto; border-collapse:collapse}	.resource-container {margin:0 auto; padding: 0px; width:250px; height: 300px;}	.resource-container>table {border: 1px solid #ddd; box-shadow: 0 2px 4px 0 rgba(0,0,0,.1); margin: 10px;}	@media screen and (max-width: 600px) {	table {border-collapse: collapse;}	table[class="responsive-table"] {max-width:100% !important}	table[class="responsive-table-container"] {width: 100%!important; max-width: 90% !important; padding: 0px !important; margin-left: 0px !important; margin-right: 0px !important;}	.resource-container>table {width:100%!important; max-width:95%!important;}	.resource-container {font-size: 14px !important;line-height: 24px !important; padding: 12px !important; margin-left: 0 !important; margin-right: 0 !important; width:100%!important; max-width:95%!important; background-color: #fff !important;}	}
</style>
</head>
<body>	<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0" class="repsonsive-table">	<tbody>	<tr>	<td style="border-collapse: collapse; background: #fff; margin-left:0; margin-right:0; -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .3), 0 5px 20px 0 rgba(0, 0, 0, .13); -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .3), 0 5px 20px 0 rgba(0, 0, 0, .13); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .3), 0 5px 20px 0 rgba(0, 0, 0, .13);">	<table width="600" cellpadding="0" cellspacing="0" border="0" class="responsive-table-container" align="center">	<!--<tr>	<td class="resource-container" style="position: relative; overflow: hidden; border: 1px solid red;">	<table width="250" height="300" cellpadding="0" cellspacing="0" border="0" class="responsive-table-container" align="center">	<tr>	<td style="font-family: Helvetica, sans-serif; color: #363636; font-size: 16px; font-weight: normal; width:0; height: 50px; position: absolute;left: 20%;top: 0%;bottom: 20%;padding: 30%;transform: scaleX(-1) rotate(25deg);background: gold;">	<img src="http://transparent.clipartof.com/Royalty-Free-Vector-Clip-Art-Illustration-Of-A-Bunch-Of-Birthday-Balloons-Floating-10241057385.jpg" width="150" style="position:absolute; transform: scaleX(-1) rotate(25deg) translate(25%, 0%); top: 10%; left:25%;" />	<div style="font-weight: normal; position:absolute; transform: scaleX(-1) rotate(25deg) translate(50px, 60px); margin: 20px auto; text-align: center; width: 200px; height: 200px">	<h1 style="font-family: Helvetica, sans-serif; color: #363636; font-size: 16px; font-weight: normal;">Hello World</h1>	<p style="font-family: Helvetica, sans-serif; font-size: 12px; color: #555;">Blurb about the infamous hello.</p>	</div>	</td>	</tr>	</table>	</td>	<td class="resource-container" style="">	<table width="250" height="300" cellpadding="0" cellspacing="0" border="0" class="responsive-table-container" align="center">	<tr>	<td style="font-family: Helvetica, sans-serif; color: #363636; font-size: 16px; font-weight: normal; background-image: radial-gradient(transparent 0%, transparent 70%, rgba(255,255,255,1) 70%, rgba(255,255,255,1) 100%),radial-gradient(transparent 0%, transparent 40%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 100%), linear-gradient(rgba(255, 255, 255, 1) 50px, transparent 50px); background-size: 4px 200px, 0px; background-color: #EC173A; v-align: top; text-align: center;">Hello World	<p style="font-family: Helvetica, sans-serif; font-size: 12px; color: #555;">Blurb about the infamous hello.</p>	</td>	</tr>	</table>	</td>	</tr>-->	<!--make me responsive-->	<tr>	<td class="resource-container">	<table width="250" height="300" cellpadding="0" cellspacing="0" border="0" class="responsive-table-container" align="center">	<tr>	<td style="background: linear-gradient(110deg, transparent 0%, transparent 60%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 100%), linear-gradient(-160deg, transparent 0%, transparent 60%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 100%); background-size: 300px 300px; background-color: #009049; padding: 20px 30px; v-align: top; text-align: center;">	<img src="https://static.samaritanspurse.org.s3.amazonaws.com/email/images/occ/8150_resources_eblast/8150-resources-materials.png" />	<h4 style="font-family: Helvetica, sans-serif; color: #363636; font-size: 16px; font-weight: normal; margin:0 auto; padding:0">Order FREE Materials</h4>	<p style="font-family: Helvetica, sans-serif; font-size: 12px; color: #555;">Click here &rarr;</p>	</td>	</tr>	</table>	</td>	<td class="resource-container">	<table width="270" height="300" cellpadding="0" cellspacing="0" border="0" class="responsive-table-container" align="center">	<tr>	<td style="background: linear-gradient(112deg, transparent 0%, transparent 30%, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 100%); background-size: 500px 300px; background-color: #f2c90c; padding: 20px 30px; v-align: top; text-align: center;">	<img src="https://static.samaritanspurse.org.s3.amazonaws.com/email/images/occ/8150_resources_eblast/8150-resources-boxes.png" />	<h4 style="font-family: Helvetica, sans-serif; color: #363636; font-size: 16px; font-weight: normal; margin:0 auto; padding:0">Order Boxes</h4>	<p style="font-family: Helvetica, sans-serif; font-size: 12px; color: #555;">Click here &rarr;</p>	</td>	</tr>	</table>	</td>	</tr>	<!--make me responsive-->	<tr>	<td class="resource-container" style="">	<table width="270" height="300" cellpadding="0" cellspacing="0" border="0" class="responsive-table-container" align="center">	<tr>	<td style="background: radial-gradient(transparent 0%, transparent 80%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 100%), linear-gradient(0deg, white 0%, white 50%, transparent 50%, transparent 100%); background-size: 300px 300px; background-color: #1974b8; padding: 20px 30px; background-position-x: -10px; text-align: center;">	<img src="https://static.samaritanspurse.org.s3.amazonaws.com/email/images/occ/8150_resources_eblast/8150-resources-balloons.png" />	<h4 style="font-family: Helvetica, sans-serif; color: #363636; font-size: 16px; font-weight: normal; margin:0 auto; padding:0">Order Balloons</h4>	<p style="font-family: Helvetica, sans-serif; font-size: 12px; color: #555;">Click here &rarr;</p>	</td>	</tr>	</table>	</td>	<td class="resource-container" style="">	<table width="270" height="300" cellpadding="0" cellspacing="0" border="0" class="responsive-table-container" align="center">	<tr>	<td style="background: linear-gradient(-145deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, transparent 25%, transparent 40%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 75%, transparent 75%, transparent 100%); background-size: 500px 700px; background-color: #009049; padding: 20px 30px; v-align: top; text-align: center;">	<img src="https://static.samaritanspurse.org.s3.amazonaws.com/email/images/occ/8150_resources_eblast/8150-resources-videos.png" />	<h4 style="font-family: Helvetica, sans-serif; color: #363636; font-size: 16px; font-weight: normal; margin:0 auto; padding:0">Download Videos</h4>	<p style="font-family: Helvetica, sans-serif; font-size: 12px; color: #555;">Click here &rarr;</p>	</td>	</tr>	</table>	</td>	</tr>	<tr>	<td class="resource-container" style="">	<table width="270" height="300" cellpadding="0" cellspacing="0" border="0" class="responsive-table-container" align="center">	<tr>	<td style="background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,1) 10%, transparent 10%, transparent 60%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 100%), linear-gradient(10deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 10%, transparent 10%, transparent 80%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 100%), linear-gradient(-80deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 20%, transparent 20%, transparent 60%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 100%); background-size: 320px 400px, 600px; background-position-y: -48px; background-position-x: -60px; background-color: #f2c90c; padding: 20px 30px; text-align: center;">	<img src="https://static.samaritanspurse.org.s3.amazonaws.com/email/images/occ/8150_resources_eblast/8150-resources-packing-party.png" />	<h4 style="font-family: Helvetica, sans-serif; color: #363636; font-size: 16px; font-weight: normal; margin:0 auto; padding:0">Host a Packing Party</h4>	<p style="font-family: Helvetica, sans-serif; font-size: 12px; color: #555;">Click here &rarr;</p>	</td>	</tr>	</table>	</td>	<td class="resource-container" style="">	<table width="270" height="300" cellpadding="0" cellspacing="0" border="0" class="responsive-table-container" align="center">	<tr>	<td style="background: linear-gradient(-35deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, transparent 25%, transparent 32%, rgba(255,255,255,1) 32%, rgba(255,255,255,1) 75%, transparent 75%, transparent 100%); background-size: 500px 400px; background-color: #d10000; padding: 20px 30px; v-align: top; text-align: center;">	<img src="https://static.samaritanspurse.org.s3.amazonaws.com/email/images/occ/8150_resources_eblast/8150-resources-labels.png" />	<h4 style="font-family: Helvetica, sans-serif; color: #363636; font-size: 16px; font-weight: normal; margin:0 auto; padding:0">Follow Your Box Labels</h4>	<p style="font-family: Helvetica, sans-serif; font-size: 12px; color: #555;">Click here &rarr;</p>	</td>	</tr>	</table>	</td>	</tr>	<tr>	<td class="resource-container" style="">	<table width="270" height="300" cellpadding="0" cellspacing="0" border="0" class="responsive-table-container" align="center">	<tr>	<td style="background: linear-gradient(19deg, transparent 0%, transparent 30%, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 100%), linear-gradient(78deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 10%, transparent 10%, transparent 100%); background-size: 275px 300px; background-position: 0px -113px; background-color: #d10000; padding: 20px 30px; text-align: center;">	<img src="https://static.samaritanspurse.org.s3.amazonaws.com/email/images/occ/8150_resources_eblast/8150-resources-map.png" />	<h4 style="font-family: Helvetica, sans-serif; color: #363636; font-size: 16px; font-weight: normal; margin:0 auto; padding:0">Get Your Shoebox Tracker World Map</h4>	<p style="font-family: Helvetica, sans-serif; font-size: 12px; color: #555;">Click here &rarr;</p>	</td>	</tr>	</table>	</td>	<td class="resource-container" style="">	<table width="270" height="300" cellpadding="0" cellspacing="0" border="0" class="responsive-table-container" align="center">	<tr>	<td style="background-image: radial-gradient(transparent 0%, transparent 70%, rgba(255,255,255,1) 70%, rgba(255,255,255,1) 100%),radial-gradient(transparent 0%, transparent 60%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 100%), linear-gradient(rgba(255, 255, 255, 1) 50px, transparent 50px); background-size: 6px 900px,100px; background-color: #EC173A; padding: 20px 30px; text-align: center;">	<h4 style="font-family: Helvetica, sans-serif; color: #363636; font-size: 16px; font-weight: normal; margin:0 auto; padding:0">Order FREE Materials</h4>	<p style="font-family: Helvetica, sans-serif; font-size: 12px; color: #555;">Click here &rarr;</p>	</td>	</tr>	<tr>	<td style="background-image: radial-gradient(transparent 0%, transparent 70%, rgba(255,255,255,1) 70%, rgba(255,255,255,1) 100%),radial-gradient(transparent 0%, transparent 60%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 100%), linear-gradient(rgba(255, 255, 255, 1) 50px, transparent 50px); background-size: 6px 900px,100px; background-color: #EC173A; padding: 20px 30px; text-align: center;">	<h4 style="font-family: Helvetica, sans-serif; color: #363636; font-size: 16px; font-weight: normal; margin:0 auto; padding:0">Order FREE Materials</h4>	<p style="font-family: Helvetica, sans-serif; font-size: 12px; color: #555;">Click here &rarr;</p>	</td>	</tr>	</table>	</td>	</tr>	</table>	</td>	</tr>	</tbody>	</table>
</body>
</html>
</body>
</html>
CSS Email Background Shapes - Script Codes
CSS Email Background Shapes - Script Codes
Home Page Home
Developer Vanessa Vevoda
Username vanessav
Uploaded September 12, 2022
Rating 3
Size 3,044 Kb
Views 26,312
Do you need developer help for CSS Email Background Shapes?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Vanessa Vevoda (vanessav) Script Codes
Name
Story Roll
Volunteer Page Build P2
A Pen by Vanessa Vevoda
Year-Round Packing Ideas
Fundraising Campaign Profiles w FlexBox
Fundraising Landing Page w Flexbox
9901 2016 Nov NCW Starts Now
Fundraising FlexBox-Athletic Events
Volunteer Page Build V3
Fundraising FlexBox-OotB
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!