Take a beer
How do I make an take a beer?
Only css inspired on dribbble. What is a take a beer? How do you make a take a beer? This script and codes were developed by Judith Neumann on 13 October 2022, Thursday.
Take a beer Previews
Take a beer - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Take a beer</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="click"> </div> <div class="glass"> <div class="bear"></div> </div> <div class="glass3"></div> <div class="asa"></div>
<div class="cerv"></div> <div class="bubles"><span class="b3"></span></div>
</body>
</html>
Take a beer - Script Codes CSS Codes
body{ width:100%; height:212px; background:#f76162; margin:0 auto; padding-top:300px;
}
.click{ position:relative; width:21px; height:50px; border-radius:30px 30px 0 0; background:white; margin:-85px auto; border-left:6px solid #e3e0e0;
}
.click::before{ content:""; display:block; width:14px; height:14px; border-radius:100%; background:#bcbcbc; margin: 9px 3px;
}
.click::after{ content:""; display:block; width:50px; height:12px; border-radius:100%; background:gray; margin: -21px 7px; -moz-animation: grow3 3s alternate infinite;
-ms-animation: grow3 3s alternate infinite; -webkit-animation:abajo 3s linear infinite; -o-animation:grow3 3s alternate infinite; animation: abajo 3s linear infinite;
}
.cerv{ position:relative; width:12px; height:221px; opacity:.7; background:#f1b021; margin:70px auto; -moz-animation: grow3 3s alternate infinite;
-ms-animation: grow3 3s alternate infinite; -webkit-animation:grow3 3s linear infinite; -o-animation:grow3 3s alternate infinite; animation: grow3 3s linear infinite;
}
.glass{ position:relative; overflow:hidden; width:70px; height:102px; opacity:.7; margin: 212px auto; border-radius:3px; border-bottom:6px solid white; background: rgba(240,165,165,1);
background: -moz-linear-gradient(left, rgba(240,165,165,1) 0%, rgba(240,165,165,1) 1%, rgba(240,165,165,1) 20%, rgba(248,210,209,1) 20%, rgba(248,210,209,1) 42%, rgba(240,165,165,1) 42%, rgba(240,165,165,1) 58%, rgba(248,210,209,1) 58%, rgba(248,210,209,1) 80%, rgba(240,165,165,1) 80%, rgba(240,165,165,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(240,165,165,1)), color-stop(1%, rgba(240,165,165,1)), color-stop(20%, rgba(240,165,165,1)), color-stop(20%, rgba(248,210,209,1)), color-stop(42%, rgba(248,210,209,1)), color-stop(42%, rgba(240,165,165,1)), color-stop(58%, rgba(240,165,165,1)), color-stop(58%, rgba(248,210,209,1)), color-stop(80%, rgba(248,210,209,1)), color-stop(80%, rgba(240,165,165,1)), color-stop(100%, rgba(240,165,165,1)));
background: -webkit-linear-gradient(left, rgba(240,165,165,1) 0%, rgba(240,165,165,1) 1%, rgba(240,165,165,1) 20%, rgba(248,210,209,1) 20%, rgba(248,210,209,1) 42%, rgba(240,165,165,1) 42%, rgba(240,165,165,1) 58%, rgba(248,210,209,1) 58%, rgba(248,210,209,1) 80%, rgba(240,165,165,1) 80%, rgba(240,165,165,1) 100%);
background: -o-linear-gradient(left, rgba(240,165,165,1) 0%, rgba(240,165,165,1) 1%, rgba(240,165,165,1) 20%, rgba(248,210,209,1) 20%, rgba(248,210,209,1) 42%, rgba(240,165,165,1) 42%, rgba(240,165,165,1) 58%, rgba(248,210,209,1) 58%, rgba(248,210,209,1) 80%, rgba(240,165,165,1) 80%, rgba(240,165,165,1) 100%);
background: -ms-linear-gradient(left, rgba(240,165,165,1) 0%, rgba(240,165,165,1) 1%, rgba(240,165,165,1) 20%, rgba(248,210,209,1) 20%, rgba(248,210,209,1) 42%, rgba(240,165,165,1) 42%, rgba(240,165,165,1) 58%, rgba(248,210,209,1) 58%, rgba(248,210,209,1) 80%, rgba(240,165,165,1) 80%, rgba(240,165,165,1) 100%);
background: linear-gradient(to right, rgba(240,165,165,1) 0%, rgba(240,165,165,1) 1%, rgba(240,165,165,1) 20%, rgba(248,210,209,1) 20%, rgba(248,210,209,1) 42%, rgba(240,165,165,1) 42%, rgba(240,165,165,1) 58%, rgba(248,210,209,1) 58%, rgba(248,210,209,1) 80%, rgba(240,165,165,1) 80%, rgba(240,165,165,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0a5a5', endColorstr='#f0a5a5', GradientType=1 );
z-index:333;
}
.bear{
position:relative; height: 3px; width: 70px; margin: 102px auto; background:#f1b021; -moz-animation: grow 3s alternate infinite;
-ms-animation: grow 3s alternate infinite; -webkit-animation:grow 3s linear infinite; -o-animation:grow 3s alternate infinite; animation: grow 3s linear infinite;
}
.glass3{ position:relative; width:70px; height:102px; opacity:.35; margin:-312px auto; border-radius:3px; border-bottom:6px solid white; background: rgba(240,165,165,1);
background: -moz-linear-gradient(left, rgba(240,165,165,1) 0%, rgba(240,165,165,1) 1%, rgba(240,165,165,1) 20%, rgba(248,210,209,1) 20%, rgba(248,210,209,1) 42%, rgba(240,165,165,1) 42%, rgba(240,165,165,1) 58%, rgba(248,210,209,1) 58%, rgba(248,210,209,1) 80%, rgba(240,165,165,1) 80%, rgba(240,165,165,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(240,165,165,1)), color-stop(1%, rgba(240,165,165,1)), color-stop(20%, rgba(240,165,165,1)), color-stop(20%, rgba(248,210,209,1)), color-stop(42%, rgba(248,210,209,1)), color-stop(42%, rgba(240,165,165,1)), color-stop(58%, rgba(240,165,165,1)), color-stop(58%, rgba(248,210,209,1)), color-stop(80%, rgba(248,210,209,1)), color-stop(80%, rgba(240,165,165,1)), color-stop(100%, rgba(240,165,165,1)));
background: -webkit-linear-gradient(left, rgba(240,165,165,1) 0%, rgba(240,165,165,1) 1%, rgba(240,165,165,1) 20%, rgba(248,210,209,1) 20%, rgba(248,210,209,1) 42%, rgba(240,165,165,1) 42%, rgba(240,165,165,1) 58%, rgba(248,210,209,1) 58%, rgba(248,210,209,1) 80%, rgba(240,165,165,1) 80%, rgba(240,165,165,1) 100%);
background: -o-linear-gradient(left, rgba(240,165,165,1) 0%, rgba(240,165,165,1) 1%, rgba(240,165,165,1) 20%, rgba(248,210,209,1) 20%, rgba(248,210,209,1) 42%, rgba(240,165,165,1) 42%, rgba(240,165,165,1) 58%, rgba(248,210,209,1) 58%, rgba(248,210,209,1) 80%, rgba(240,165,165,1) 80%, rgba(240,165,165,1) 100%);
background: -ms-linear-gradient(left, rgba(240,165,165,1) 0%, rgba(240,165,165,1) 1%, rgba(240,165,165,1) 20%, rgba(248,210,209,1) 20%, rgba(248,210,209,1) 42%, rgba(240,165,165,1) 42%, rgba(240,165,165,1) 58%, rgba(248,210,209,1) 58%, rgba(248,210,209,1) 80%, rgba(240,165,165,1) 80%, rgba(240,165,165,1) 100%);
background: linear-gradient(to right, rgba(240,165,165,1) 0%, rgba(240,165,165,1) 1%, rgba(240,165,165,1) 20%, rgba(248,210,209,1) 20%, rgba(248,210,209,1) 42%, rgba(240,165,165,1) 42%, rgba(240,165,165,1) 58%, rgba(248,210,209,1) 58%, rgba(248,210,209,1) 80%, rgba(240,165,165,1) 80%, rgba(240,165,165,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0a5a5', endColorstr='#f0a5a5', GradientType=1 );
z-index:333;
}
.glass3::before{ content:""; display:block; width:21px; height:50px; border-right:9px solid white; border-top:9px solid white; border-bottom:9px solid white; margin: 212px 70px;
}
.bubles{ position:relative; width:21px; height:21px; border-radius:100%; background:white; margin: -182px auto; opacity:1; -moz-animation: grow5 3s alternate infinite;
-ms-animation: grow5 3s alternate infinite; -webkit-animation:grow5 3s linear infinite; -o-animation:grow5 3s alternate infinite; animation: grow5 3s linear infinite;
}
.bubles::before{ content:""; display:block; width:21px; height:21px; border-radius:100%; background:white; margin: -5px 9px
}
.bubles::after{ content:""; display:block; width:21px; height:21px; border-radius:100%; background:white; margin: -25px -21px
}
.b3{ position:absolute; width:21px; height:21px; border-radius:100%; background:white; margin: -12px 21px
}
.b3::before{ content:""; display:block; width:21px; height:21px; border-radius:100%; background:white; margin: -9px -21px
}
.b3::after{ content:""; display:block; width:21px; height:21px; border-radius:100%; background:white; margin: -12px -12px
}
@keyframes grow{ 0% { } 25% { } 50% { -webkit-transform: scale(1,65); -moz-transform: scale(1,65); -o-transform: scale(1,65); -ms-transform: scale(1,65); transform: scale(1,65) } 100% { -webkit-transform: scale(1,65); -moz-transform: scale(1,65); -o-transform: scale(1,65); -ms-transform: scale(1,65); transform: scale(1,65) }
}
@-moz-keyframes grow{ 0% { } 25% { } 50% { -webkit-transform: scale(1,65); -moz-transform: scale(1,65); -o-transform: scale(1,65); -ms-transform: scale(1,65); transform: scale(1,65) } 100% { -webkit-transform: scale(1,65); -moz-transform: scale(1,65); -o-transform: scale(1,65); -ms-transform: scale(1,65); transform: scale(1,65) }
}
@-webkit-keyframes grow{ 0% { } 25% { } 50% { -webkit-transform: scale(1,65); -moz-transform: scale(1,65); -o-transform: scale(1,65); -ms-transform: scale(1,65); transform: scale(1,65) } 100% { -webkit-transform: scale(1,65); -moz-transform: scale(1,65); -o-transform: scale(1,65); -ms-transform: scale(1,65); transform: scale(1,65) }
}
@keyframes grow3 { 0% { height:0; } 25% { height:231px; } 100% { height:231px; }
}
@-moz-keyframes grow3 { 0% { height:0; } 25% { height:231px; } 100% { height:231px; }
}
@-webkit-keyframes grow3 { 0% { height:0; } 25% { height:231px; } 100% { height:231px; }
}
@keyframes abajo{ 0% { } 50% { -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -o-transform: rotate(12deg); -ms-transform: rotate(12deg); transform: rotate (12deg); } 100% { -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -o-transform: rotate(12deg); -ms-transform: rotate(12deg); transform: rotate (12deg); }
}
@-moz-keyframes abajo{ 0% { } 50% { -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -o-transform: rotate(12deg); -ms-transform: rotate(12deg); transform: rotate (12deg); } 100% { -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -o-transform: rotate(12deg); -ms-transform: rotate(12deg); transform: rotate (12deg); }
}
@-webkit-keyframes abajo{ 0% { } 50% { -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -o-transform: rotate(12deg); -ms-transform: rotate(12deg); transform: rotate (12deg); } 100% { -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -o-transform: rotate(12deg); -ms-transform: rotate(12deg); transform: rotate (12deg); }
}
@keyframes grow5{ 0% { -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity:0; } 50% { opacity:.5; -webkit-transform: scale(.5); -moz-transform: scale(.5); -o-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5); } 75% { opacity:1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 100% { opacity:1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
}
@-moz-keyframes grow5{ 0% { -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity:0; } 50% { opacity:.5; -webkit-transform: scale(.5); -moz-transform: scale(.5); -o-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5); } 75% { opacity:1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 100% { opacity:1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes grow5{ 0% { -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity:0; } 50% { opacity:.5; -webkit-transform: scale(.5); -moz-transform: scale(.5); -o-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5); } 75% { opacity:1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 100% { opacity:1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
}
| Developer | Judith Neumann |
| Username | judag |
| Uploaded | October 13, 2022 |
| Rating | 3 |
| Size | 2,581 Kb |
| Views | 20,240 |
Do you need developer help for Take a 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!
Judith Neumann (judag) Script Codes
| Name | Size |
| Colorfull rain | 3,333 Kb |
| Code and view | 3,096 Kb |
| Little black kittys | 3,437 Kb |
| Funny icons... | 4,659 Kb |
| Fantasy earth... | 2,403 Kb |
| Fireworks | 2,722 Kb |
| Wait for a cofee... | 3,422 Kb |
| Css or Czz.. | 4,111 Kb |
| Parrot preloader... | 2,691 Kb |
| Be in touch | 3,222 Kb |
Create amazing Facebook ads 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!
Similar Scripts & Codes
| Name | Username | Size |
| Parallax with only CSS | Thulioph | 2,297 Kb |
| Weather App | Kw7oe | 3,162 Kb |
| Basecamp 3 Document | Lachlanjc | 3,811 Kb |
| 404 Page | Saransh | 2,666 Kb |
| Shopping cart | Andiio | 6,581 Kb |
| Twinner Spinner II | Katydecorah | 2,974 Kb |
| Out of the blue | Giaco | 2,537 Kb |
| Expert Help | SinceSidSlid | 4,064 Kb |
| Gears | Synvox | 3,278 Kb |
| A bit of elegance | Hackthevoid | 9,095 Kb |
Do you want hide your ip address?
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!