Batman Logo CSS - Snippet

--- jQuery jQuery UI Bootstrap Angular Backbone D3 Ember GreenSock TweenMax Handlebars Lodash Modernizr Polymer React React DOM Snap.svg Three.js Underscore Zepto ZingChart

--- Bootstrap Foundation Animate.css

• Preview
• HTML
• CSS
• JS

<div class="logo"> <div class="logo_bg"></div> <div class="batman_sign"> <div class="cut1 left"></div> <div class="cut1 right"></div> <div class="cut2 left"></div> <div class="cut2 right"></div> <div class="cut3"></div> <div class="cut4 left"></div> <div class="cut4 right"></div> <div class="cut5 left"></div> <div class="cut5 right"></div> </div> </div>​

body { font-family: Arial,Helvetica,sans-serif; font-size: 13px; } .logo { width: 300px; height: 200px; background: #000000; position: relative; margin: 20px auto; } .logo div { position: absolute } .logo_bg { background: #ffff00; width: 290px; height: 168px; top: 18px; left: 6px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .batman_sign { background: #000000; width: 274px; height: 152px; top: 26px; left: 14px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; overflow: hidden; } .batman_sign div { background: #ffff00 } .cut1 { bottom: 5px; height: 38px; width: 66px; -webkit-border-radius: 50% 0 0 50%; -moz-border-radius: 50% 0 0 50%; border-radius: 50% 0 0 50%; } .cut1.left { left: 43px; -moz-transform: rotate(40deg); -webkit-transform: rotate(40deg); -o-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg); } .cut1.right { right: 43px; -moz-transform: rotate(140deg); -webkit-transform: rotate(140deg); -o-transform: rotate(140deg); -ms-transform: rotate(140deg); transform: rotate(140deg); } .cut2 { bottom: -1px; height: 39px; width: 69px; -webkit-border-radius: 50% 0 0 50%; -moz-border-radius: 50% 0 0 50%; border-radius: 50% 0 0 50%; } .cut2.left { left: 79px; -moz-transform: rotate(58deg); -webkit-transform: rotate(58deg); -o-transform: rotate(58deg); -ms-transform: rotate(58deg); transform: rotate(58deg); } .cut2.right { right: 79px; -moz-transform: rotate(122deg); -webkit-transform: rotate(122deg); -o-transform: rotate(122deg); -ms-transform: rotate(122deg); transform: rotate(122deg); } .cut3 { width: 40px; height: 20px; -webkit-border-radius: 0 0 50% 50%; -moz-border-radius: 0 0 50% 50%; border-radius: 0 0 50% 50%; top: 0px; left: 50%; margin-left: -20px; } .cut4 { top: -2px; height: 40px; width: 69px; border-radius: 50%; -moz-border-radius: 50%; background: #000000 !important; } .cut4.left { left: 72px; -moz-transform: rotate(61deg); -webkit-transform: rotate(61deg); -o-transform: rotate(61deg); -ms-transform: rotate(61deg); transform: rotate(61deg); } .cut4.right { right: 72px; -moz-transform: rotate(119deg); -webkit-transform: rotate(119deg); -o-transform: rotate(119deg); -ms-transform: rotate(119deg); transform: rotate(119deg); } .cut5 { top: -2px; height: 47px; width: 69px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .cut5.left { left: 61px; -moz-transform: rotate(110deg); -webkit-transform: rotate(110deg); -o-transform: rotate(110deg); -ms-transform: rotate(110deg); transform: rotate(110deg); } .cut5.right { right: 61px; -moz-transform: rotate(70deg); -webkit-transform: rotate(70deg); -o-transform: rotate(70deg); -ms-transform: rotate(70deg); transform: rotate(70deg); }

Tutorials Palace 10 January, 2019 No Comments

127 Views