Location Pin Point
How do I make an location pin point?
Another rebound of one of the legendary Piotr Kwiatkowski's Dribbble shots. It's a sweet pin icon and it only uses 1 element.. What is a location pin point? How do you make a location pin point? This script and codes were developed by Billy Crist on 04 October 2022, Tuesday.
Location Pin Point - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Location Pin Point</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p> <script src="js/index.js"></script>
</body>
</html>
Location Pin Point - Script Codes CSS Codes
p { width: 14em; height: 14em; border-radius: 50% 50% 50% 5%; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background: linear-gradient(to bottom left, #ffaf1a 6%, rgba(240, 124, 0, 0)), linear-gradient(to bottom right, rgba(255, 255, 255, 0), rgba(255, 198, 138, 0.15) 48%, rgba(163, 84, 0, 0.2) 51.5%, rgba(0, 0, 0, 0)) no-repeat, linear-gradient(to bottom left, #ffaf1a, #f07c00); box-shadow: -0.75em 0.75em 1em -0.25em rgba(255, 219, 153, 0.4) inset, -1.5em 1.5em 1.25em -0.5em rgba(255, 201, 102, 0.5) inset, 1.25em -1.25em 1.25em -0.75em rgba(163, 84, 0, 0.4) inset, -6em 6em 1em -5.75em rgba(0, 0, 0, 0.5), 0 0 0.1em #ffaf1a;
}
p::before { top: 20%; left: 20%; width: 60%; height: 60%; background: linear-gradient(#d66f00, #ffae17); box-shadow: 0 -1em 1em 0 rgba(255, 191, 71, 0.3), 0 0.1em 0.14em -0.04em rgba(255, 193, 77, 0.8) inset, 0 1.5em 1.5em -0.25em rgba(179, 92, 0, 0.2), 0 -0.1em 0.14em -0.04em rgba(163, 84, 0, 0.5) inset;
}
p::after { top: 30%; left: 30%; width: 40%; height: 40%; background: #f0f0f4; box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
}
p::before, p::after { position: absolute; content: ''; border-radius: 50%; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
html, body { height: 100%;
}
body { background: #f0f0f4; margin: 0;
}
p { position: relative; cursor: pointer; margin: -8.5rem auto; top: 50%;
}
p::after { cursor: default;
}
Location Pin Point - Script Codes JS Codes
/*
ORIGINAL SHOT HERE:
http://dribbble.com/shots/1121948-Location?list=users
Notes..
I used some small extra inner and outer shadows on the ::before element in order to make the transition to the cut out look softer and slightly rounded.
I used a gradient from light orange to transparent to hide the left to right gradient on the top of the pin, I also softened it on the bottom to make it look like a more rounded transition, and to accommodate for this I then rounded the pin point off a little. */
Developer | Billy Crist |
Username | billyysea |
Uploaded | October 04, 2022 |
Rating | 4 |
Size | 3,102 Kb |
Views | 30,360 |
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 |
Re-invented CSS Drop-down Menu | 2,757 Kb |
A Bouncy Menu Toggle | 4,563 Kb |
A Sphere | 2,244 Kb |
Full Page Vertical Hover Sliders | 2,418 Kb |
A Perfect Minimal iPhone Template | 2,322 Kb |
Switches | 3,081 Kb |
Some Ugly Icons | 3,930 Kb |
Interactive Business Card - OG | 3,334 Kb |
Camera | 2,136 Kb |
SuprLiTE CSS Arrows | 3,691 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 |
Rrremark.com Overlay Highlighter | Derickruiz | 4,438 Kb |
Bloomberg Style Link Hover | Gil-- | 1,609 Kb |
12 DAYS OF XMAS | Proto78 | 2,313 Kb |
Draggables in pure angular | Rlo206 | 5,167 Kb |
AOR site logo | Thatbram | 2,527 Kb |
BabyStore | Pablo-Ai | 3,807 Kb |
Formations | Cantelope | 5,731 Kb |
Border image | JohnRiordan | 2,120 Kb |
Sexy Social Buttons | Ipiyale | 2,226 Kb |
Css3 only dropdown menu | Riogrande | 2,519 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!