Family Guy's Brian Griffin in Pure CSS

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; } }
JAVASCRIPT
Expand for more options Login