One element google map location

Developer
Dhanush Badge
Size
2,087 Kb
Views
22,264
  1. One element google map location Previews
  2. One element google map location HTML Codes
  3. One element google map location CSS Codes

How do I make an one element google map location?

Currently works only in Chrome, realistic google map location pin reproduced with one element in pure css.. What is a one element google map location? How do you make a one element google map location? This script and codes were developed by Dhanush Badge on 12 November 2022, Saturday.

One element google map location Previews
IQ Test

One element google map location - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>One element google map location</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="knob"></div>
</body>
</html>

One element google map location - Script Codes CSS Codes

body { margin-top: 25px; background-color: #000;
}
.knob, .knob:after { width: 100px; height: 100px; -webkit-border-radius: 50%; position: relative;
}
.knob { background: rgb(255,48,25); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(255,48,25,1) 0%, rgba(207,4,4,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,48,25,1)), color-stop(100%,rgba(207,4,4,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ -webkit-box-shadow: 70px 180px 60px 0px #222; margin: 0 auto;
}
.knob:after { position: absolute; content: ""; background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.25) 25%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.5)), color-stop(25%,rgba(255,255,255,0.25)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.25) 25%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.25) 25%,rgba(255,255,255,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.25) 25%,rgba(255,255,255,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.25) 25%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.knob:before { position: absolute; left: 88px; top: 92px; content: ""; width: 8px; height: 140px; -webkit-transform:rotate(-20deg); -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; z-index: -1; background: linear-gradient(90deg, silver 33%, black 50%, gray 100%); background: -moz-gradient(90deg, silver 33%, black 50%, gray 100%); background: -webkit-gradient(90deg, silver 33%, black 50%, gray 100%); background: -o-gradient(90deg, silver 33%, black 50%, gray 100%);
}
One element google map location - Script Codes
One element google map location - Script Codes
Home Page Home
Developer Dhanush Badge
Username dhanushbadge
Uploaded November 12, 2022
Rating 3
Size 2,087 Kb
Views 22,264
Do you need developer help for One element google map location?

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!

Dhanush Badge (dhanushbadge) Script Codes
Name
Html5 output
Html5 datalist
JQuery animate function
JQuery simple show hide div
Library
2d shape in 3d view
How I learned jQuery - Hide Function
Html5 keygen
Shoot the text
A Pen by Dhanush Badge
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!