Birthday Cake

Developer
Martin Grand
Size
3,047 Kb
Views
58,696
  1. Birthday Cake Previews
  2. Birthday Cake HTML Codes
  3. Birthday Cake CSS Codes

How do I make an birthday cake?

What is a birthday cake? How do you make a birthday cake? This script and codes were developed by Martin Grand on 11 August 2022, Thursday.

Birthday Cake Previews
IQ Test

Birthday Cake - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Birthday Cake</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body, html { padding:0; margin:0; width:100%; height:100%;
}
body { background: #3b9596; perspective: 800; perspective-origin: 50% 50%; transform-style: preserve-3d; overflow:hidden;
}
.hb { position:absolute; width:100%; height:40%; text-align:center; padding:30% 0; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#FFF; z-index:99; height:30px !important; padding:10px 0; bottom:20px;
}
.hb a { display:inline-block; background:#000; padding:5px 10px; margin:3px 0; border-radius:20px; color:#d25177; text-decoration:none; font-weight:bold;
}
.hb a:hover { text-decoration:underline;
}
.cake { position:absolute; left:50%; top:50%; width:100px; height:100px; margin:-50px; transform-style: preserve-3d; animation: spin 10s infinite linear;
}
.cake span { position:absolute; display:block; width:100px; height:200px; overflow:hidden; transform-style: preserve-3d;
}
.cake span:after { display:block; content:''; background:#FFF; border-radius:100px; position:absolute; width:200px; height:200px; transform:rotateZ(90deg); clip:rect(0px,100px,200px,0px); box-shadow:inset 0 0 0px 5px #FFF;
}
.e1 { transform: translateZ(0px); }
.e2 { transform: translateZ(5px); }
.e3 { transform: translateZ(10px); }
.e4 { transform: translateZ(15px); }
.e5 { transform: translateZ(20px); }
.e6 { transform: translateZ(25px); }
.e7 { transform: translateZ(30px); }
.e8 { transform: translateZ(35px); }
.e9 { transform: translateZ(40px); }
.e10 { transform: translateZ(45px); }
.e11 { transform: translateZ(50px); }
.e1:after, .e2:after { background:#562e49 !important; }
.e3:after, .e4:after { background:#3b9596 !important; }
.e5:after, .e6:after { background:#85b36b !important; }
.e7:after, .e8:after { background:#d25177 !important; }
.e9:after, .e10:after { background:#a28887 !important; }
@keyframes spin { from { transform:rotateX(45deg) rotateZ(0); } to { transform:rotateX(45deg) rotateZ(360deg); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="hb"> Happy Birthday Petya! :)<br /> <a href="http://goo.gl/8aSEM" target="_blank">See the original</a>
</div>
<div class="cake"> <span class="e1"></span> <span class="e2"></span> <span class="e3"></span> <span class="e4"></span> <span class="e5"></span> <span class="e6"></span> <span class="e7"></span> <span class="e8"></span> <span class="e9"></span> <span class="e10"></span> <span class="e11"></span>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Birthday Cake - Script Codes CSS Codes

body, html { padding:0; margin:0; width:100%; height:100%;
}
body { background: #3b9596; perspective: 800; perspective-origin: 50% 50%; transform-style: preserve-3d; overflow:hidden;
}
.hb { position:absolute; width:100%; height:40%; text-align:center; padding:30% 0; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#FFF; z-index:99; height:30px !important; padding:10px 0; bottom:20px;
}
.hb a { display:inline-block; background:#000; padding:5px 10px; margin:3px 0; border-radius:20px; color:#d25177; text-decoration:none; font-weight:bold;
}
.hb a:hover { text-decoration:underline;
}
.cake { position:absolute; left:50%; top:50%; width:100px; height:100px; margin:-50px; transform-style: preserve-3d; animation: spin 10s infinite linear;
}
.cake span { position:absolute; display:block; width:100px; height:200px; overflow:hidden; transform-style: preserve-3d;
}
.cake span:after { display:block; content:''; background:#FFF; border-radius:100px; position:absolute; width:200px; height:200px; transform:rotateZ(90deg); clip:rect(0px,100px,200px,0px); box-shadow:inset 0 0 0px 5px #FFF;
}
.e1 { transform: translateZ(0px); }
.e2 { transform: translateZ(5px); }
.e3 { transform: translateZ(10px); }
.e4 { transform: translateZ(15px); }
.e5 { transform: translateZ(20px); }
.e6 { transform: translateZ(25px); }
.e7 { transform: translateZ(30px); }
.e8 { transform: translateZ(35px); }
.e9 { transform: translateZ(40px); }
.e10 { transform: translateZ(45px); }
.e11 { transform: translateZ(50px); }
.e1:after, .e2:after { background:#562e49 !important; }
.e3:after, .e4:after { background:#3b9596 !important; }
.e5:after, .e6:after { background:#85b36b !important; }
.e7:after, .e8:after { background:#d25177 !important; }
.e9:after, .e10:after { background:#a28887 !important; }
@keyframes spin { from { transform:rotateX(45deg) rotateZ(0); } to { transform:rotateX(45deg) rotateZ(360deg); }
}
Birthday Cake - Script Codes
Birthday Cake - Script Codes
Home Page Home
Developer Martin Grand
Username martingrand
Uploaded August 11, 2022
Rating 3
Size 3,047 Kb
Views 58,696
Do you need developer help for Birthday Cake?

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!

Martin Grand (martingrand) Script Codes
Name
Pure css rain
Pure css christmas tree
Seconds counter
The easiest way to centering a fluid element vertically, and horizontally
Glitch animation generator
Animated captcha concept
Switch
Clock
3d mosaic, with any image from your computer
Pure css loader
Create amazing art & images 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!