Super Mario CSS

Developer
Size
8,335 Kb
Views
50,600

How do I make an super mario css?

Super Mario in pure CSS!! ATTENTION: Under construction! Come back tomorrow to see more updates (Ctrl+F5) =D. What is a super mario css? How do you make a super mario css? This script and codes were developed by Shankar Cabus on 24 June 2022, Friday.

Super Mario CSS Previews

Super Mario CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Super Mario CSS</title> <link href='http://fonts.googleapis.com/css?family=Galindo' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <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! */ .mario-head { position: relative; width: 330px; height: 250px; border-color: blue; z-index: 1;
}
.mario-head-cap-top, .mario-head-cap-top:after { width: 140px; height: 240px; background: #000; border-radius: 50%; transform: rotate(-40deg); margin-left: 125px; position: relative;
}
.mario-head-cap-top:after, .mario-head-cap-top:after:after { content: ""; display: block; position: absolute; transform: rotate(0deg) scale(0.9); top: 0; right: 3px; background-image: linear-gradient(to bottom, #F87A18 10%, #EF3619 50%);
}
.mario-head-cap-top:before, .mario-head-cap-top:after:before { content: ""; display: block; position: absolute; left: -68px; top: 37px; background: #000; width: 120px; height: 50px; border-radius: 50%; -webkit-transform: rotate(74deg);
}
.mario-head-cap-logo { width: 70px; height: 70px; background: #FFF; border: 5px solid #000; border-radius: 50%; font-size: 43px; font-weight: bold; color: #DC0905; font-family: 'Galindo'; position: absolute; text-align: center; line-height: 64px; transform: rotate(22deg); top: 49px; left: 112px;
}
.mario-head-cap-right { background-image: linear-gradient(to bottom, #EF3619 20%, #962812 80%); box-shadow: inset -3px -1px 0 3px #EF3619, 5px 4px 0 3px #000; position: absolute; width: 60px; height: 65px; border-radius: 50%; right: 10px; bottom: 10px; transform: rotate(-40deg);
}
.mario-head-cap-right:before { content: ""; position: absolute; display: block; width: 40px; height: 13px; z-index: 3; top: -10px; left: 17px; transform: rotate(-43deg); border-radius: 50%; border-bottom: 10px solid #000;
}
.mario-head-cap-left { border: 1px solid blue; display: block; background: linear-gradient(to right, #F03512, #AA1009); width: 200px; height: 50px; border-radius: 50%; z-index: 2; position: absolute; top: 110px; left: 40px; transform: rotate(27deg); border: 8px solid #000; box-shadow: inset 1px -4px 0 1px #EF3412;
}
.mario-head-cap-left:after { content: ""; width: 270px; height: 85px; border-top: 10px solid #000; border-radius: 50%; position: absolute; left: -10px; top: -7px; transform: rotate(8deg);
}
.mario-head-face { width: 180px; height: 200px; background: #FFD090; border: 8px solid #000; border-radius: 50%; position: absolute; top: 130px; left: 70px; transform: rotate(-15deg);
}
.mario-head-eyes { top: 155px; left: 60px; position: absolute; z-index: 1; transform: rotate(-10deg);
}
.mario-head-eyes:after, .mario-head-eyes:before { content: ""; width: 17px; height: 42px; background: #000; display: block; position: absolute; border-radius: 50%; transform: rotate(25deg); left: 35px; top: 10px;
}
.mario-head-eyes:before { left: 80px; top: 40px;
}
.mario-head-mouth { width: 50px; height: 90px; background: #C12F0E; border: 6px solid #000; position: absolute; border-radius: 50%; left: 104px; margin-top: -12px; transform: rotate(-30deg); box-shadow: inset 4px 46px 0 -1px #7F1108;
}
.mario-head-mustache { position: absolute; left: 60px; transform: rotate(-5deg);
}
.mario-head-mustache:before { content: ""; background: #402011; position: absolute; display: block; width: 100px; height: 20px; left: 7px; top: -2px; z-index: 1;
}
.mario-head-mustache:after { content: ""; background: #FFD090; position: absolute; display: block; width: 80px; height: 30px; left: 35px; top: -20px; border-radius: 50%; border-bottom: 8px solid #000; z-index: 1;
}
.mario-head-mustache i { border-radius: 50%; background: #402011; position: absolute; box-shadow: 0 3px 0 5px #000;
}
.mario-head-mustache i:after { content: ""; background: #402011; border-radius: 50%; display: block; position: absolute;
}
.mario-head-mustache i:nth-child(1) { width: 30px; height: 30px; left: 3px; top: 2px;
}
.mario-head-mustache i:nth-child(2) { width: 35px; height: 35px; left: 25px; top: 9px;
}
.mario-head-mustache i:nth-child(2):after { width: 30px; height: 30px; left: -20px; top: -5px;
}
.mario-head-mustache i:nth-child(3) { width: 40px; height: 40px; left: 50px; top: 5px;
}
.mario-head-mustache i:nth-child(3):after { width: 30px; height: 30px; left: -19px; top: 10px;
}
.mario-head-mustache i:nth-child(4) { width: 40px; height: 23px; left: 75px; top: 5px; border-radius: 0 0 50% 50% / 35% 50% 86% 80%; transform: rotate(-25deg);
}
.mario-head-mustache i:nth-child(4):after { width: 30px; height: 30px; left: -19px; top: -3px;
}
.mario-head-nose, .mario-head-ear { width: 80px; height: 70px; background-image: linear-gradient(to left, #FFD090 40%, #E7AF6E 80%); box-shadow: -7px 0 0 6px #000, inset 2px 0 0 3px #FFD090; border-radius: 49% 72% 58% 60% / 50% 58% 50% 68%; position: absolute; top: 180px; left: 45px; transform: rotate(10deg); z-index: 1;
}
.mario-head-ear { top: 215px; left: 225px; transform: rotate(10deg) scaleX(-1); box-shadow: -7px 0 0 4px #000, inset 2px 0 0 3px #FFD090; z-index: 2;
}
.mario-head-ear:after, .mario-head-ear:before { content: ""; background: transparent; display: block; border-radius: 50%; position: absolute; transform: rotate(-10deg);
}
.mario-head-ear:after { width: 30px; height: 25px; box-shadow: 3px 0 0 1px #000; left: 15px; top: 32px;
}
.mario-head-ear:before { width: 40px; height: 40px; box-shadow: 4px 0 0 1px #000; left: 8px; top: 18px;
}
.mario-head-hair { background: linear-gradient(to bottom, #72390C, #522612); box-shadow: inset 0 0 0 5px #72390C; width: 43px; height: 73px; border-radius: 0 0 50% 50%; position: absolute; right: 81px; top: 185px; transform: rotate(50deg) skewX(20deg); z-index: 2; border: 7px solid #000;
}
.mario-body { position: relative;
}
.mario-body-button-1, .mario-body-button-2 { width: 57px; height: 60px; border-radius: 50%; background: linear-gradient(160deg, #FFF 0%, #FFE151 50%); border: 6px solid #000; position: absolute; left: 60px; top: 45px;
}
.mario-body-button-1:after, .mario-body-button-2:after { content: ""; width: 40px; height: 43px; background: #FCE051; box-shadow: inset -4px -8px 19px -3px #D49F2E; display: block; border-radius: 50%; margin-top: 3px;
}
.mario-body-button-2 { width: 27px; height: 53px; left: -10px; top: 40px; border-width: 7px; transform: rotate(5deg);
}
.mario-body-button-2:after { width: 10px; height: 30px; margin-top: 4px; margin-left: -2px;
}
.mario-body-button-tshirt { width: 210px; height: 180px; background: linear-gradient(160deg, #2050F8 60%, #183F8E 100%); border-radius: 50%; border: 12px solid #000; margin: 50px 0 0 50px; transform: rotate(10deg); overflow: hidden; box-shadow: inset 0 0 0 5px #2050F8;
}
.mario-body-button-tshirt:after { content: ""; display: block; width: 100px; height: 70px; background: linear-gradient(150deg, #CD2712 20%, #A80702 40%); border-radius: 50%; margin-left: 105px; margin-top: -10px; transform: rotate(-100deg); box-shadow: -2px 0 0 5px #000;
}
.mario-body-button-tshirt:before { content: ""; display: block; width: 32px; height: 29px; background: #EE3511; border: 6px solid #000; transform: skewX(-30deg); margin-left: 45px; border-radius: 5px; position: absolute;
}
.mario-left-arm { width: 200px; height: 50px; border-radius: 50%; background: #E93B0D; border: 10px solid #000; position: absolute; top: 5px; left: -87px; transform: rotate(68deg); transform-origin: 100%;
}
.mario-right-arm { width: 130px; height: 45px; border-radius: 50%; background: #E93B0D; box-shadow: 4px 3px 0 8px #000; position: absolute; z-index: 4; top: 6px; left: 73px; transform: rotate(220deg); transform-origin: 100%;
}
.mario-left-arm-hand, .mario-right-arm-hand { width: 52px; height: 70px; background: linear-gradient(to top, #D8D8D8, #FFF); box-shadow: 4px 0 0 7px #000, inset 0 0 0 4px #FFF; border-radius: 50%; margin-top: -20px; margin-left: -15px;
}
.mario-left-arm-hand:before, .mario-right-arm-hand:before { content: ""; display: block; border-radius: 40px; width: 70px; height: 85px; box-shadow: -8px 2px 0 7px #000, inset -7px -7px 0 -4px #FFF; background: linear-gradient(to left, #DBDBDB 0%, #FFF 35%); position: absolute; margin-left: -35px; margin-top: -10px;
}
.mario-left-arm-hand:after, .mario-right-arm-hand:after { content: ""; display: block; position: absolute; border-radius: 50%; box-shadow: 7px 0px 0 0px #000, inset -7px -7px 0 -4px #FFF; background: linear-gradient(to left, #DBDBDB 30%, #FFF 75%); width: 35px; height: 51px; margin-left: -29px; margin-top: 13px;
}
.mario-right-arm-hand { transform: rotate(35deg); margin-left: 5px; margin-top: -21px; background: linear-gradient(to bottom, #D8D8D8, #FFF);
}
.mario-right-arm-hand:before { width: 80px; margin-left: -47px; background: linear-gradient(to right, #D8D8D8 20%, #FFF 50%);
}
.mario-right-arm-hand:after { margin-left: -19px; margin-top: -22px; transform: rotate(-64deg); width: 38px; box-shadow: 6px -5px 0 5px #000, inset -7px -7px 0 -4px #FFF;
}
.mario-right-arm-hand-details { position: absolute; font-size: 72px; z-index: 4; transform: rotate(-95deg) scaleX(1.6); font-family: Comics sans-serif; top: 7px;
}
.mario-right-arm-hand-details:after { content: ""; position: absolute; width: 15px; height: 30px; border-radius: 50%; border-left: 4px solid #000; top: -10px; transform: rotate(-10deg); left: 33px;
}
.mario-left-arm-hand-finger { width: 30px; height: 42px; box-shadow: 0px -3px 0 7px #000, inset 0px -4px 0 1px #FFF; background: linear-gradient(to top, #DBDBDB 10%, #FFF 62%); position: absolute; z-index: 3; border-radius: 25px; left: -39px; top: -41px; transform: rotate(19deg);
}
body { font-family: Arial; background: #eee;
}
* { box-sizing: border-box;
}
.mario { margin: -100px auto; width: 450px; height: 600px; transform: scale(0.6);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="mario"> <div class="mario-head"> <div class="mario-head-cap"> <div class="mario-head-cap-top"></div> <div class="mario-head-cap-logo">M</div> <div class="mario-head-cap-right"></div> <div class="mario-head-cap-left"></div> </div> <div class="mario-head-face"></div> <div class="mario-head-eyes"></div> <div class="mario-head-mouth"></div> <div class="mario-head-mustache"> <i></i><i></i><i></i><i></i> </div> <div class="mario-head-nose"></div> <div class="mario-head-ear"></div> <div class="mario-head-hair"></div> </div> <div class="mario-body"> <div class="mario-left-arm"> <div class="mario-left-arm-hand"> <div class="mario-left-arm-hand-finger"></div> </div> </div> <div class="mario-body-button-tshirt"> <div class="mario-body-button-1"></div> <div class="mario-body-button-2"></div> </div> <div class="mario-right-arm"> <div class="mario-right-arm-hand"> <div class="mario-right-arm-hand-details">"</div> </div> </div> <div class="mario-left-foot"></div> </div>
</div>
</body>
</html>

Super Mario CSS - Script Codes CSS Codes

.mario-head { position: relative; width: 330px; height: 250px; border-color: blue; z-index: 1;
}
.mario-head-cap-top, .mario-head-cap-top:after { width: 140px; height: 240px; background: #000; border-radius: 50%; transform: rotate(-40deg); margin-left: 125px; position: relative;
}
.mario-head-cap-top:after, .mario-head-cap-top:after:after { content: ""; display: block; position: absolute; transform: rotate(0deg) scale(0.9); top: 0; right: 3px; background-image: linear-gradient(to bottom, #F87A18 10%, #EF3619 50%);
}
.mario-head-cap-top:before, .mario-head-cap-top:after:before { content: ""; display: block; position: absolute; left: -68px; top: 37px; background: #000; width: 120px; height: 50px; border-radius: 50%; -webkit-transform: rotate(74deg);
}
.mario-head-cap-logo { width: 70px; height: 70px; background: #FFF; border: 5px solid #000; border-radius: 50%; font-size: 43px; font-weight: bold; color: #DC0905; font-family: 'Galindo'; position: absolute; text-align: center; line-height: 64px; transform: rotate(22deg); top: 49px; left: 112px;
}
.mario-head-cap-right { background-image: linear-gradient(to bottom, #EF3619 20%, #962812 80%); box-shadow: inset -3px -1px 0 3px #EF3619, 5px 4px 0 3px #000; position: absolute; width: 60px; height: 65px; border-radius: 50%; right: 10px; bottom: 10px; transform: rotate(-40deg);
}
.mario-head-cap-right:before { content: ""; position: absolute; display: block; width: 40px; height: 13px; z-index: 3; top: -10px; left: 17px; transform: rotate(-43deg); border-radius: 50%; border-bottom: 10px solid #000;
}
.mario-head-cap-left { border: 1px solid blue; display: block; background: linear-gradient(to right, #F03512, #AA1009); width: 200px; height: 50px; border-radius: 50%; z-index: 2; position: absolute; top: 110px; left: 40px; transform: rotate(27deg); border: 8px solid #000; box-shadow: inset 1px -4px 0 1px #EF3412;
}
.mario-head-cap-left:after { content: ""; width: 270px; height: 85px; border-top: 10px solid #000; border-radius: 50%; position: absolute; left: -10px; top: -7px; transform: rotate(8deg);
}
.mario-head-face { width: 180px; height: 200px; background: #FFD090; border: 8px solid #000; border-radius: 50%; position: absolute; top: 130px; left: 70px; transform: rotate(-15deg);
}
.mario-head-eyes { top: 155px; left: 60px; position: absolute; z-index: 1; transform: rotate(-10deg);
}
.mario-head-eyes:after, .mario-head-eyes:before { content: ""; width: 17px; height: 42px; background: #000; display: block; position: absolute; border-radius: 50%; transform: rotate(25deg); left: 35px; top: 10px;
}
.mario-head-eyes:before { left: 80px; top: 40px;
}
.mario-head-mouth { width: 50px; height: 90px; background: #C12F0E; border: 6px solid #000; position: absolute; border-radius: 50%; left: 104px; margin-top: -12px; transform: rotate(-30deg); box-shadow: inset 4px 46px 0 -1px #7F1108;
}
.mario-head-mustache { position: absolute; left: 60px; transform: rotate(-5deg);
}
.mario-head-mustache:before { content: ""; background: #402011; position: absolute; display: block; width: 100px; height: 20px; left: 7px; top: -2px; z-index: 1;
}
.mario-head-mustache:after { content: ""; background: #FFD090; position: absolute; display: block; width: 80px; height: 30px; left: 35px; top: -20px; border-radius: 50%; border-bottom: 8px solid #000; z-index: 1;
}
.mario-head-mustache i { border-radius: 50%; background: #402011; position: absolute; box-shadow: 0 3px 0 5px #000;
}
.mario-head-mustache i:after { content: ""; background: #402011; border-radius: 50%; display: block; position: absolute;
}
.mario-head-mustache i:nth-child(1) { width: 30px; height: 30px; left: 3px; top: 2px;
}
.mario-head-mustache i:nth-child(2) { width: 35px; height: 35px; left: 25px; top: 9px;
}
.mario-head-mustache i:nth-child(2):after { width: 30px; height: 30px; left: -20px; top: -5px;
}
.mario-head-mustache i:nth-child(3) { width: 40px; height: 40px; left: 50px; top: 5px;
}
.mario-head-mustache i:nth-child(3):after { width: 30px; height: 30px; left: -19px; top: 10px;
}
.mario-head-mustache i:nth-child(4) { width: 40px; height: 23px; left: 75px; top: 5px; border-radius: 0 0 50% 50% / 35% 50% 86% 80%; transform: rotate(-25deg);
}
.mario-head-mustache i:nth-child(4):after { width: 30px; height: 30px; left: -19px; top: -3px;
}
.mario-head-nose, .mario-head-ear { width: 80px; height: 70px; background-image: linear-gradient(to left, #FFD090 40%, #E7AF6E 80%); box-shadow: -7px 0 0 6px #000, inset 2px 0 0 3px #FFD090; border-radius: 49% 72% 58% 60% / 50% 58% 50% 68%; position: absolute; top: 180px; left: 45px; transform: rotate(10deg); z-index: 1;
}
.mario-head-ear { top: 215px; left: 225px; transform: rotate(10deg) scaleX(-1); box-shadow: -7px 0 0 4px #000, inset 2px 0 0 3px #FFD090; z-index: 2;
}
.mario-head-ear:after, .mario-head-ear:before { content: ""; background: transparent; display: block; border-radius: 50%; position: absolute; transform: rotate(-10deg);
}
.mario-head-ear:after { width: 30px; height: 25px; box-shadow: 3px 0 0 1px #000; left: 15px; top: 32px;
}
.mario-head-ear:before { width: 40px; height: 40px; box-shadow: 4px 0 0 1px #000; left: 8px; top: 18px;
}
.mario-head-hair { background: linear-gradient(to bottom, #72390C, #522612); box-shadow: inset 0 0 0 5px #72390C; width: 43px; height: 73px; border-radius: 0 0 50% 50%; position: absolute; right: 81px; top: 185px; transform: rotate(50deg) skewX(20deg); z-index: 2; border: 7px solid #000;
}
.mario-body { position: relative;
}
.mario-body-button-1, .mario-body-button-2 { width: 57px; height: 60px; border-radius: 50%; background: linear-gradient(160deg, #FFF 0%, #FFE151 50%); border: 6px solid #000; position: absolute; left: 60px; top: 45px;
}
.mario-body-button-1:after, .mario-body-button-2:after { content: ""; width: 40px; height: 43px; background: #FCE051; box-shadow: inset -4px -8px 19px -3px #D49F2E; display: block; border-radius: 50%; margin-top: 3px;
}
.mario-body-button-2 { width: 27px; height: 53px; left: -10px; top: 40px; border-width: 7px; transform: rotate(5deg);
}
.mario-body-button-2:after { width: 10px; height: 30px; margin-top: 4px; margin-left: -2px;
}
.mario-body-button-tshirt { width: 210px; height: 180px; background: linear-gradient(160deg, #2050F8 60%, #183F8E 100%); border-radius: 50%; border: 12px solid #000; margin: 50px 0 0 50px; transform: rotate(10deg); overflow: hidden; box-shadow: inset 0 0 0 5px #2050F8;
}
.mario-body-button-tshirt:after { content: ""; display: block; width: 100px; height: 70px; background: linear-gradient(150deg, #CD2712 20%, #A80702 40%); border-radius: 50%; margin-left: 105px; margin-top: -10px; transform: rotate(-100deg); box-shadow: -2px 0 0 5px #000;
}
.mario-body-button-tshirt:before { content: ""; display: block; width: 32px; height: 29px; background: #EE3511; border: 6px solid #000; transform: skewX(-30deg); margin-left: 45px; border-radius: 5px; position: absolute;
}
.mario-left-arm { width: 200px; height: 50px; border-radius: 50%; background: #E93B0D; border: 10px solid #000; position: absolute; top: 5px; left: -87px; transform: rotate(68deg); transform-origin: 100%;
}
.mario-right-arm { width: 130px; height: 45px; border-radius: 50%; background: #E93B0D; box-shadow: 4px 3px 0 8px #000; position: absolute; z-index: 4; top: 6px; left: 73px; transform: rotate(220deg); transform-origin: 100%;
}
.mario-left-arm-hand, .mario-right-arm-hand { width: 52px; height: 70px; background: linear-gradient(to top, #D8D8D8, #FFF); box-shadow: 4px 0 0 7px #000, inset 0 0 0 4px #FFF; border-radius: 50%; margin-top: -20px; margin-left: -15px;
}
.mario-left-arm-hand:before, .mario-right-arm-hand:before { content: ""; display: block; border-radius: 40px; width: 70px; height: 85px; box-shadow: -8px 2px 0 7px #000, inset -7px -7px 0 -4px #FFF; background: linear-gradient(to left, #DBDBDB 0%, #FFF 35%); position: absolute; margin-left: -35px; margin-top: -10px;
}
.mario-left-arm-hand:after, .mario-right-arm-hand:after { content: ""; display: block; position: absolute; border-radius: 50%; box-shadow: 7px 0px 0 0px #000, inset -7px -7px 0 -4px #FFF; background: linear-gradient(to left, #DBDBDB 30%, #FFF 75%); width: 35px; height: 51px; margin-left: -29px; margin-top: 13px;
}
.mario-right-arm-hand { transform: rotate(35deg); margin-left: 5px; margin-top: -21px; background: linear-gradient(to bottom, #D8D8D8, #FFF);
}
.mario-right-arm-hand:before { width: 80px; margin-left: -47px; background: linear-gradient(to right, #D8D8D8 20%, #FFF 50%);
}
.mario-right-arm-hand:after { margin-left: -19px; margin-top: -22px; transform: rotate(-64deg); width: 38px; box-shadow: 6px -5px 0 5px #000, inset -7px -7px 0 -4px #FFF;
}
.mario-right-arm-hand-details { position: absolute; font-size: 72px; z-index: 4; transform: rotate(-95deg) scaleX(1.6); font-family: Comics sans-serif; top: 7px;
}
.mario-right-arm-hand-details:after { content: ""; position: absolute; width: 15px; height: 30px; border-radius: 50%; border-left: 4px solid #000; top: -10px; transform: rotate(-10deg); left: 33px;
}
.mario-left-arm-hand-finger { width: 30px; height: 42px; box-shadow: 0px -3px 0 7px #000, inset 0px -4px 0 1px #FFF; background: linear-gradient(to top, #DBDBDB 10%, #FFF 62%); position: absolute; z-index: 3; border-radius: 25px; left: -39px; top: -41px; transform: rotate(19deg);
}
body { font-family: Arial; background: #eee;
}
* { box-sizing: border-box;
}
.mario { margin: -100px auto; width: 450px; height: 600px; transform: scale(0.6);
}
Super Mario CSS - Script Codes
Super Mario CSS - Script Codes
Home Page Home
Developer Shankar Cabus
Username shankarcabus
Uploaded June 24, 2022
Rating 3.5
Size 8,335 Kb
Views 50,600
Do you need developer help for Super Mario CSS?

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!

Shankar Cabus (shankarcabus) Script Codes
Create amazing Facebook ads with AI!

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!