Location Pin Point

3,102 Kb

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

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">
<body> <p> <script src="js/index.js"></script>

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

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
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!