SCSS
$background: #C9C9C9;
$circle: #F6F6E5;
$white: #FDFDFA;
$skin: #f2cb8d;
$red: #e32600;
$blue: #073A70;
$yellow: #F4B327;
$black: #191923;
$text: #ffedd6;
@import url('https://fonts.googleapis.com/css?family=Roboto');
@mixin dim($x,$y, $r){
position: absolute;
width: $x;
height: $y;
border-radius: $r;
-moz-border-radius: $r;
-webkit-border-radius: $r;
-o-border-radius: $r;
-ms-border-radius: $r;
}
@mixin rotate($d){
-webkit-transform: rotate($d);
-moz-transform: rotate($d);
-o-transform: rotate($d);
-ms-transform: rotate($d);
}
body{
background: $background;
}
.container{
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: 400px;
height: 400px;
//border: 5px solid brown;
}
.superman-background{
@include dim(100%, 120%, 0);
background: #78C6BC;
box-shadow: 0 0 0 5px $white, 0 0 0 20px #633c15;
overflow: hidden;
}
.text{
position: absolute;
line-height: 0px;
top: 14%;
}
.p1, .p2{
position: relative;
font-size: 125px;
color: $text;
font-family: 'Roboto';
text-align: center;
left: 8px;
}
.p2{
position: absolute;
font-size: 180px;
color: $text;
font-family: 'Roboto';
text-align: center;
top: 120px;
left: -2px;
}
.shadow{
@include dim(100%, 100%, 0);
box-shadow: inset 0 0 10px 0 shade(#78C6BC, 70%);
top: 0%;
}
.superman{
@include dim(100%, 100%, 0);
}
.total-head{
@include dim(34%, 34%, 0);
//background: white;
top: 29%;
left: 33%;
}
.neck{
@include dim(92%, 80%, 0);
border-left: 18px solid transparent;
border-right: 18px solid transparent;
border-bottom: 140px solid $skin;
bottom: -30%;
left: -10%;
}
.chin{
@include dim(39%, 60%, 0);
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 60px solid shade($skin, 15%);
top: 70%;
left: 0%;
&:after{
@include dim(0%, 100%, 0);
content: ' ';
border-left: 13px solid transparent;
border-right: 13px solid transparent;
border-bottom: 12px solid shade($skin, 15%);
bottom: 128%;
left: 28%;
}
&:before{
@include dim(108%, 100%, 0);
content: ' ';
border-left: 34px solid transparent;
border-right: 34px solid transparent;
border-top: 36px solid $skin;
top: -61%;
left: -67%;
}
}
.head{
@include dim(83%, 80%, 0);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 100px solid shade($skin, 15%);
bottom: 30%;
left: 0%;
&:before{
@include dim(111%, 100%, 0);
content: ' ';
background: $skin;
top: 77%;
left: -5%;
}
}
.ears{
@include dim(110%, 30%, 0);
top: 16%;
left: -6%;
}
.ear-left, .ear-right{
@include dim(30%, 100%, 40%);
background: $skin;
transform: rotate(-30deg);
@include rotate(-30deg);
&:before{
@include dim(80%, 70%, 40%);
content: ' ';
box-shadow: inset 44px 0 0 -38px shade($skin, 15%);
left: 8%;
top: 12%;
transform: rotate(10deg);
@include rotate(10deg);
}
&:after{
@include dim(40%, 30%, 0%);
content: ' ';
background: $skin;
left: 7%;
top: 48%;
transform: rotate(30deg);
@include rotate(30deg);
}
}
.ear-left{
left: -2%;
}
.ear-right{
right: -2%;
@include rotate(30deg);
transform: rotate(30deg) scaleX(-1);
}
.hair{
@include dim(100%, 34%, 0);
top: -24%;
left: -0.5%;
}
.hair-top{
@include dim(100%, 50%, 80%);
background: $black;
top: 10%;
&:before{
@include dim(0%, 100%, 0);
content: ' ';
border-left: 68px solid transparent;
border-right: 68px solid transparent;
border-bottom: 28px solid $black;
top: -164%;
}
}
.hair-bang-shadow, .hair-bang{
@include dim(0%, 100%, 0);
content: ' ';
border-left: 28px solid transparent;
border-right: 28px solid transparent;
top: -68%;
transform: rotate(40deg);
@include rotate(40deg);
}
.hair-bang{
right: 0px;
border-bottom: 20px solid $black;
&:before{
@include dim(12px, 30%, 0);
content: ' ';
background: $black;
top: 135%;
left: 15.5px;
}
&:after{
@include dim(6px, 30%, 0);
content: ' ';
border-left: 20px solid transprent;
border-right: 18px solid transparent;
border-bottom: 12px solid $black;
top: 120%;
left: 15.5px;
}
}
.hair-bang-shadow{
right: 8px;
border-bottom: 20px solid shade($skin, 15%);
&:before{
@include dim(8px, 30%, 0);
content: ' ';
background: shade($skin, 15%);
top: 150%;
left: 24px;
}
&:after{
@include dim(4px, 30%, 0);
content: ' ';
border-left: 16px solid transprent;
border-right: 14px solid transparent;
border-bottom: 8px solid shade($skin, 15%);
top: 136%;
left: 27px;
}
}
.hair-left, .hair-right{
@include dim(0%, 0%, 0);
border-left: 36px solid transparent;
border-right: 14px solid transparent;
border-bottom: 9px solid $black;
//box-shadow: 0 8.5px 0 0px $black;
top: 60%;
transform: rotate(90deg);
@include rotate(90deg);
&:before{
@include dim(0px, 10px, 0);
content: ' ';
border-left: 28px solid transparent;
border-right: 18px solid transparent;
border-top: 6px solid $black;
//box-shadow: 0 -5px 0 -.5px $black;
top: 15px;
left: -30px;
}
&:after{
@include dim(0px, 10px, 0);
content: ' ';
border-left: 16px solid transparent;
border-right: 26px solid transparent;
border-top: 5px solid $black;
//box-shadow: 0 -5px 0 -1px $black;
top: 15px;
left: 1px;
}
}
.hair-left{
left: -10%;
}
.hair-right{
@include rotate(-90deg);
transform: rotate(-90deg) scaleX(-1);
right: -10%;
}
.sideburn-l, .sideburn-r{
@include dim(6%, 134%, 0);
background: $black;
top: 28%;
}
.sideburn-l{
left: 0%;
}
.sideburn-r{
right: 0;
}
.body{
@include dim(110%, 50%, 100% 100% 50% 50%);
//background: white;
bottom: -8%;
left: -5%;
-webkit-box-shadow: inset 0 -270px 0 -100px $blue;
-moz-box-shadow: inset 0 -270px 0 -100px $blue;
-ms-box-shadow: inset 0 -270px 0 -100px $blue;
-o-box-shadow: inset 0 -270px 0 -100px $blue;
box-shadow: inset 0 -270px 0 -100px $blue;
}
.cape-shape-l, .cape-shape-r{
@include dim(0%, 100%, 0);
border-left: 116px solid transparent;
border-right: 14px solid transparent;
border-top: 90px solid $red;
@include rotate(-24deg);
transform: rotate(-24deg);
top: 8%;
&:before{
@include dim(120px, 10%, 0);
content: ' ';
background: $blue;
top: -15%;
left: -100px;
@include rotate(28deg);
transform: rotate(28deg);
}
&:after{
@include dim(0, 10%, 0);
content: ' ';
top: -37.5%;
left: -12px;
border-right: 10px solid transparent;
border-left: 15px solid transparent;
border-top: 76px solid rgba(shade($red, 50%), .4);
}
}
.cape-shape-l{
left: 19.5%;
}
.cape-shape-r{
right: 20%;
@include rotate(24deg);
transform: scaleX(-1) rotate(-24deg);
}
.chest{
@include dim(60%, 90%, 0);
left: 20%;
top: 10%;
}
.top{
@include dim(70%, 30%, 0);
border-left: 48px solid transparent;
border-right: 48px solid transparent;
border-bottom: 50px solid $red;
left: -2%;
&:before{
@include dim(84%, 100%, 0);
content: ' ';
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-bottom: 35px solid $yellow;
left: -10%;
top: 23%;
}
}
.bottom{
@include dim(0%, 30%, 0);
border-left: 141px solid transparent;
border-right: 141px solid transparent;
border-top: 140px solid $red;
bottom: -48%;
left: -2%;
&:before{
@include dim(0%, 100%, 0);
content: ' ';
border-left: 112px solid transparent;
border-right: 112px solid transparent;
border-top: 105px solid $yellow;
left: -110px;
bottom: 54%;
}
}
.s-top{
@include dim(58%, 42%, 60% 50% 30% 50%);
background: $red;
top: 34%;
left: 16%;
&:before{
@include dim(64%, 48%, 100%);
content: ' ';
background: $yellow;
left: 24%;
top: 16%;
transform: rotate(-3deg);
}
&:after{
@include dim(50%, 20%, 0);
content: ' ';
background: $yellow;
left: 52%;
top: 44%;
}
}
.s-angle{
@include dim(8%, 20%, 0);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 40px solid $red;
transform: skewX(-10deg);
-moz-transform: skewX(-10deg);
-webkit-transform: skewX(-10deg);
-o-transform: skewX(-10deg);
-ms-transform: skewX(-10deg);
top: 14%;
right: 14%;
}
.s-bottom{
@include dim(20%, 20%, 50%);
background: $red;
right: 16%;
top: 61%;
box-shadow: -10px 10px $red;
&:before{
@include dim(98%, 40%, 100%);
content: ' ';
background: $yellow;
right: 62%;
top: 74%;
}
&:after{
@include dim(88%, 50%, 100%);
content: ' ';
background: $red;
left: -152%;
top: 94%;
@include rotate(12deg);
transform: rotate(12deg);
}
}
