Compass pure CSS

Developer
Shankar Cabus
Size
4,350 Kb
Views
56,672
  1. Compass pure CSS Previews
  2. Compass pure CSS HTML Codes
  3. Compass pure CSS CSS Codes

How do I make an compass pure css?

What is a compass pure css? How do you make a compass pure css? This script and codes were developed by Shankar Cabus on 24 June 2022, Friday.

Compass pure CSS Previews
IQ Test

Compass pure CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Compass pure CSS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .compass { background: #E9E9E9; margin: 30px auto 0; width: 10em; height: 10em; border-radius: 3em; position: relative; background-image: linear-gradient(to bottom, #ddd, #d5d5d5); box-shadow: inset 0 0.2em 0.5em 0 #FFF, inset 0 -0.3em 0.4em 0px rgba(0, 0, 0, 0.2), 0 1.5em 3em -1em rgba(0, 0, 0, 0.5);
}
.compass:before, .compass:after { box-sizing: border-box; display: block;
}
.compass:before { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 4em); top: calc(50% - 4em); width: 8em; height: 8em; background-image: linear-gradient(to top, #fff, #aaa);
}
.compass:after { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 35%); top: calc(50% - 35%); width: 70%; height: 70%; background: #838381; box-shadow: inset 0 0 2em 0.1em rgba(0, 0, 0, 0.3);
}
.compass-flower, .compass-flower:before { overflow: hidden; content: ""; position: absolute; border-radius: 50%; left: calc(50% - 3em); top: calc(50% - 3em); width: 6em; height: 6em; background: linear-gradient(80deg, #777 50%, transparent 50%) no-repeat 55% 0, linear-gradient(-80deg, #777 50%, transparent 50%) no-repeat 45% 0, linear-gradient(80deg, transparent 50%, #777 50%) no-repeat 45% 100%, linear-gradient(-80deg, transparent 50%, #777 50%) no-repeat 55% 100%, linear-gradient(-10deg, #777 50%, transparent 50%) no-repeat 0 45%, linear-gradient(10deg, transparent 50%, #777 50%) no-repeat 0 55%, linear-gradient(-10deg, transparent 50%, #777 50%) no-repeat 100% 55%, linear-gradient(10deg, #777 50%, transparent 50%) no-repeat 100% 45%; background-size: 10% 50%, 10% 50%, 10% 50%, 10% 50%, 50% 10%, 50% 10%, 50% 10%, 50% 10%; z-index: 1; filter: drop-shadow(0 0 10px 10px #000);
}
.compass-flower:before { transform: scale(0.8) rotate(45deg);
}
.compass-pointer-wrapper { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 1em); top: calc(50% - 1em); width: 2em; height: 2em; z-index: 5; -webkit-animation: rotate infinite 6s ease;
}
.compass-pointer { position: relative; z-index: 3; border-top: 1em solid transparent; border-left: 12em solid #BC5C67; border-bottom: 1em solid transparent; top: calc(50% - 1em); left: calc(50% - 3em); transform: scale(0.5);
}
.compass-pointer:after { content: ""; position: absolute; top: -1em; left: -24em; border-top: 1em solid transparent; border-right: 12em solid #FFF; border-bottom: 1em solid transparent;
}
.compass-pointer-shadow { position: absolute; z-index: 3; border-top: 1em solid transparent; border-left: 12em solid #8C131D; border-bottom: 1em solid transparent; top: 0; left: calc(50% - 3em); transform: scale(0.5); clip: rect(1em, 24em, 24em, -24em);
}
.compass-pointer-shadow:after { content: ""; position: absolute; top: -1em; left: -24em; border-top: 1em solid transparent; border-right: 12em solid #ccc; border-bottom: 1em solid transparent; clip: rect(1em, 24em, 24em, 0);
}
.compass-center { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 0.5em); top: calc(50% - 0.5em); width: 1em; height: 1em; background: #ddd; z-index: 5; box-sizing: border-box; box-shadow: inset 0 -7px 8px 4px #333, inset 0 -1px 19px -8px #000;
}
@-webkit-keyframes rotate { 0% { transform: rotate(10deg) scale(0.8); } 20% { transform: rotate(200deg) scale(0.8); } 60% { transform: rotate(100deg) scale(0.8); } 100% { transform: rotate(10deg) scale(0.8); }
}
body { background: #ccc; padding: 50px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="compass"> <div class="compass-flower"></div> <div class="compass-pointer-wrapper"> <div class="compass-pointer"></div> <div class="compass-pointer-shadow"></div> </div> <div class="compass-center"></div>
</div>
</body>
</html>

Compass pure CSS - Script Codes CSS Codes

.compass { background: #E9E9E9; margin: 30px auto 0; width: 10em; height: 10em; border-radius: 3em; position: relative; background-image: linear-gradient(to bottom, #ddd, #d5d5d5); box-shadow: inset 0 0.2em 0.5em 0 #FFF, inset 0 -0.3em 0.4em 0px rgba(0, 0, 0, 0.2), 0 1.5em 3em -1em rgba(0, 0, 0, 0.5);
}
.compass:before, .compass:after { box-sizing: border-box; display: block;
}
.compass:before { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 4em); top: calc(50% - 4em); width: 8em; height: 8em; background-image: linear-gradient(to top, #fff, #aaa);
}
.compass:after { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 35%); top: calc(50% - 35%); width: 70%; height: 70%; background: #838381; box-shadow: inset 0 0 2em 0.1em rgba(0, 0, 0, 0.3);
}
.compass-flower, .compass-flower:before { overflow: hidden; content: ""; position: absolute; border-radius: 50%; left: calc(50% - 3em); top: calc(50% - 3em); width: 6em; height: 6em; background: linear-gradient(80deg, #777 50%, transparent 50%) no-repeat 55% 0, linear-gradient(-80deg, #777 50%, transparent 50%) no-repeat 45% 0, linear-gradient(80deg, transparent 50%, #777 50%) no-repeat 45% 100%, linear-gradient(-80deg, transparent 50%, #777 50%) no-repeat 55% 100%, linear-gradient(-10deg, #777 50%, transparent 50%) no-repeat 0 45%, linear-gradient(10deg, transparent 50%, #777 50%) no-repeat 0 55%, linear-gradient(-10deg, transparent 50%, #777 50%) no-repeat 100% 55%, linear-gradient(10deg, #777 50%, transparent 50%) no-repeat 100% 45%; background-size: 10% 50%, 10% 50%, 10% 50%, 10% 50%, 50% 10%, 50% 10%, 50% 10%, 50% 10%; z-index: 1; filter: drop-shadow(0 0 10px 10px #000);
}
.compass-flower:before { transform: scale(0.8) rotate(45deg);
}
.compass-pointer-wrapper { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 1em); top: calc(50% - 1em); width: 2em; height: 2em; z-index: 5; -webkit-animation: rotate infinite 6s ease;
}
.compass-pointer { position: relative; z-index: 3; border-top: 1em solid transparent; border-left: 12em solid #BC5C67; border-bottom: 1em solid transparent; top: calc(50% - 1em); left: calc(50% - 3em); transform: scale(0.5);
}
.compass-pointer:after { content: ""; position: absolute; top: -1em; left: -24em; border-top: 1em solid transparent; border-right: 12em solid #FFF; border-bottom: 1em solid transparent;
}
.compass-pointer-shadow { position: absolute; z-index: 3; border-top: 1em solid transparent; border-left: 12em solid #8C131D; border-bottom: 1em solid transparent; top: 0; left: calc(50% - 3em); transform: scale(0.5); clip: rect(1em, 24em, 24em, -24em);
}
.compass-pointer-shadow:after { content: ""; position: absolute; top: -1em; left: -24em; border-top: 1em solid transparent; border-right: 12em solid #ccc; border-bottom: 1em solid transparent; clip: rect(1em, 24em, 24em, 0);
}
.compass-center { content: ""; position: absolute; border-radius: 50%; left: calc(50% - 0.5em); top: calc(50% - 0.5em); width: 1em; height: 1em; background: #ddd; z-index: 5; box-sizing: border-box; box-shadow: inset 0 -7px 8px 4px #333, inset 0 -1px 19px -8px #000;
}
@-webkit-keyframes rotate { 0% { transform: rotate(10deg) scale(0.8); } 20% { transform: rotate(200deg) scale(0.8); } 60% { transform: rotate(100deg) scale(0.8); } 100% { transform: rotate(10deg) scale(0.8); }
}
body { background: #ccc; padding: 50px;
}
Compass pure CSS - Script Codes
Compass pure CSS - Script Codes
Home Page Home
Developer Shankar Cabus
Username shankarcabus
Uploaded June 24, 2022
Rating 3.5
Size 4,350 Kb
Views 56,672
Do you need developer help for Compass pure CSS?

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!

Shankar Cabus (shankarcabus) Script Codes
Name
Front in Aracaju Logo Pure CSS
A Pen by Shankar Cabus
Transformers Cube with device orientation
CSS pie chart
JusBrasil logo single element
Conical gradient in pure CSS
Color Picker in Pure CSS
Guest Post on CSS-Tricks
Vertical align
Super Mario CSS
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!