Css Beer

Developer
Zoltan Toth
Size
2,587 Kb
Views
18,216
  1. Css Beer Previews
  2. Css Beer HTML Codes
  3. Css Beer CSS Codes

How do I make an css beer?

What is a css beer? How do you make a css beer? This script and codes were developed by Zoltan Toth on 05 November 2022, Saturday.

Css Beer Previews
IQ Test

Css Beer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Css Beer</title> <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 { background: #333;
}
.mug { margin: 40px auto 0; position: relative; width: 200px; height: 300px; border-style: none solid solid solid; border-width: 0 15px 10px 15px; border-color: #e2e2e2; border-radius: 0px 0px 60px 60px
}
.beer { background: #f7a22d; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 100%; z-index: -1; border-radius: 0 0 40px 40px;
background: linear-gradient(to bottom, rgba(255,197,120,1) 0%,rgba(251,157,35,1) 100%);
}
.beer::after { background: #fdebad; position: absolute; top: 0px; left: 0px; height: 100px; width: 100%; display: block; content: '';
}
.ear { position: absolute; border: 15px solid #e2e2e2; width: 50px; height: 100px; top: 60px; right: -80px; border-radius: 40px; background: #c4c4c4;
}
.ear::before{ display: block; content: ''; background: #333; position: absolute; top: 3px; left: 0; width: 45px; height: 94px; border-radius: 30px;
}
.shine { display: block; position: absolute; background: #fff; width: 50px; height: 200px; top: 60px; left: 15px; border-radius: 20px; opacity: 0.4;
}
.shine::after { display: block; content: ''; position: absolute; background: #fff; width: 50px; height: 200px; top: 0px; left: 120px; border-radius: 20px;
}
.shine::before { display: block; content: ''; position: absolute; background: #fff; width: 50px; height: 200px; top: 0px; left: 60px; border-radius: 20px;
}
.top { position: absolute; top: -30px; left: 0; width: 100%; height: 1px;
}
.foam { display: block; background: #fff; border-radius: 30px; height: 60px; width: 60px; position: absolute;
}
.foam:nth-child(1){ top: 10px; left:-30px;
}
.foam:nth-child(2){ top: 10px; left:90px;
}
.foam:nth-child(3){ width: 80px; height: 80px; border-radius: 40px; top: 10px; left:30px;
}
.foam:nth-child(4){ width: 90px; height: 90px; border-radius: 45px; top: 0px; right:-10px;
}
.foam:nth-child(5){ top: 20px; right: -30px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="mug"> <div class="ear"></div> <div class="beer"></div> <div class="shine"></div> <div class="top"> <div class="foam"></div> <div class="foam"></div> <div class="foam"></div> <div class="foam"></div> <div class="foam"></div> <div class="foam"></div> </div>
</div>
</body>
</html>

Css Beer - Script Codes CSS Codes

body { background: #333;
}
.mug { margin: 40px auto 0; position: relative; width: 200px; height: 300px; border-style: none solid solid solid; border-width: 0 15px 10px 15px; border-color: #e2e2e2; border-radius: 0px 0px 60px 60px
}
.beer { background: #f7a22d; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 100%; z-index: -1; border-radius: 0 0 40px 40px;
background: linear-gradient(to bottom, rgba(255,197,120,1) 0%,rgba(251,157,35,1) 100%);
}
.beer::after { background: #fdebad; position: absolute; top: 0px; left: 0px; height: 100px; width: 100%; display: block; content: '';
}
.ear { position: absolute; border: 15px solid #e2e2e2; width: 50px; height: 100px; top: 60px; right: -80px; border-radius: 40px; background: #c4c4c4;
}
.ear::before{ display: block; content: ''; background: #333; position: absolute; top: 3px; left: 0; width: 45px; height: 94px; border-radius: 30px;
}
.shine { display: block; position: absolute; background: #fff; width: 50px; height: 200px; top: 60px; left: 15px; border-radius: 20px; opacity: 0.4;
}
.shine::after { display: block; content: ''; position: absolute; background: #fff; width: 50px; height: 200px; top: 0px; left: 120px; border-radius: 20px;
}
.shine::before { display: block; content: ''; position: absolute; background: #fff; width: 50px; height: 200px; top: 0px; left: 60px; border-radius: 20px;
}
.top { position: absolute; top: -30px; left: 0; width: 100%; height: 1px;
}
.foam { display: block; background: #fff; border-radius: 30px; height: 60px; width: 60px; position: absolute;
}
.foam:nth-child(1){ top: 10px; left:-30px;
}
.foam:nth-child(2){ top: 10px; left:90px;
}
.foam:nth-child(3){ width: 80px; height: 80px; border-radius: 40px; top: 10px; left:30px;
}
.foam:nth-child(4){ width: 90px; height: 90px; border-radius: 45px; top: 0px; right:-10px;
}
.foam:nth-child(5){ top: 20px; right: -30px;
}
Css Beer - Script Codes
Css Beer - Script Codes
Home Page Home
Developer Zoltan Toth
Username totya24
Uploaded November 05, 2022
Rating 4
Size 2,587 Kb
Views 18,216
Do you need developer help for Css Beer?

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!

Zoltan Toth (totya24) Script Codes
Name
Fps mug
Css Monster
Three.js cube example
A Pen by Zoltan Toth
Disc test - hungarian
Three.js cup
Threejs low-poly spaceship
Toggle password visibility
Threejs planet
Css dog
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!