Single Element Wine Glass
How do I make an single element wine glass?
Made a wine glass from a single element, inspired by Chris Church's work on Dribbble! Details in the pen/js. What is a single element wine glass? How do you make a single element wine glass? This script and codes were developed by Albert Filice on 26 August 2022, Friday.
Single Element Wine Glass Previews
Single Element Wine Glass - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Single Element Wine Glass</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <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! */ *, *:before, *:after { box-sizing: border-box;
}
.wine { position: relative; margin: 20px auto; width: 80px; height: 95px; background-color: rgba(228, 162, 160, 1.0); border: 5px solid #000; border-radius: 2px 2px 0px 0px; border-bottom-right-radius: 40px 35px; border-bottom-left-radius: 40px 35px; box-shadow: 0px 0px 0px 3px #fff inset, -20px -40px 0px -17px rgba(118, 10, 35, 1.0) inset, -23px -44px 0px -17px #fff inset, -40px -65px 0px -17px rgba(198, 23, 69, 1.0) inset, -43px -69px 0px -17px #fff inset; animation: fill 8s infinite alternate;
}
.wine:before,
.wine:after { content: ''; position: absolute; background-color: #000;
}
.wine:before { top: 100%; left: 32px; width: 6px; height: 100px;
}
.wine:after { top: 185px; left: 5px; width: 60px; height: 10px; border-radius: 30px 30px 0px 0px;
}
@keyframes fill { from { background-color: rgba(228, 162, 160, 0); box-shadow: 3px 0px #fff inset, -3px 0px #fff inset, -3px -3px #fff inset, 3px -3px #fff inset, 0px 3px #fff inset, 0px -3px #fff inset, -20px -40px 0px -17px rgba(118, 10, 35, 0) inset, -23px -44px 0px -17px #fff inset, -40px -65px 0px -17px rgba(198, 23, 69, 0) inset, -43px -69px 0px -17px #fff inset; } 10% { box-shadow: 3px 0px #fff inset, -3px 0px #fff inset, -3px -3px #fff inset, 3px -3px #fff inset, 0px 3px #fff inset, 0px -3px #fff inset, -20px -40px 0px -17px rgba(118, 10, 35, 1) inset, -23px -44px 0px -17px #fff inset, -40px -65px 0px -17px rgba(198, 23, 69, 0) inset, -43px -69px 0px -17px #fff inset; } 20% { background-color: rgba(228, 162, 160, 0); box-shadow: 3px 0px #fff inset, -3px 0px #fff inset, -3px -3px #fff inset, 3px -3px #fff inset, 0px 3px #fff inset, 0px -3px #fff inset, -20px -40px 0px -17px rgba(118, 10, 35, 1) inset, -23px -44px 0px -17px #fff inset, -40px -65px 0px -17px rgba(198, 23, 69, 1) inset, -43px -69px 0px -17px #fff inset; } 30% { background-color: rgba(228, 162, 160, 1.0); box-shadow: 3px 0px #fff inset, -3px 0px #fff inset, -3px -3px #fff inset, 3px -3px #fff inset, 0px 3px #fff inset, 0px -3px #fff inset, -20px -40px 0px -17px rgba(118, 10, 35, 1) inset, -23px -44px 0px -17px #fff inset, -40px -65px 0px -17px rgba(198, 23, 69, 1) inset, -43px -69px 0px -17px #fff inset; } to { background-color: rgba(228, 162, 160, 1.0); box-shadow: 3px 0px #fff inset, -3px 0px #fff inset, -3px -3px #fff inset, 3px -3px #fff inset, 0px 3px #fff inset, 0px -3px #fff inset, -20px -40px 0px -17px rgba(118, 10, 35, 1.0) inset, -23px -44px 0px -17px #fff inset, -40px -65px 0px -17px rgba(198, 23, 69, 1.0) inset, -43px -69px 0px -17px #fff inset; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wine"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Single Element Wine Glass - Script Codes CSS Codes
*, *:before, *:after { box-sizing: border-box;
}
.wine { position: relative; margin: 20px auto; width: 80px; height: 95px; background-color: rgba(228, 162, 160, 1.0); border: 5px solid #000; border-radius: 2px 2px 0px 0px; border-bottom-right-radius: 40px 35px; border-bottom-left-radius: 40px 35px; box-shadow: 0px 0px 0px 3px #fff inset, -20px -40px 0px -17px rgba(118, 10, 35, 1.0) inset, -23px -44px 0px -17px #fff inset, -40px -65px 0px -17px rgba(198, 23, 69, 1.0) inset, -43px -69px 0px -17px #fff inset; animation: fill 8s infinite alternate;
}
.wine:before,
.wine:after { content: ''; position: absolute; background-color: #000;
}
.wine:before { top: 100%; left: 32px; width: 6px; height: 100px;
}
.wine:after { top: 185px; left: 5px; width: 60px; height: 10px; border-radius: 30px 30px 0px 0px;
}
@keyframes fill { from { background-color: rgba(228, 162, 160, 0); box-shadow: 3px 0px #fff inset, -3px 0px #fff inset, -3px -3px #fff inset, 3px -3px #fff inset, 0px 3px #fff inset, 0px -3px #fff inset, -20px -40px 0px -17px rgba(118, 10, 35, 0) inset, -23px -44px 0px -17px #fff inset, -40px -65px 0px -17px rgba(198, 23, 69, 0) inset, -43px -69px 0px -17px #fff inset; } 10% { box-shadow: 3px 0px #fff inset, -3px 0px #fff inset, -3px -3px #fff inset, 3px -3px #fff inset, 0px 3px #fff inset, 0px -3px #fff inset, -20px -40px 0px -17px rgba(118, 10, 35, 1) inset, -23px -44px 0px -17px #fff inset, -40px -65px 0px -17px rgba(198, 23, 69, 0) inset, -43px -69px 0px -17px #fff inset; } 20% { background-color: rgba(228, 162, 160, 0); box-shadow: 3px 0px #fff inset, -3px 0px #fff inset, -3px -3px #fff inset, 3px -3px #fff inset, 0px 3px #fff inset, 0px -3px #fff inset, -20px -40px 0px -17px rgba(118, 10, 35, 1) inset, -23px -44px 0px -17px #fff inset, -40px -65px 0px -17px rgba(198, 23, 69, 1) inset, -43px -69px 0px -17px #fff inset; } 30% { background-color: rgba(228, 162, 160, 1.0); box-shadow: 3px 0px #fff inset, -3px 0px #fff inset, -3px -3px #fff inset, 3px -3px #fff inset, 0px 3px #fff inset, 0px -3px #fff inset, -20px -40px 0px -17px rgba(118, 10, 35, 1) inset, -23px -44px 0px -17px #fff inset, -40px -65px 0px -17px rgba(198, 23, 69, 1) inset, -43px -69px 0px -17px #fff inset; } to { background-color: rgba(228, 162, 160, 1.0); box-shadow: 3px 0px #fff inset, -3px 0px #fff inset, -3px -3px #fff inset, 3px -3px #fff inset, 0px 3px #fff inset, 0px -3px #fff inset, -20px -40px 0px -17px rgba(118, 10, 35, 1.0) inset, -23px -44px 0px -17px #fff inset, -40px -65px 0px -17px rgba(198, 23, 69, 1.0) inset, -43px -69px 0px -17px #fff inset; }
}Single Element Wine Glass - Script Codes JS Codes
/*
The pen is based on Chris Church's Dribbble:
http://dribbble.com/shots/691174-Wine-wine-wine
Make sure you check it out!
His twitter: @ChrisChurch8
My twitter: @monstasaurous
Give us a shout! :)
Made the animation a little longer due to the petition from @megapenguinx
*/
| Developer | Albert Filice |
| Username | monstersaurous |
| Uploaded | August 26, 2022 |
| Rating | 3.5 |
| Size | 2,930 Kb |
| Views | 40,480 |
Do you need developer help for Single Element Wine Glass?
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!
Albert Filice (monstersaurous) Script Codes
| Name | Size |
| Message Bubble | 2,024 Kb |
| CSS Gameboy | 3,262 Kb |
| Single Element Loader | 2,600 Kb |
| CSS Elephant | 2,492 Kb |
| CSS Owl | 2,845 Kb |
| Single Element Google Inbox Sun | 2,303 Kb |
| Single Element Dribbble Logo | 3,236 Kb |
| CSS Spaceship | 2,789 Kb |
| CNIT 133 - Homework 4 - Part 6 | 2,218 Kb |
| Single Element Icons | 3,423 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| Sample Profile Screen | OurDailyBread | 5,375 Kb |
| Price | Catcode | 2,623 Kb |
| Myprofile | SoufianeAbid | 2,451 Kb |
| VerbalExpressions Converter | Cmalven | 2,607 Kb |
| Find The Penguin | Lelder | 2,212 Kb |
| CSS background-size - GSAP | Jonathan | 2,209 Kb |
| Box-sizing | Elad2412 | 1,572 Kb |
| Vanilla JS - A toggleClass function | Woodwork | 2,532 Kb |
| Basecamp 3 Document | Lachlanjc | 3,811 Kb |
| Revolving Text Landing Page Trial | TimRuby | 2,976 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!