Home » Snippets » Captain America’s shield CSS Captain America’s shield 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="sombra"></div> <div id="escudo"><span>★</span></div> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*CODIGO @dhenriquez http://www.dhenriquez.cl */ #escudo{ width:30px; height:30px; background:#000099; color:#FFF; border-radius:50%; font-size:30px; padding:0; margin:0; border:#F00 10px solid; position:absolute; top:50%; left:50%; margin-top:-15px; margin-left:-15px; } #escudo span{ top:0px; left:0px; position:absolute; } #escudo:before{ content:" "; position:absolute; border:10px solid #FFF; width:50px; height:50px; border-radius:50%; left:-20px; top:-20px; } #escudo:after{ content:" "; position:absolute; border:#F00 10px solid; width:70px; height:70px; border-radius:50%; left:-30px; top:-30px; box-shadow:1px 0 5px #000000; } /*Opcional*/ .sombra{ width:90px; height:90px; border-radius:50%; position:absolute; top:50%; left:50%; margin-left:-35px; margin-top:-35px; z-index:99; opacity:0.3; /* http://gradients.glrzad.com/ */ background-image: linear-gradient(bottom, rgb(0,0,0) 0%, rgb(255,255,255) 100%); background-image: -o-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(255,255,255) 100%); background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(255,255,255) 100%); background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(255,255,255) 100%); background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 0%, rgb(255,255,255) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(0,0,0)), color-stop(1, rgb(255,255,255)) ); } .creditos{ width:auto; margin-left:auto; margin-right:auto; } Tutorials Palace 10 January, 2019 No Comments 94 Views Captain America’s shield CSS CSS Icons CSS Icons Download Captain America’s shield CSS Code Fullscreen Tutor Play Walkthrough Related Snippets Box Shadow Editor Canvas Particles Emission Dripping Paint CSS3 Animation National flag of Mongolia Particles Emission Based on Mouse Moves Custom Cursor Images with CSS Particle System Leaving Trails CSS3 LT Form Particles Gravity Effect Leave a Reply Cancel replyYour email address will not be published. Required fields are marked *Name * Email * Website Notify me of new posts by email.