Home » Snippets » CSS3 Superman CSS3 Superman - 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 id="superman"> <div id="superman-laser"> <div id="superman-laser-l"></div> <div id="superman-laser-r"></div> </div> <div id="superman-ears"> <div id="superman-earin"></div> </div> <div id="superman-head"> <div id="superman-hair"> <div id="superman-parting"></div> </div> <div id="superman-hair-l"></div> <div id="superman-hair-r"></div> <div id="superman-forehead"></div> <div id="superman-quiff">S</div> <div id="superman-face"> <div id="superman-brows"> <div id="superman-brow-l-out"></div> <div id="superman-brow-l-in"></div> <div id="superman-brow-r-out"></div> <div id="superman-brow-r-in"></div> <div id="clear"></div> </div> <div id="superman-eye-r"> <div class="superman-iris"> <div class="superman-pupil"></div> </div> </div> <div id="superman-eye-l"> <div class="superman-iris"> <div class="superman-pupil"></div> </div> </div> </div> <div id="clear"></div> <div id="superman-bridge"></div> <div id="clear"></div> <div id="superman-jaw"></div> <div id="superman-nose"></div> <div id="superman-mouth"> <div id="superman-lips-left"></div> <div id="superman-lips-center"></div> <div id="superman-lips-right"></div> </div> <div id="superman-chin"> <div id="superman-chin-cleft-l"></div> <div id="superman-chin-cleft-r"></div> </div> </div> <div id="superman-neck"></div> <div id="superman-cape"></div> <div id="superman-shoulders"> <div id="superman-pecks-l"></div> <div id="superman-pecks"></div> <div id="superman-pecks-r"></div> <div id="superman-shield-out"></div> <div id="superman-shield"></div> <div id="superman-shield-symbol">S</div></div> </div> #superman { border: 1px solid #ccc; padding: 20px 0; width: 280px; margin: 0 auto 20px; text-align: center; overflow: hidden; background-color: #f5f5f5; background-image: -moz-linear-gradient(top, #fff, #e6e6e6); background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #fff, #e6e6e6); background-image: -o-linear-gradient(top, #fff, #e6e6e6); background-image: linear-gradient(top, #fff, #e6e6e6); background-repeat: repeat-x; border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; -moz-box-shadow: 0 1px 1px #bababa; -webkit-box-shadow: 0 1px 1px #bababa; box-shadow: 0 1px 1px #bababa; } #superman-ears { height: 49px; width: 180px; margin-top: 330px; margin-bottom: -320px; margin-left: auto; margin-right: auto; padding-top: 1px; background: #cf9f83; position: relative; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } #superman-earin { height: 39px; width: 170px; margin-top: 5px; margin-bottom: -100px; margin-left: auto; margin-right: auto; background: #000; opacity: .4; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } #superman-head { width: 160px; height: 198px; margin-top: 190px; margin-left: auto; margin-right: auto; position: relative; background: #c38e6f; -webkit-border-top-left-radius: 75px; -webkit-border-top-right-radius: 75px; -webkit-border-bottom-left-radius: 16px; -webkit-border-bottom-right-radius: 16px; -moz-border-radius-topleft: 75px; -moz-border-radius-topright: 75px; -moz-border-radius-bottomleft: 16px; -moz-border-radius-bottomright: 16px; border-top-left-radius: 75px; border-top-right-radius: 75px; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; } #superman-jaw { width: 90px; height: 0; margin-top: 92px; border-top: 55px solid #c38e6f; border-left: 35px solid transparent; border-right: 35px solid transparent; position: relative; z-index: 999; } #superman-forehead { width: 90px; height: 160px; margin-bottom: -152px; margin-left: auto; margin-right: auto; background: #cf9f83; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } #superman-hair { width: 160px; height: 50px; margin-bottom: -35px; margin-left: auto; margin-right: auto; position: relative; background: #111; -webkit-border-top-left-radius: 90px; -webkit-border-top-right-radius: 90px; -webkit-border-bottom-left-radius: 90px; -webkit-border-bottom-right-radius: 90px; -moz-border-radius-topleft: 90px; -moz-border-radius-topright: 90px; -moz-border-radius-bottomleft: 90px; -moz-border-radius-bottomright: 90px; border-top-left-radius: 90px; border-top-right-radius: 90px; border-bottom-left-radius: 90px; border-bottom-right-radius: 90px; -moz-box-shadow: 0 1px 1px #000; -webkit-box-shadow: 0 1px 1px #000; box-shadow: 0 1px 1px #000; } #superman-parting { width: 0; height: 0; margin-bottom: -35px; border-bottom: 50px solid blue; border-left: 2px solid transparent; border-right: 5px solid transparent; margin-left: 23px; position: relative; opacity: .3; -moz-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); -o-transform: rotate(-25deg); -ms-transform: rotate(-25deg); transform: rotate(-25deg); } #superman-laser { margin-bottom: -195px; margin-top: 80px; background: yellow; } #superman-laser-l { width: 0; height: 0; margin-left: 29px; margin-top: 50px; margin-bottom: -100px; border-bottom: 225px solid red; border-left: 4px solid transparent; border-right: 17px solid transparent; float: left; position: relative; z-index: 99999999999999; opacity: .5; -moz-transform: rotate(41deg); -webkit-transform: rotate(41deg); -o-transform: rotate(41deg); -ms-transform: rotate(41deg); transform: rotate(41deg); } #superman-laser-r { width: 0; height: 0; float: right; margin-top: 50px; margin-right: 20px; margin-bottom: -100px; border-bottom: 225px solid red; border-left: 4px solid transparent; border-right: 17px solid transparent; position: relative; z-index: 99999999999999; opacity: .5; -moz-transform: rotate(-36deg); -webkit-transform: rotate(-36deg); -o-transform: rotate(-36deg); -ms-transform: rotate(-36deg); transform: rotate(-36deg); } #superman-hair-r { width: 10px; height: 100px; margin-bottom: -50px; float: right; position: relative; background: #111; -webkit-border-top-left-radius: 90px; -webkit-border-top-right-radius: 90px; -webkit-border-bottom-left-radius: 90px; -webkit-border-bottom-right-radius: 0; -moz-border-radius-topleft: 90px; -moz-border-radius-topright: 90px; -moz-border-radius-bottomleft: 90px; -moz-border-radius-bottomright: 0; border-top-left-radius: 90px; border-top-right-radius: 90px; border-bottom-left-radius: 90px; border-bottom-right-radius: 0; box-shadow: 0 1px 1px #000; -moz-box-shadow: 0 1px 1px #000; -webkit-box-shadow: 0 1px 1px #000; } #superman-hair-l { width: 10px; height: 100px; background: #111; float: left; position: relative; margin-bottom: -50px; -webkit-border-top-left-radius: 90px; -webkit-border-top-right-radius: 90px; -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 90px; -moz-border-radius-topleft: 90px; -moz-border-radius-topright: 90px; -moz-border-radius-bottomleft: 0; -moz-border-radius-bottomright: 90px; border-top-left-radius: 90px; border-top-right-radius: 90px; border-bottom-left-radius: 0; border-bottom-right-radius: 90px; box-shadow: 0 1px 1px #000; -moz-box-shadow: 0 1px 1px #000; -webkit-box-shadow: 0 1px 1px #000; } #superman-quiff { height: 20px; width: 35px; color: #111; margin-top: 13px; margin-left: auto; margin-right: auto; font-size: 1.5em; text-shadow: #000 0 1px 1px; } #superman-brow-l-out { height: 5px; width: 22px; float: left; margin-top: -2px; margin-right: -3px; background: #444; -webkit-border-top-left-radius: 80px; -webkit-border-top-right-radius: 80px; -webkit-border-bottom-left-radius: 90px; -webkit-border-bottom-right-radius: 90px; -moz-border-radius-topleft: 80px; -moz-border-radius-topright: 80px; -moz-border-radius-bottomleft: 90px; -moz-border-radius-bottomright: 90px; border-top-left-radius: 80px; border-top-right-radius: 80px; border-bottom-left-radius: 90px; border-bottom-right-radius: 90px; -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); -moz-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); box-shadow: 0 5px 15px rgba(0, 0, 0, .5); -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); -o-transform: rotate(-15deg); -ms-transform: rotate(-15deg); transform: rotate(-15deg); } #superman-brow-l-in { width: 35px; height: 5px; float: left; background: #444; -webkit-border-top-left-radius: 80px; -webkit-border-top-right-radius: 80px; -webkit-border-bottom-left-radius: 90px; -webkit-border-bottom-right-radius: 90px; -moz-border-radius-topleft: 80px; -moz-border-radius-topright: 80px; -moz-border-radius-bottomleft: 90px; -moz-border-radius-bottomright: 90px; border-top-left-radius: 80px; border-top-right-radius: 80px; border-bottom-left-radius: 90px; border-bottom-right-radius: 90px; -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); -moz-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); box-shadow: 0 5px 15px rgba(0, 0, 0, .5); -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); -o-transform: rotate(15deg); -ms-transform: rotate15deg); transform: rotate(15deg); } #superman-brow-r-out { width: 22px; height: 5px; float: right; margin-top: -4px; margin-left: -4px; background: #444; -webkit-border-top-left-radius: 80px; -webkit-border-top-right-radius: 80px; -webkit-border-bottom-left-radius: 90px; -webkit-border-bottom-right-radius: 90px; -moz-border-radius-topleft: 80px; -moz-border-radius-topright: 80px; -moz-border-radius-bottomleft: 90px; -moz-border-radius-bottomright: 90px; border-top-left-radius: 80px; border-top-right-radius: 80px; border-bottom-left-radius: 90px; border-bottom-right-radius: 90px; -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); -moz-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); box-shadow: 0 5px 15px rgba(0, 0, 0, .5); -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); -o-transform: rotate(25deg); -ms-transform: rotate(25deg); transform: rotate(25deg); } #superman-brow-r-in { width: 35px; height: 5px; float: right; background: #444; -webkit-border-top-left-radius: 80px; -webkit-border-top-right-radius: 80px; -webkit-border-bottom-left-radius: 90px; -webkit-border-bottom-right-radius: 90px; -moz-border-radius-topleft: 80px; -moz-border-radius-topright: 80px; -moz-border-radius-bottomleft: 90px; -moz-border-radius-bottomright: 90px; border-top-left-radius: 80px; border-top-right-radius: 80px; border-bottom-left-radius: 90px; border-bottom-right-radius: 90px; -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); -moz-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); box-shadow: 0 5px 15px rgba(0, 0, 0, .5); -moz-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); -o-transform: rotate(-25deg); -ms-transform: rotate(-25deg); transform: rotate(-25deg); } #superman-brows { width: 130px; height: 10px; margin-top: 29px; margin-left: auto; margin-right: auto; } #superman-eye-r { padding: 4px 10px; float: right; border-top: 1px solid pink; border-bottom: 1px solid #eee; border-left: 1px solid #eee; border-right: 1px solid #eee; margin-right: 25px; position: relative; z-index: 99999; overflow: hidden; background: #f1f1f1; background: -moz-radial-gradient(center, ellipse cover, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fcfff4), color-stop(40%,#dfe5d7), color-stop(100%,#b3bead)); background: -webkit-radial-gradient(center, ellipse cover, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); background: -o-radial-gradient(center, ellipse cover, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); background: -ms-radial-gradient(center, ellipse cover, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); background: radial-gradient(center, ellipse cover, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); -webkit-border-top-left-radius: 60px; -webkit-border-top-right-radius: 60px; -webkit-border-bottom-left-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topleft: 60px; -moz-border-radius-topright: 60px; -moz-border-radius-bottomleft: 20px; -moz-border-radius-bottomright: 20px; border-top-left-radius: 60px; border-top-right-radius: 60px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; -webkit-box-shadow: 0 5px 7px rgba(0, 0, 0, .2); -moz-box-shadow: 0 5px 7px rgba(0, 0, 0, .2); box-shadow: 0 5px 7px rgba(0, 0, 0, .2); } #superman-eye-l { padding: 4px 10px; margin-left: 25px; border-top: 1px solid pink; border-bottom: 1px solid #eee; border-left: 1px solid #eee; border-right: 1px solid #eee; float: left; position: relative; z-index: 99999; overflow: hidden; background: #fcfff4; background: -moz-radial-gradient(center, ellipse cover, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fcfff4), color-stop(40%,#dfe5d7), color-stop(100%,#b3bead)); background: -webkit-radial-gradient(center, ellipse cover, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); background: -o-radial-gradient(center, ellipse cover, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); background: -ms-radial-gradient(center, ellipse cover, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); background: radial-gradient(center, ellipse cover, #fcfff4 0%,#dfe5d7 40%,#b3bead 100%); -webkit-border-top-left-radius: 60px; -webkit-border-top-right-radius: 60px; -webkit-border-bottom-left-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topleft: 60px; -moz-border-radius-topright: 60px; -moz-border-radius-bottomleft: 20px; -moz-border-radius-bottomright: 20px; border-top-left-radius: 60px; border-top-right-radius: 60px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; -webkit-box-shadow: 0 5px 7px rgba(0, 0, 0, .2); -moz-box-shadow: 0 5px 7px rgba(0, 0, 0, .2); box-shadow: 0 5px 7px rgba(0, 0, 0, .2); } .superman-iris { padding: 3px 2px; background: #879abb; margin-top: -7px; margin-bottom: -3px; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; } .superman-pupil { padding: 3px 3px; margin: 0 2px; background: #636363; background: -moz-radial-gradient(center, ellipse cover, #636363 0%, #0e0e0e 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#636363), color-stop(100%,#0e0e0e)); background: -webkit-radial-gradient(center, ellipse cover, #636363 0%,#0e0e0e 100%); background: -o-radial-gradient(center, ellipse cover, #636363 0%,#0e0e0e 100%); background: -ms-radial-gradient(center, ellipse cover, #636363 0%,#0e0e0e 100%); background: radial-gradient(center, ellipse cover, #636363 0%,#0e0e0e 100%); -webkit-box-shadow: inset 0 20px 25px rgba(0, 0, 0, .3); -moz-box-shadow: inset 0 20px 25px rgba(0, 0, 0, .3); box-shadow: inset 0 20px 25px rgba(0, 0, 0, .3); -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; } #superman-bridge { width: 3px; height: 44px; background: #444; border-right: 10px solid #c38e6f; margin-top: -16px; margin-left: 68px; float: left; -webkit-border-bottom-left-radius: 90px; -webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomleft: 90px; -moz-border-radius-bottomright: 0; border-bottom-left-radius: 90px; border-bottom-right-radius: 0; } #superman-nose { width: 0; height: 0; margin-top: -100px; margin-bottom: 20px; margin-left: auto; margin-right: auto; border-top: 6px solid #222; border-left: 10px solid transparent; border-right: 10px solid transparent; } #superman-mouth { width: 100px; margin-top: -15px; margin-left: auto; margin-right: auto; padding-top: 25px; padding-bottom: 15px; background: #cf9f83; overflow: hidden; position: relative; z-index: 999999; -webkit-border-top-left-radius: 75px; -webkit-border-top-right-radius: 75px; -webkit-border-bottom-left-radius: 60px; -webkit-border-bottom-right-radius: 60px; -moz-border-radius-topleft: 75px; -moz-border-radius-topright: 75px; -moz-border-radius-bottomleft: 60px; -moz-border-radius-bottomright: 60px; border-top-left-radius: 75px; border-top-right-radius: 75px; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; } #superman-lips-left { width: 10px; height: 1px; background: #000; margin-top: 2px; margin-left: 25px; margin-bottom: -5px; float: left; -webkit-box-shadow: 0 14px 12px rgba(0, 0, 0, .8); -moz-box-shadow: 0 14px 12px rgba(0, 0, 0, .8); box-shadow: 0 14px 12px rgba(0, 0, 0, .8); -moz-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); -o-transform: rotate(-25deg); -ms-transform: rotate(-25deg); transform: rotate(-25deg); } #superman-lips-center { width: 30px; height: 1px; background: #000; margin-left: 35px; margin-bottom: -5px; float: left; -webkit-box-shadow: 0 16px 6px rgba(0, 0, 0, 1); -moz-box-shadow: 0 16px 6px rgba(0, 0, 0, 1); box-shadow: 0 16px 6px rgba(0, 0, 0, 1); } #superman-lips-right { width: 10px; height: 1px; background: #000; margin-top: 2px; margin-bottom: 30px; margin-right: 25px; float: right; -webkit-box-shadow: 0 14px 12px rgba(0, 0, 0, .8); -moz-box-shadow: 0 14px 12px rgba(0, 0, 0, .8); box-shadow: 0 14px 12px rgba(0, 0, 0, .8); -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); -o-transform: rotate(25deg); -ms-transform: rotate(25deg); transform: rotate(25deg); } #superman-chin { width: 66px; height: 25px; clear: both; margin: auto; padding: 5px 5px; margin-top: -15px; position: relative; z-index: 999; background: #cf9f83; -webkit-border-bottom-left-radius: 75px; -webkit-border-bottom-right-radius: 75px; -webkit-border-top-left-radius: 60px; -webkit-border-top-right-radius: 60px; -moz-border-radius-topleft: 75px; -moz-border-radius-topright: 75px; -moz-border-radius-bottomleft: 60px; -moz-border-radius-bottomright: 60px; border-bottom-left-radius: 75px; border-bottom-right-radius: 75px; border-top-left-radius: 60px; border-top-right-radius: 60px; -webkit-box-shadow: 0 7px 15px rgba(0, 0, 0, .1); -moz-box-shadow: 0 7px 15px rgba(0, 0, 0, .1); box-shadow: 0 7px 15px rgba(0, 0, 0, .1); } #superman-chin-cleft-l { width: 40px; height: 20px; margin-bottom: -40px; margin-left: 12px; background: #c38e6f; float: left; position: relative; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } #superman-chin-cleft-r { width: 40px; height: 20px; margin-bottom: -30px; margin-right: 12px; background: #c38e6f; float: right; position: relative; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } #superman-neck { width: 150px; height: 60px; margin-bottom: -40px; margin-left: auto; margin-right: auto; position: relative; z-index: 222; clear: both; background: #cf9f83; -webkit-box-shadow: inset 0 20px 45px rgba(0, 0, 0, .5); -moz-box-shadow: inset 0 20px 45px rgba(0, 0, 0, .5); box-shadow: inset 0 20px 45px rgba(0, 0, 0, .5); -moz-border-radius: 600px/235px; -webkit-border-radius: 600px/235px; border-radius: 600px/235px; } #superman-cape { width: 90%; height: 90px; margin-left: auto; margin-right: auto; background: red; background: -moz-radial-gradient(center, ellipse cover, #ff3019 0%, #cf0404 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); background: -webkit-radial-gradient(center, ellipse cover, #ff3019 0%,#cf0404 100%); background: -o-radial-gradient(center, ellipse cover, #ff3019 0%,#cf0404 100%); background: -ms-radial-gradient(center, ellipse cover, #ff3019 0%,#cf0404 100%); background: radial-gradient(center, ellipse cover, #ff3019 0%,#cf0404 100%); -webkit-border-top-left-radius: 75px; -webkit-border-top-right-radius: 75px; -moz-border-radius-topleft: 75px; -moz-border-radius-topright: 75px; border-top-left-radius: 75px; border-top-right-radius: 75px; -webkit-box-shadow: inset 0 20px 45px rgba(0, 0, 0, .5); -moz-box-shadow: inset 0 20px 45px rgba(0, 0, 0, .5); box-shadow: inset 0 20px 45px rgba(0, 0, 0, .5); } #superman-shoulders { width: 90%; height: 70px; margin-top: -70px; margin-left: auto; margin-right: auto; overflow: hidden; background: lightskyblue; background: -moz-radial-gradient(center, ellipse cover, #a7cfdf 0%, #23538a 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); background: -webkit-radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%); background: -o-radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%); background: -ms-radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%); background: radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%); -webkit-border-top-left-radius: 75px; -webkit-border-top-right-radius: 75px; -moz-border-radius-topleft: 75px; -moz-border-radius-topright: 75px; border-top-left-radius: 75px; border-top-right-radius: 75px; } #superman-pecks { width: 10px; height: 70px; margin-top: 40px; margin-bottom: -103px; margin-left: auto; margin-right: auto; } #superman-pecks-l { width: 5px; height: 70px; margin-top: 55px; margin-left: 50px; float: left; position: relative; background: lightskyblue; background: -moz-radial-gradient(center, ellipse cover, #a7cfdf 0%, #23538a 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); background: -webkit-radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%); background: -o-radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%); background: -ms-radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%); background: radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%); -webkit-border-top-left-radius: 75px; -webkit-border-top-right-radius: 75px; -moz-border-radius-topleft: 75px; -moz-border-radius-topright: 75px; border-top-left-radius: 75px; border-top-right-radius: 75px; -webkit-box-shadow: 0 0 33px rgba(0, 0, 0, .9); -moz-box-shadow: 0 0 33px rgba(0, 0, 0, .9); box-shadow: 0 0 33px rgba(0, 0, 0, .9); } #superman-pecks-r { width: 5px; height: 30px; margin-top: 45px; margin-right: 50px; float: right; position: relative; background: lightskyblue; background: -moz-radial-gradient(center, ellipse cover, #a7cfdf 0%, #23538a 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); background: -webkit-radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%); background: -o-radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%); background: -ms-radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%); background: radial-gradient(center, ellipse cover, #a7cfdf 0%,#23538a 100%); -webkit-border-top-left-radius: 75px; -webkit-border-top-right-radius: 75px; -moz-border-radius-topleft: 75px; -moz-border-radius-topright: 75px; border-top-left-radius: 75px; border-top-right-radius: 75px; -webkit-box-shadow: 0 0 33px rgba(0, 0, 0, .9); -moz-box-shadow: 0 0 33px rgba(0, 0, 0, .9); box-shadow: 0 0 33px rgba(0, 0, 0, .9); } #superman-shield { width: 50px; height: 10; margin-top: -30px; margin-left: auto; margin-right: auto; border-style: solid; border-color: transparent transparent yellow transparent; border-width: 0 25px 25px 25px; position: relative; } #superman-shield:after { width: 0; height: 0; top: 25px; left: -25px; content: ""; position: absolute; border-style: solid; border-color: yellow transparent transparent transparent; border-width: 70px 50px 0 50px; } #superman-shield-out { width: 50px; height: 0; position: relative; border-style: solid; border-color: transparent transparent red transparent; border-width: 0 35px 35px 35px; margin-top: 30px; margin-left: auto; margin-right: auto; } #superman-shield-out:after { width: 0; height: 0; top: 35px; left: -35px; content: ""; position: absolute; border-style: solid; border-color: red transparent transparent transparent; border-width: 90px 60px 0 60px; } #superman-shield-symbol { margin-left: auto; margin-right: auto; color: red; margin-top: -45px; font-family: georgia; line-height: 1em; font-size: 8em; letter-spacing: 8px; text-align: center; font-weight: 500; position: relative; } Tutorials Palace 12 January, 2019 No Comments 135 Views CSS3 Superman CSS Characters CSS Characters Download CSS3 Superman 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.