Pure CSS 1Password Logo

Developer
MaCeLMp4
Size
3,084 Kb
Views
20,240
  1. Pure CSS 1Password Logo Previews
  2. Pure CSS 1Password Logo HTML Codes
  3. Pure CSS 1Password Logo CSS Codes

How do I make an pure css 1password logo?

What is a pure css 1password logo? How do you make a pure css 1password logo? This script and codes were developed by MaCeLMp4 on 16 September 2022, Friday.

Pure CSS 1Password Logo Previews
IQ Test

Pure CSS 1Password Logo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS 1Password Logo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.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! */ * { margin: 0; padding: 0; box-sizing: border-box;
}
:before, :after { content: ''; display: block; position: absolute; box-sizing: border-box;
}
html, body { height: 100%; background: #ddd;
}
.lock { position: absolute; top: 50%; left: 50%; width: 150px; height: 150px; margin-top: -75px; margin-left: -75px; border-radius: 50%; background: linear-gradient(to bottom, #eee 0%, #ccc 100%); box-shadow: 0 1px 0 #fff inset, 0 0 0 12px #eee inset, 0 0 0 24px #26a inset, 0 0 0 30px rgba(0, 0, 0, 0.1) inset, 0 3px 3px rgba(0, 0, 0, 0.5);
}
.inner { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin-top: -25px; margin-left: -25px; border-radius: 50%; background: linear-gradient(to bottom, #aaa 0%, #ccc 100%); box-shadow: 0 1px 0 1px rgba(255, 255, 255, 0.5), 0 0 3px rgba(0, 0, 0, 0.5) inset;
}
.key { position: absolute; top: 50%; left: 50%; width: 20px; height: 70px; margin-top: -35px; margin-left: -10px; background: #444; box-shadow: 0 0 10px rgba(0, 0, 0, 0.75) inset;
}
.key:before { top: 22px; left: 0; width: 0; height: 0; border-left: 5px solid #bbb; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.key:after { bottom: 22px; right: 0; width: 0; height: 0; border-right: 5px solid #bbb; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='lock'> <div class='inner'></div> <div class='key'></div> By ITManiaPro
</div>
</body>
</html>

Pure CSS 1Password Logo - Script Codes CSS Codes

* { margin: 0; padding: 0; box-sizing: border-box;
}
:before, :after { content: ''; display: block; position: absolute; box-sizing: border-box;
}
html, body { height: 100%; background: #ddd;
}
.lock { position: absolute; top: 50%; left: 50%; width: 150px; height: 150px; margin-top: -75px; margin-left: -75px; border-radius: 50%; background: linear-gradient(to bottom, #eee 0%, #ccc 100%); box-shadow: 0 1px 0 #fff inset, 0 0 0 12px #eee inset, 0 0 0 24px #26a inset, 0 0 0 30px rgba(0, 0, 0, 0.1) inset, 0 3px 3px rgba(0, 0, 0, 0.5);
}
.inner { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin-top: -25px; margin-left: -25px; border-radius: 50%; background: linear-gradient(to bottom, #aaa 0%, #ccc 100%); box-shadow: 0 1px 0 1px rgba(255, 255, 255, 0.5), 0 0 3px rgba(0, 0, 0, 0.5) inset;
}
.key { position: absolute; top: 50%; left: 50%; width: 20px; height: 70px; margin-top: -35px; margin-left: -10px; background: #444; box-shadow: 0 0 10px rgba(0, 0, 0, 0.75) inset;
}
.key:before { top: 22px; left: 0; width: 0; height: 0; border-left: 5px solid #bbb; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.key:after { bottom: 22px; right: 0; width: 0; height: 0; border-right: 5px solid #bbb; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
Pure CSS 1Password Logo - Script Codes
Pure CSS 1Password Logo - Script Codes
Home Page Home
Developer MaCeLMp4
Username MaCeLMp4
Uploaded September 16, 2022
Rating 3
Size 3,084 Kb
Views 20,240
Do you need developer help for Pure CSS 1Password Logo?

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!

MaCeLMp4 (MaCeLMp4) Script Codes
Name
Image Hover Effects
A Pen by MaCeLMp4
Flexible Calendar
Animated Vertical CSS3 Menu
CSS Only Rotating Menu
Animated Vertical CSS3 Menu Black
Flod It Menu
Google Play Style Menu
CSS3 Awesome Menu
Share Social Best Effects
Create amazing art & images 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!