Refreshing CSS summer popsicles

Developer
Jose Sentis
Size
2,718 Kb
Views
30,360
  1. Refreshing CSS summer popsicles Previews
  2. Refreshing CSS summer popsicles HTML Codes
  3. Refreshing CSS summer popsicles CSS Codes

How do I make an refreshing css summer popsicles?

This html + CSS brings to life yummy and summery popsicles that everybody will enjoy, from youngsters to adults.. What is a refreshing css summer popsicles? How do you make a refreshing css summer popsicles? This script and codes were developed by Jose Sentis on 08 September 2022, Thursday.

Refreshing CSS summer popsicles Previews
IQ Test

Refreshing CSS summer popsicles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Refreshing CSS summer popsicles </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrapper"> <div class="popsicle-container popsicle1"> <div class="popsicle"> <div class="ice"> </div> <div class="stick"> </div> </div> </div> <div class="popsicle-container popsicle2"> <div class="popsicle"> <div class="ice"> </div> <div class="stick"> </div> </div> </div> <div class="popsicle-container popsicle3"> <div class="popsicle"> <div class="ice"> </div> <div class="stick"> </div> </div> </div> <div class="popsicle-container popsicle4"> <div class="popsicle"> <div class="ice"> </div> <div class="stick"> </div> </div> </div> <div class="popsicle-container popsicle5"> <div class="popsicle"> <div class="ice"> </div> <div class="stick"> </div> </div> </div> <p id="signature">Made with &#9825; by <a href="http://www.josesentis.com" target="_blank">Jose Sentis</a></p> </div>
</body>
</html>

Refreshing CSS summer popsicles - Script Codes CSS Codes

html, body { width: 100%; height: 100%; background-color: #e1e1e1; margin: 0; padding: 0;
}
#wrapper{ position: relative;
}
.popsicle-container{ padding: 120px 0;
}
.popsicle { height: 350px; position: relative; margin: 0 auto;
}
.ice { width: 150px; height: 265px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 10; overflow: hidden; box-shadow: inset -12px 0px 0px rgba(0,0,0,0.3), inset 5px 0px 0px rgba(255,255,255,0.3);
}
.ice:after, .ice:before{ content: ''; width: 20%; height: 75%; background-color: rgba(0,0,0,0.2); position: absolute; top: 15%; border-radius: 25px; box-shadow: inset 2px 0px 5px rgba(0,0,0,0.2), inset -1px 0px 4px rgba(255,255,255,0.2);
}
.ice:after{ left: 24%;
}
.ice:before{ right: 24%;
}
.stick { width: 40px; height: 145px; background-color: #ae7b3d; border-radius: 25px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
}
.stick:after{ content: ''; width: 100%; height: 55%; background-color: rgba(0,0,0,0.3); position: absolute; top: 0; left:0;
}
/* POPSICLE 1 */
.popsicle-container.popsicle1{ background-color: #bae1ff;
}
.popsicle-container.popsicle1 .ice { background-color: #d64679; border-radius: 90%/50%; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px;
}
/* POPSICLE 2 */
.popsicle-container.popsicle2{ background-color: #FAF8AE;
}
.popsicle-container.popsicle2 .ice { background-image: linear-gradient(#ff3f00, #EFC050); opacity: 1; border-radius: 90%/20%; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; width: 120px;
}
/* POPSICLE 3 */
.popsicle-container.popsicle3{ background-color: #fcaeb5;
}
.popsicle-container.popsicle3 .popsicle{ height: 400px;
}
.popsicle-container.popsicle3 .ice { background-image: linear-gradient(#db4141 35%, #fff 35%, #fff 70%, #9beedb 70%); opacity: 1; border-radius: 100%/15%; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; overflow: visible; height: 315px;
}
.popsicle-container.popsicle3 .ice:before, .popsicle-container.popsicle3 .ice:after{ border-radius: 25px; background-color: brown; height: 15%; box-shadow: 0px 1px 0px rgba(0,0,0,0.3);
}
.popsicle-container.popsicle3 .ice:before{ background-color: #db4141; top: 26%;
}
.popsicle-container.popsicle3 .ice:after{ background-color: #fff; top: 62%;
}
/* POPSICLE 4 */
.popsicle-container.popsicle4{ background-color: #8af7a7;
}
.popsicle-container.popsicle4 .popsicle{ height: 400px;
}
.popsicle-container.popsicle4 .popsicle .ice { background-color: #663300; opacity: 1; border-radius: 100%/15%; overflow: visible; width: 100px; height: 320px; box-shadow: inset 25px 0px 40px rgba(0,0,0,0.4), inset -15px 0px 30px rgba(255,255,255,0.1);
}
.popsicle-container.popsicle4 .popsicle .ice:before, .popsicle-container.popsicle4 .popsicle .ice:after{ display: none;
}
.popsicle-container.popsicle4 .popsicle .stick:before { content: ''; position: absolute; display: block; width: 80px; height: 72px; top: 0px; left: -20px; background-color: #ebfa80; border-radius: 100%/40%; z-index: 50; box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}
.popsicle-container.popsicle4 .popsicle .stick:after{ border-radius: 100%/15%; height: 64%;
}
/* POPSICLE 5 */
.popsicle-container.popsicle5{ background-color: #eafaea;
}
.popsicle-container.popsicle5 .popsicle .ice { background-image: linear-gradient(rgba(208, 41, 41,0.7) 70%, #fff 75%, #fff 85%, #5DBF81 90%); opacity: 1; border-radius: 100%/50%; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; overflow: visible; box-shadow: inset -6px 0px 0px rgba(0,0,0,0.2), inset 4px 0px 0px rgba(255,255,255,0.2);
}
.popsicle-container.popsicle5 .popsicle .ice:before, .popsicle-container.popsicle5 .popsicle .ice:after{ width: 20%; height: 95%; background-color: transparent; position: absolute; top: 3%; border-radius: 10px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; box-shadow: inset 2px 0px 5px rgba(0,0,0,0.2), inset -1px 0px 4px rgba(255,255,255,0.2);
}
#signature{	font-family: monospace;	font-size: 16px;	position: absolute;	right: 20px;	bottom: 20px;	color: #000;	font-weight: normal;	z-index: 150;	margin: 0;
}
#signature a{	text-decoration: none;	color: rgb(37,33,142);	font-weight: bold;
}
#signature a:hover{	text-decoration: underline;
}
@media screen and (max-width: 768px) { #signature{	font-size: 10px;	right: 10px;	bottom: 5px; }
}
Refreshing CSS summer popsicles - Script Codes
Refreshing CSS summer popsicles - Script Codes
Home Page Home
Developer Jose Sentis
Username j0zelito
Uploaded September 08, 2022
Rating 3
Size 2,718 Kb
Views 30,360
Do you need developer help for Refreshing CSS summer popsicles?

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!

Jose Sentis (j0zelito) Script Codes
Name
GameBoy CSS Illustration
Burger CSS Illustration
Shoe Box CSS illustrated
TweetBox with React JS
CSS Summer vibes
Speaker CSS illustration and animation.
Old Cassette CSS illustration
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!