Eyedropper CSS
How do I make an eyedropper css?
An Eyedropper. This Pen was made to simulate the glass effect with pure CSS.. What is a eyedropper css? How do you make a eyedropper css? This script and codes were developed by Isac Fadoni on 13 June 2022, Monday.
Eyedropper CSS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Eyedropper CSS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="wrap"> <h2>Eydropper</h2> <div id="rubber"> <div id="glass"> <div id="glass-shader"></div> </div> </div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Eyedropper CSS - Script Codes CSS Codes
/* Mixins & Variables */
/* Basic */
body { background: #C62828;
}
.wrap { position: absolute; display: block; width: 860px; height: auto; padding: 5px; box-sizing: border-box; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.wrap > h2 { display: none;
}
/* Eyedropper */
#glass { position: relative; display: block; width: 40px; height: 350px; border: 2px solid rgba(0, 0, 0, 0.08255); box-sizing: border-box; border-radius: 0px 0px 20px 20px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); margin-top: 10px; overflow: hidden; background: rgba(255, 255, 255, 0.1); box-shadow: 0px 2px 5px 5px rgba(0, 0, 0, 0.08255) inset;
}
#glass #glass-shader { position: absolute; width: 40%; height: 100%; bottom: 0; border-radius: 80px; background: rgba(255, 255, 255, 0.1); -webkit-filter: blur(0.1px); filter: blur(0.1px);
}
#rubber { position: absolute; width: 80px; height: 10px; background: #313131; left: 50%; top: 50%; border-radius: 5px; -webkit-transform: rotate(65deg) translate(-50%, -50%); transform: rotate(65deg) translate(-50%, -50%); border-top: 2px solid rgba(0, 0, 0, 0.1);
}
#rubber:before { content: ""; position: absolute; width: 40px; height: 20px; bottom: 0; background: #313131; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
#rubber:after { content: ""; position: absolute; width: 60px; height: 110px; bottom: 0; margin-bottom: 19px; border-radius: 50% 50% 20% 20%; background: #313131; box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.1), 10px -3px 15px 1px rgba(0, 0, 0, 0.2) inset; overflow: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}
Developer | Isac Fadoni |
Username | isac |
Uploaded | June 13, 2022 |
Rating | 3.5 |
Size | 2,758 Kb |
Views | 62,744 |
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 |
A Pen by Isac Fadoni | 2,072 Kb |
Unfolding Post v2 | 5,197 Kb |
React Template | 1,241 Kb |
Material Hover | 3,297 Kb |
Hamburger Menu Icon | 2,768 Kb |
Circle to Rectangle Card Transition | 3,473 Kb |
PayPal Logo | 2,681 Kb |
Dribbble to Code | 2,092 Kb |
ES2015 Notification Plugin | 5,825 Kb |
Unfolding Post | 4,069 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 |
Drag in vanilla js using dotval math instead of translate | Paulq | 2,662 Kb |
Coburg Banks SVG Logo | Mjtweaver | 3,875 Kb |
Sencha Touch 2.3.1 Basic Grid Example | Trozdol | 2,770 Kb |
Free css icon set v2 - one div | Ben_jammin | 0 Kb |
A Pen by aaron k saunders | Aaronksaunders | 2,916 Kb |
Flat design iframe | Damienpm | 1,819 Kb |
Web SQL | Hoehoe | 1,983 Kb |
CircleType | Peterhry | 3,535 Kb |
Experiment | Toddmoy | 2,849 Kb |
CSS background-size - GSAP | Jonathan | 2,209 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!