HTML
<div class="container">
<div class="brian-container">
<div class="brian">
<div class="head">
<div class="ear left"></div>
<div class="ear-hide"></div>
<div class="ear right"></div>
<div class="eye left">
<div class="lid"></div>
</div>
<div class="eye-hide"></div>
<div class="eye right">
<div class="lid"></div>
</div>
<div class="nose">
<div class="nostril"></div>
</div>
<div class="mouth"></div>
</div>
<div class="collar"></div>
<div class="collar-pendant"></div>
<div class="body"></div>
<div class="belly"></div>
<div class="crotch"></div>
<div class="bum"></div>
<div class="tail"></div>
<div class="armpit left"></div>
<div class="shoulder left">
<div class="arm">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="armpit right"></div>
<div class="shoulder right">
<div class="arm">
<div class="thumb"></div>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="hand left">
</div>
<div class="hand right">
<span></span>
<span></span>
<span></span>
</div>
<div class="crotch"></div>
<div class="leg left"></div>
<div class="leg right"></div>
<div class="foot left">
<span></span>
<span></span>
</div>
<div class="foot right">
<span></span>
<span></span>
</div>
<div class="shadow"></div>
</div>
</div>
</div>
<div class="logo">
<img src="//upload.wikimedia.org/wikipedia/en/thumb/a/aa/Family_Guy_Logo.svg/200px-Family_Guy_Logo.svg.png">
</div>
SCSS
@import "compass";
body {
background-color: #31a7c3;
@include filter-gradient(#39AABD, #245662, horizontal);
@include background-image(radial-gradient(center, ellipse cover, #39AABD 10%,#245662 100%));
.container {
max-width: 600px;
padding: 0;
margin: 0 auto;
min-height: 500px;
}
}
:before, :after {
position: absolute;
content: "";
width: 0;
height: 0;
}
$head-height: 105px;
$brian-width: 100px;
$brian-height: 100px;
$brian-border: 1px solid #333333;
$shadow-color: rgba(170,170,170,0.4);
$shadow-size: 12px;
.brian-container {
position: absolute;
height: 265px;
width: $brian-width;
top: calc(48% - (265px / 2));
left: calc(50% - (#{$brian-width} / 2));
}
.brian {
position: relative;
height: $brian-height;
width: $brian-width;
margin: $head-height auto 0 auto;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-ms-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
-o-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
* {
position: absolute;
}
$head-width: $brian-width - 24px;
.head {
top: -$head-height;
left: 50%;
margin-left: -(($head-width + 2px/*border*/) / 2);
height: $head-height;
width: $head-width;
background: #FFFFFF;
border: $brian-border;
@include border-radius(45px 45px 60% 60% / 45% 45% 14% 14%);
z-index: 13;
$head-shadow-size: $shadow-size - 2px;
&:after /*shadow*/ {
height: 90%;
bottom: 4%;
width: 100%;
right: $head-shadow-size - 2px;
@include box-shadow($head-shadow-size 0px 3px -2px $shadow-color);
}
.ear-hide {
height: 34px;
width: 9px;
background: #FFFFFF;
top: 9px;
right: 11px;
z-index: 7;
}
.ear {
height: 40px;
width: 22px;
background: #FFFFFF;
border: $brian-border;
@include border-radius(70% 50% 30% 30% / 90% 90% 30% 30%);
$ear-left-position: -8px;
$ear-top-position: 3px;
$ear-rotate: 10deg;
&.left {
left: $ear-left-position + 2px;
top: $ear-top-position + 2px;
@include transform(rotate($ear-rotate));
@include border-radius(50% 70% 30% 30% / 90% 90% 30% 30%);
}
&.right {
right: $ear-left-position;
top: $ear-top-position;
$ear-right-rotate: $ear-rotate + 10;
@include transform(rotate(-$ear-right-rotate));
@include border-radius(70% 50% 30% 30% / 90% 90% 30% 30%);
z-index: 6;
&:before {
height: 18px;
width: 20px;
@include transform(rotate(20deg));
top: 18px;
left: 1px;
border: 1px solid transparent;
border-left: $brian-border;
@include border-radius(20% 20% / 80% 80%);
}
}
$ear-shadow-size: $shadow-size - 5px;
$ear-bottom-shadow-size: $ear-shadow-size / 2;
&:after /*shadow*/ {
height: calc(100% - #{$ear-bottom-shadow-size});
width: 100%;
right: $ear-shadow-size - 2px;
top: 0;
@include box-shadow($ear-shadow-size $ear-bottom-shadow-size 3px 0px $shadow-color);
@include border-radius(70% 50% 30% 30% / 90% 90% 30% 30%);
}
}
.eye-hide {
height: 20px;
width: 20px;
background: #FFFFFF;
@include transform(rotate(45deg));
left: 27px;
top: 13px;
z-index: 4;
}
$eye-size: 21px;
$eye-top-position: 3px;
.eye {
top: $eye-top-position;
height: $eye-size;
width: $eye-size;
background: #FFFFFF;
@include border-radius(50%);
border: $brian-border;
overflow: hidden;
$eye-left-position: 10px;
&.left {
top: $eye-top-position - 1px;
left: $eye-left-position;
z-index: 3;
}
&.right {
z-index: 5;
left: $eye-left-position + $eye-size;
.lid {
@include transform(rotate(5deg));
}
}
.lid {
width: $eye-size;
height: $eye-size;
top: -18px;
border-bottom: $brian-border;
left: 0;
}
$pupil-size: 3px;
&:after /*pupil*/ {
top: calc(50% - (#{$pupil-size} / 2));
left: calc(50% - (#{$pupil-size} / 2));
height: $pupil-size;
width: $pupil-size;
background: #333333;
@include border-radius(50%);
}
$eyes-shadow-size: 3px;
&:before /*shadow*/ {
height: 100%;
width: 100%;
right: $eyes-shadow-size;
top: -$eyes-shadow-size;
@include box-shadow($eyes-shadow-size $eyes-shadow-size 3px -1px $shadow-color);
@include border-radius(50%);
}
}
$nose-height: 68px;
.nose {
top: 22px;
left: -30px;
width: 82px;
height: $nose-height;
background: #FFFFFF;
border: $brian-border;
border-right-color: transparent;
@include border-radius(28px 0 50% 30px / 28px 0 20% 30px);
z-index: 4;
&:before {
top: -32px;
right: 20px;
height: 30px;
width: 30px;
@include border-radius(50%);
border: 1px solid transparent;
border-right: $brian-border;
@include transform(rotate(45deg));
z-index: 3;
}
&:after {
height: 40px;
width: 34px;
background: #FFFFFF;
right: -1px;
top: -1px;
z-index: 2;
}
$nostril-height: $nose-height - 22px;
.nostril {
height: $nostril-height;
width: 30px;
background: #070707;
@include border-radius(50%);
top: 50%;
margin-top: -($nostril-height / 2);
left: 6px;
@include box-shadow(3px 1px 3px 0px $shadow-color);
&:before/*highlight*/ {
top: 7px;
left: 7px;
height: 75%;
width: 75%;
@include box-shadow(-4px -3px 3px 0px rgba(255,255,255,0.15));
@include border-radius(50%);
}
}
}
.mouth {
height: 20px;
width: 20px;
border: $brian-border;
border-right-color: transparent;
@include border-radius(40% 0 10% 40%);
bottom: 6px;
left: 5px;
z-index: 1;
$mouth-shadow-size: 2px;
&:after /*shadow*/ {
height: 100%;
width: 100%;
left: $mouth-shadow-size;
top: -$mouth-shadow-size;
@include box-shadow(0 $mouth-shadow-size 2px -1px $shadow-color);
@include border-radius(45px 45px 0 0 / 45% 45% 0 0);
}
}
}
$collar-width: $head-width + 4px;
.collar {
top: -11px;
left: 50%;
margin-left: -(($collar-width + 2px/*border*/) / 2);
height: 22px;
width: $collar-width;
background: #B71E36;
border: $brian-border;
@include border-radius(50% 50% 70% 70% / 40% 40% 60% 60%);
z-index: 12;
@include box-shadow(inset -8px -4px 3px 0px rgba(0,0,0,0.3));
$collar-shadow-size: $shadow-size - 4px;
&:after /*shadow*/ {
height: 100%;
width: 100%;
top: 0;
@include box-shadow(4px $collar-shadow-size 3px -4px $shadow-color);
@include border-radius(50% 50% 70% 70% / 40% 40% 60% 60%);
}
}
$pendant-size: 14px;
.collar-pendant {
top: 18px;
left: 25px;
height: $pendant-size;
width: $pendant-size;
@include border-radius(50%);
background: #FAA028;
border: $brian-border;
z-index: 10;
@include box-shadow(inset -2px -2px 3px 0px rgba(102,102,102,0.6));
&:before/*chain*/ {
height: 15px;
top: -15px;
left: 65%;
width: 1px;
border-left: $brian-border;
@include transform(rotate(15deg));
}
&:after/*highlight*/ {
top: 3px;
left: 3px;
height: 75%;
width: 75%;
@include box-shadow(-4px -3px 3px 0px rgba(255,255,255,0.3));
@include border-radius(50%);
}
}
.body {
height: $brian-height - 5px;
width: $brian-width - 2px;
background: #FFFFFF;
@include border-radius(30% 30% / 80% 80%);
border: $brian-border;
border-bottom-color: transparent;
overflow: hidden;
z-index: 3;
}
.belly {
top: 7px;
left: -4px;
height: 100px;
width: 60px;
border: 1px solid transparent;
border-left: $brian-border;
background: #FFFFFF;
@include border-radius(80% 0 0 50%);
z-index: 9;
@include transform(rotate(-8deg));
}
.shoulder {
height: 40px;
border: $brian-border;
background: #FFFFFF;
$shoulder-shadow-size: $shadow-size - 2px;
&:after /*shadow*/ {
height: 110%;
width: 100%;
right: $shoulder-shadow-size - 2px;
@include box-shadow($shoulder-shadow-size 0px 3px -2px $shadow-color);
@include border-radius(30% 30% / 80% 80%);
@include transform(rotate(-8deg));
}
$shoulder-position: -2px;
$shoudler-width: 18px;
$shoulder-top: -1px;
$shoulder-rotate: 20deg;
$arm-position: 2px;
&.left {
top: $shoulder-top - 3px;
width: $shoudler-width * 2;
left: $shoulder-position + 3px;
border-right-color: transparent;
@include border-radius(80% 0 0 0);
@include transform(rotate($shoulder-rotate));
.arm {
left: $arm-position;
@include border-radius(20% 0 0 0 / 80% 0 0 0);
@include transform(rotate(-$shoulder-rotate));
}
}
&.right {
top: $shoulder-top;
width: $shoudler-width;
right: $shoulder-position;
border-left-color: transparent;
@include border-radius(0 80% 0 0);
@include transform(rotate(-$shoulder-rotate));
z-index: 11;
.arm {
right: $arm-position;
@include border-radius(0 20% 0 0 / 0 80% 0 0);
@include transform(rotate($shoulder-rotate));
$arm-shadow-size: $shadow-size - 2px;
&:after /*shadow*/ {
height: 125%;
width: 100%;
right: $arm-shadow-size - 2px;
@include box-shadow($arm-shadow-size 0px 3px -2px $shadow-color);
@include border-radius(0 10% 0 0 / 0 80% 0 0);
}
.thumb {
bottom: 2px;
right: -2px;
height: 10px;
width: 8px;
background: #FFFFFF;
border-right: $brian-border;
@include border-radius(50%);
}
}
}
.arm {
top: 34px;
height: 42px;
width: 30px;
background: #FFFFFF;
border-right: $brian-border;
border-left: $brian-border;
$fingers: 3;
$finger-height: 15px;
$finger-width: 10px;
$finger-startdistance: 0px;
span {
width: $finger-width;
background: #FFFFFF;
border: $brian-border;
border-top-color: transparent;
@include border-radius(0 0 50% 70%);
@include transform(rotate(-10deg));
@for $i from 1 through $fingers {
&:nth-of-type(#{$i}n) {
left: $finger-startdistance + ($finger-width * ($i - 1));
height: $finger-height - ($i * 1.5);
bottom: -($finger-height - ($i * 1.5)) + 2px;
}
}
$finger-shadow-size: 5px;
&:after /*shadow*/ {
height: 110%;
width: 100%;
top: -$finger-shadow-size + 2px;
right: $finger-shadow-size - 2px;
@include box-shadow($finger-shadow-size $finger-shadow-size 3px 0 $shadow-color);
@include border-radius(0 0 50% 70%);
}
}
}
}
.armpit.right {
top: 32px;
right: 13px;
height: 40px;
width: 15px;
background: #FFFFFF;
z-index: 12;
&:before {
height: 40px;
width: 8px;
background: #FFFFFF;
@include border-radius(50%);
border: 1px solid transparent;
border-right: $brian-border;
@include transform(rotate(-5deg));
}
}
.armpit.left {
height: 15px;
width: 10px;
top: 6px;
left: 5px;
background: #FFFFFF;
z-index: 8;
@include border-radius(80% 0 0 20%);
&:before {
bottom: -36px;
left: -5px;
height: 44px;
width: 15px;
background: #FFFFFF;
@include border-radius(50% 0 0 20%);
}
}
$crotch-height: 3px;
.crotch {
height: 5px;
width: 7px;
background: #FFFFFF;
border: 1px solid transparent;
border-bottom: $brian-border;
@include border-radius(50%);
bottom: -12px;
left: 40px;
z-index: 10;
@include transform(rotate(10deg));
$crotch-shadow-size: $crotch-height + 2px;
$shadow-height: 5px;
&:before/*shadow*/ {
width: 150%;
height: $crotch-shadow-size;
left: -50%;
top: 0;
@include box-shadow(-1px $crotch-shadow-size 3px 0px $shadow-color);
@include border-radius(0 0 0 80%);
}
}
.bum {
bottom: -10px;
right: -5px;
height: 50px;
width: 30px;
background: #FFFFFF;
border: 1px solid transparent;
border-right: $brian-border;
@include border-radius(50%);
z-index: 10;
@include transform(rotate(15deg));
overflow: hidden;
$bum-shadow-size: $shadow-size + 5px;
&:after /*shadow*/ {
height: 110%;
width: 60%;
top: 20px;
right: $bum-shadow-size - 2px;
@include box-shadow($bum-shadow-size 0 3px 0 $shadow-color);
@include border-radius(0 0 20% 0);
}
}
$leg-height: 42px;
$leg-width: 45px;
$leg-side-position: 5px;
$leg-side-offset: 1px;
$leg-top-offset: 5px;
.leg {
height: $leg-height;
width: $leg-width;
background: #FFFFFF;
border-left: $brian-border;
border-right: $brian-border;
z-index: 8;
$leg-side-position: 5px;
$leg-side-offset: 1px;
$leg-top-position: -$leg-height + 5px;
$leg-shadow-size: $shadow-size;
&.left {
left: $leg-side-position - $leg-side-offset;
bottom: $leg-top-position + $leg-top-offset;
@include border-radius(15% 0 0 5% / 60% 0 0 20%);
z-index: 2;
&:after {
top: 58%;
height: 50%;
right: $leg-shadow-size;
}
}
&.right {
right: $leg-side-position + $leg-side-offset;
bottom: $leg-top-position;
@include border-radius(0 0 0 5% / 0 0 0 20%);
z-index: 4;
}
&:after /*shadow*/ {
height: 108%;
width: 100%;
top: 0%;
right: $leg-shadow-size - 2px;
@include box-shadow($leg-shadow-size 0px 3px -2px $shadow-color);
}
}
$foot-height: 22px;
$foot-top-offset: 7px;
$foot-rotate: 6deg;
.foot {
right: 0;
height: $foot-height;
width: $leg-width + 8;
background: #FFFFFF;
border: $brian-border;
@include border-radius(30% 10% 40% 70% / 70% 40% 30% 50%);
@include transform(rotate(-$foot-rotate));
overflow: hidden;
&.left {
bottom: -($foot-height + $leg-height) + $foot-top-offset + $leg-top-offset;
right: $leg-side-position + $leg-width + $leg-side-offset - 1px;
z-index: 1;
}
&.right {
bottom: -($foot-height + $leg-height) + $foot-top-offset;
right: $leg-side-position + $leg-side-offset - 1px;
z-index: 3;
}
$foot-shadow-size: $shadow-size - 1px;
&:after /*shadow*/ {
height: 100%;
width: 100%;
top: -3px;
left: -$foot-shadow-size;
@include box-shadow($foot-shadow-size 3px 3px 0 $shadow-color);
@include border-radius(0 0 50% 0);
@include transform(rotate(10deg));
}
$toe-position: 8px;
$toe-height: 17px;
span {
width: 10px;
height: $toe-height;
left: $toe-position;
bottom: -3px;
border: 1px solid transparent;
border-left: $brian-border;
$toe-rotate: $foot-rotate + 5;
@include transform(rotate($toe-rotate));
@include border-radius(60% 0 0 60%);
&:nth-of-type(2) {
left: $toe-position * 2 + 3px;
height: $toe-height - 3px;
}
}
}
.shadow {
bottom: -75px;
left: 10px;
width: 220%;
height: 120%;
background: radial-gradient(circle at 40% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
@include transform(rotateX(70deg) rotateY(-20deg));
z-index: -5;
}
}
.logo {
position: fixed;
bottom: 15px;
left: 15px;
z-index: 20;
img {
margin: 0 0 0 -5px;
}
h1, h2 {
font-family: "helvetica neue", helvetica, arial, sans-serif;
margin: 0;
font-size: 26px;
letter-spacing: 1px;
color: #FFFFFF;
font-weight: 100;
}
}
1 Response