Pure CSS3 Viking Mace
How do I make an pure css3 viking mace?
A viking mace made from CSS3 and pseudo classes.. What is a pure css3 viking mace? How do you make a pure css3 viking mace? This script and codes were developed by Bryce Snyder on 28 July 2022, Thursday.
Pure CSS3 Viking Mace - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS3 Viking Mace</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="hammer"> <div class="head"> <div class="rune"></div> </div><!--end top--> <div class="handle"></div> <div class="hilt"></div>
</div><!--end hammer-->
<p>Because, Vikings.</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Pure CSS3 Viking Mace - Script Codes CSS Codes
p { font-family: helvetica; text-align: center; font-size: 12px; padding: 0; margin: 0; margin-top: -20px;
}
.hammer { margin:50px auto; height: 165px; width: 120px;
}
.head { margin-left:10px; height: 65px; width: 100px; background: #CFCFCF;
}
.head::before { content: ""; position: absolute; height: 45px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right:10px solid #E8E8E8; margin-left: -10px;
}
.head::after { content: ""; position: absolute; height: 45px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #A8A8A8; margin-left:100px;
}
.head .rune { background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Odal_rune.svg/350px-Odal_rune.svg.png'); background-size: cover; opacity: .3; height: 50px; width: 50px; margin-left: 25px; margin-top: 5px; position: absolute;
}
.head .rune::before { content: ""; position: absolute; margin-top: -5px; margin-lefT: 25px; height: 65px; width: 50px; background: rgba(0,0,0,.3)
}
.head .rune::after { content: ""; position: absolute; margin-top: 60px; margin-lefT: 25px; height: 75px; width: 10px; background: rgba(0,0,0,.3);
}
.handle { height: 75px; width: 18px; background: #B39370; margin-left: 52px;
}
.handle::before {
}
.hilt { width: 18px; border-left: 2px solid transparent; border-right: 2px solid transparent; border-bottom: 18px solid #CFCFCF; margin-left: 50px;
}
.hilt::before { content: ""; position: absolute; width: 18px; border-left: 2px solid transparent; border-right: 2px solid transparent; border-top: 5px solid #c9c9c9; margin-top: 18px; margin-left: -2px;
}
.hilt::after { content: ""; position: absolute; width: 10px; border-right: 2px solid transparent; border-bottom: 18px solid rgba(0,0,0,.1); margin-left: 8px;
}
![Pure CSS3 Viking Mace - Script Codes](http://shots.codepen.io/brycesnyder/pen/yklut-512.jpg)
Developer | Bryce Snyder |
Username | brycesnyder |
Uploaded | July 28, 2022 |
Rating | 4 |
Size | 2,027 Kb |
Views | 66,792 |
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 |
Dynamic Material Boxes | 3,626 Kb |
Multi Share Button in Pure CSS | 4,586 Kb |
Pure CSS Material Input | 3,256 Kb |
Simple JQuery Slider | 3,227 Kb |
New Google Loader | 2,542 Kb |
A Pen by Bryce Snyder | 2,655 Kb |
Full Screen Application Animation | 3,613 Kb |
PURE CSS3 Vector Ribbon Banner | 2,266 Kb |
PURE CSS3 RIBBON | 2,948 Kb |
Success Modal with Animation | 4,520 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 |
Long Shadow Button | Uixcrazy | 3,550 Kb |
Header Line Issue | Charlie-volpe | 1,768 Kb |
CSS Grid Overlay | Cliffpyles | 3,090 Kb |
A Pen by Miro Olma | Programiro | 2,342 Kb |
Getting Started | Viblast | 1,500 Kb |
A Pen by Matt Popovich | Mpopv | 3,349 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
Simple Responsive Text | Fbrz | 2,282 Kb |
Flat iOS 7 Safari Icon | Rss | 3,332 Kb |
A Pen by aleen42 | Aleen42 | 11,473 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!