Location Pin Point

Developer
Billy Crist
Size
3,102 Kb
Views
30,345
  1. Location Pin Point Previews
  2. Location Pin Point HTML Codes
  3. Location Pin Point CSS Codes
  4. Location Pin Point JS Codes

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 Previews
IQ Test

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. */
Location Pin Point - Script Codes
Location Pin Point - Script Codes
Home Page Home
Developer Billy Crist
Username billyysea
Uploaded October 04, 2022
Rating 4
Size 3,102 Kb
Views 30,345
Do you need developer help for Location Pin Point?

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!

Billy Crist (billyysea) Script Codes
Name
DMND
Mobile Twitter Log-in Design
A Sphere
A Music Player
Switches
Full Page Vertical Hover Sliders
Random Swim Slider
SuprLiTE CSS Arrows
A Little Menu Bar
CSS Slider
Create amazing captions 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!