Personal Identity - One element
How do I make an personal identity - one element?
Inspired by - http://dribbble.com/shots/1486353-Personal-Identity. What is a personal identity - one element? How do you make a personal identity - one element? This script and codes were developed by Jitendra on 07 September 2022, Wednesday.
Personal Identity - One element - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Personal Identity - One element</title> <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! */ body { padding:25px; background:#f5f5f6;
}
#identity
{
position:relative;
margin:0.5em auto 0em;
width:20em;
height:20em;
border-radius:30%;
background:#63c7c7;
transform:rotate(45deg);
}
#identity:before
{
content: "";
position: absolute;
left: 0em;
top: 7em;
width: 20em;
height: 6.5em;
border-radius: 30% 0% 30% 0%/75% 0% 75% 0%;
background: #52ABA9;
z-index: 1;
}
#identity:after
{
content: "";
position: absolute;
left: 6.5em;
top: 0em;
width: 7em;
height: 20em;
background: #f5f5f6;
z-index: 2;
box-shadow:inset 0em 7em 0em #83D1D5,inset 0em -6.5em 0em #83D1D5;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="identity"></div>
</body>
</html>
Personal Identity - One element - Script Codes CSS Codes
body { padding:25px; background:#f5f5f6;
}
#identity
{
position:relative;
margin:0.5em auto 0em;
width:20em;
height:20em;
border-radius:30%;
background:#63c7c7;
transform:rotate(45deg);
}
#identity:before
{
content: "";
position: absolute;
left: 0em;
top: 7em;
width: 20em;
height: 6.5em;
border-radius: 30% 0% 30% 0%/75% 0% 75% 0%;
background: #52ABA9;
z-index: 1;
}
#identity:after
{
content: "";
position: absolute;
left: 6.5em;
top: 0em;
width: 7em;
height: 20em;
background: #f5f5f6;
z-index: 2;
box-shadow:inset 0em 7em 0em #83D1D5,inset 0em -6.5em 0em #83D1D5;
}
Developer | Jitendra |
Username | berdejitendra |
Uploaded | September 07, 2022 |
Rating | 3.5 |
Size | 2,060 Kb |
Views | 30,360 |
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!
Name | Size |
Underpants - One Element | 1,822 Kb |
IPad Sign Up | 2,090 Kb |
Adam and eva - One element pixel image | 3,528 Kb |
Simple yet effective Social Links | 2,111 Kb |
One element - Steve Jobs | 3,550 Kb |
App login screen with CSS3 Animation | 3,145 Kb |
Flat Music Player Playlist Mobile UI | 3,164 Kb |
Log in Form | 2,514 Kb |
Responsive Section hover effect to show content | 2,540 Kb |
Mobile App UI | 3,180 Kb |
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!
Name | Username | Size |
Replace url via jquery | Serluk | 1,429 Kb |
Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
Brown by pure CSS, no image, no javascript | Aaronchuo | 2,652 Kb |
Bootstrap example | Ssaakkaa | 2,716 Kb |
RPG Style Text Dialogue | Odylic | 2,635 Kb |
TheCalendar.js | The-teacher | 6,330 Kb |
Nice textured background | Hans | 2,659 Kb |
Parallax with only CSS | Thulioph | 2,297 Kb |
A Pen by Jonas Bjork | Jonasbjork | 3,115 Kb |
Twitch API | Coderpilot | 3,412 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!