Macaroons
How do I make an macaroons?
CSS Macaroons . What is a macaroons? How do you make a macaroons? This script and codes were developed by Nour Abusoud on 10 November 2022, Thursday.
Macaroons - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Macaroons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="macaroon pink"> <div class="crust crust-top"></div> <div class="fill"></div> <div class="crust crust-bottom"></div> </div> <div class="macaroon green"> <div class="crust crust-top"></div> <div class="fill"></div> <div class="crust crust-bottom"></div> </div> <div class="macaroon yellow"> <div class="crust crust-top"></div> <div class="fill"></div> <div class="crust crust-bottom"></div> </div> <div class="macaroon red"> <div class="crust crust-top"></div> <div class="fill"></div> <div class="crust crust-bottom"></div> </div> <div class="macaroon orange"> <div class="crust crust-top"></div> <div class="fill"></div> <div class="crust crust-bottom"></div> </div>
</div>
</body>
</html>
Macaroons - Script Codes CSS Codes
.container { width: 150px; margin: 50px auto; position: relative;
}
.macaroon { position: relative; margin: 0 auto;
}
.macaroon .fill { width: 150px; height: 10px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;
}
.macaroon .crust { width: 150px; height: 20px;
}
.macaroon .crust-top { -moz-border-radius: 15px 15px 0 0; -webkit-border-radius: 15px; border-radius: 15px 15px 0 0;
}
.macaroon .crust-bottom { top: 20px; -moz-border-radius: 0 0 15px 15px; -webkit-border-radius: 0; border-radius: 0 0 15px 15px;
}
.macaroon.yellow { left: -10px;
}
.macaroon.yellow .fill { background-color: #DDDDC9;
}
.macaroon.yellow .crust-top { background: linear-gradient(#d6be66 0%, #dfc57b 100%);
}
.macaroon.yellow .crust-bottom { background: #DFC57B;
}
.macaroon.green .fill { background-color: #CCE7AC;
}
.macaroon.green .crust-top { background: linear-gradient(#9fc29f 0%, #c1ddb0 100%);
}
.macaroon.green .crust-bottom { background: #C1DDB0;
}
.macaroon.pink { left: -10px;
}
.macaroon.pink .fill { background-color: #CD032E;
}
.macaroon.pink .crust-top { background: linear-gradient(#fca6c1 0%, #fd5b8d 100%);
}
.macaroon.pink .crust-bottom { background: #FD5B8D;
}
.macaroon.red .fill { background-color: #DB728E;
}
.macaroon.red .crust { background: linear-gradient(90deg, #b7160a 0%, #d86260 100%);
}
.macaroon.orange { position: absolute; left: -120px; bottom: 50px; -moz-transform-origin: center 50%; -ms-transform-origin: center 50%; -webkit-transform-origin: center 50%; transform-origin: center 50%; -moz-transform: rotate(290deg); -ms-transform: rotate(290deg); -webkit-transform: rotate(290deg); transform: rotate(290deg);
}
.macaroon.orange .fill { background-color: #E2DABB;
}
.macaroon.orange .crust-top { background: linear-gradient(#ffe9d8 0%, #f9c8a0 100%);
}
.macaroon.orange .crust-bottom { background: #F9C8A0 0%;
}
Developer | Nour Abusoud |
Username | nourabusoud |
Uploaded | November 10, 2022 |
Rating | 3.5 |
Size | 2,690 Kb |
Views | 14,168 |
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!
Name | Size |
CSS Turkey | 2,184 Kb |
Menu - pop out icons | 3,064 Kb |
CSS Heart Loaders | 2,161 Kb |
The Jealous Buttons | 4,289 Kb |
CSS Only semi-circle pie chart | 6,417 Kb |
Simple CSS Snowflake | 1,667 Kb |
CSS Only Dragonfly | 3,117 Kb |
CSS Cupcake | 2,730 Kb |
CSS Bar Chart | 7,386 Kb |
A Pen by Nour Abusoud | 1,409 Kb |
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!
Name | Username | Size |
A Pen by aleen42 | Aleen42 | 11,473 Kb |
A Pen by Gregory Potdevin | GregoryPotdevin | 1,713 Kb |
Sticky menu on scroll | Senff | 2,869 Kb |
DFF Website | Hawcubite | 10,123 Kb |
A Pen by Final Boss tommyb9 | FBtommyb9 | 55,354 Kb |
Scroll using CSS | Casperovic | 2,159 Kb |
Haml Calendar | Katydecorah | 5,643 Kb |
Mario | Takaneichinose | 3,902 Kb |
Animated bar chart | CreativePunch | 3,124 Kb |
Greyscale image with filter in CSS3 | NickyCDK | 1,562 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!