November 10, 2015

Happy Halloween

Happy Halloween

Halloween pumpkin made using box-shadows, clip paths and html shapes. The highlight thing is the candle effect which is done using CSS animations.

HTML

<div class="body">
  <div class="pumpkin">
    <div class="front left"></div>
    <div class="front right"></div>
    <div class="top-dent-back left"></div>
    <div class="top-dent-back right"></div>
    <div class="top-dent-front left"></div>
    <div class="top-dent-front right"></div>
    <div class="stalk"></div>
    <div class="stalk-shadow"></div>
    <div class="eye left"></div>
    <div class="eye right"></div>
    <div class="nose"></div>
    <div class="mouth"></div>
    <div class="bottom-shadow"></div>
    <div class="candle eye left"></div>
    <div class="candle eye right"></div>
    <div class="candle nose"></div>
    <div class="candle mouth"></div>
  </div>
</div>

SCSS

@import 'compass';$p-height: 200px;$p-width: 240px;.body {
  height: $p-height * 1.2;
  width: 100%;
  margin: 10% auto;
}$pumpkin-thickness: 8px;.pumpkin {
  position: relative;
  left: calc(50% - (#{$p-width;
}/2));height: $p-height;width: $p-width;background: #E37100;@include border-radius(45% 45% 40% 40% / 43% 43% 50% 50%);@include box-shadow(inset 0 -20px 20px 0px rgba(0,0,0,0.4));:before, :after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
}

* {
  position: absolute;
}

.front {
  height: 94%;
  width: 50%;
  bottom: 0;
  z-index: 2;
  &: before{top: 5%;
  height: 94%;
  width: 85%;
  @include border-radius(inherit);
}&:after {
  top: 12%;
  height: 85%;
  width: 40%;
  @include border-radius(inherit);
}&.left {
  @include box-shadow(inset 5px 5px 10px -5px rgba(0,0,0,0.3));@include border-radius(65% 35% 10% 85% / 45% 20% 10% 60%);left: 0;
  &: before{left: 20%;
  @include box-shadow( -7px 0 5px -5px rgba(0,0,0,0.3));
}&:after {
  left: 60%;
  @include box-shadow( -7px 0 5px -5px rgba(0,0,0,0.3));
}}&.right {
  @include box-shadow(inset -5px 5px 10px -5px rgba(0,0,0,0.3));@include border-radius(35% 65% 85% 10% / 20% 45% 60% 10%);right: 0;
  &: before{right: 20%;
  @include box-shadow( 7px 0 5px -5px rgba(0,0,0,0.3));
}&:after {
  right: 60%;
  @include box-shadow( 7px 0 5px -5px rgba(0,0,0,0.3));
}}}

.top-dent-back,.top-dent-front {
  height: 30px;
  width: 20px;
  @include border-radius(50%);
}$dent-rotate-back: 110deg;$dent-rotate-front: 90deg;.top-dent-back {
  top: 3px;
  &.left{left: 80px;
  @include transform(rotate($dent-rotate-back));@include box-shadow( -7px 0 5px -5px rgba(0,0,0,0.3));
}&.right {
  right: 80px;
  @include transform(rotate(-$dent-rotate-back));@include box-shadow( 7px 0 5px -5px rgba(0,0,0,0.3));
}}

.top-dent-front {
  top: 18px;
  &.left{left: 90px;
  @include transform(rotate($dent-rotate-front));@include box-shadow( -7px 0 5px -5px rgba(0,0,0,0.2));
}&.right {
  right: 90px;
  @include transform(rotate(-$dent-rotate-front));@include box-shadow( 7px 0 5px -5px rgba(0,0,0,0.2));
}}

.stalk {
  top: -5px;
  left: calc(50% - 15px);
  height: 30px;
  width: 30px;
  z-index: 1;
  background: #35260F;
  @include border-radius(10% 10% 50% 50% / 90% 90% 20% 20%);@include transform(rotate(5deg));
}

.stalk-shadow {
  top: -10px;
  left: calc(50% - 60px);
  height: 50px;
  width: 120px;
  @include filter-gradient(#000000, #000000, horizontal);@include background-image(radial-gradient(center, ellipse cover,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%));opacity: 0.4;
}

.eye {
  top: 65px;
  height: 35px;
  width: 70px;
  background: #5A2504;
  z-index: 4;
  $eye-position: 38px;
  $eye-rotate: 25deg;
  &: before{height: 100%;
  width: 87%;
  @include border-radius(inherit);z-index: 3;
}&.left {
  left: $eye-position;
  @include transform(rotate($eye-rotate));@include border-radius(10% 10% 40% 60% / 0% 30% 50% 95%);&: before{left: $pumpkin-thickness;
  @include box-shadow(-$pumpkin-thickness 0 0 0 #AD4B07);border-right: 1px solid darken(#AD4B07, 10%);
}}&.right {
  right: $eye-position;
  @include transform(rotate(-$eye-rotate));@include border-radius(10% 10% 60% 40% / 30% 0% 95% 50%);&: before{right: $pumpkin-thickness;
  @include box-shadow($pumpkin-thickness 0 0 0 #AD4B07);border-right: 1px solid darken(#AD4B07, 10%);
}}}

.nose {
  top: 105px;
  left: calc(50% - 13px);
  height: 26px;
  width: 26px;
  background: #AD4B07;
  z-index: 4;
  -webkit-clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
  overflow: hidden;
  &: before{left: 15%;
  top: 15%;
  height: 70%;
  width: 70%;
  background: #5A2504;
  -webkit-clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}}

.mouth {
  top: 65px;
  left: calc(50% - 80px);
  height: 110px;
  width: 160px;
  z-index: 3;
  background: #5A2504;
  -webkit-clip-path: polygon(0% 58%, 7% 65%, 19% 70%, 22% 71%, 28% 82%, 33% 74%, 38% 74%, 50% 75%, 62% 74%, 67% 74%, 72% 82%, 78% 71%, 81% 70%, 93% 65%,100% 58%, 94% 75%, 86% 89%, 79% 94%, 70% 98%, 60% 100%, 56% 100%, 50% 88%, 44% 100%, 40% 100%, 30% 98%, 21% 95%, 14% 89%, 6% 75%);
  clip-path: polygon(0% 58%, 7% 65%, 19% 70%, 22% 71%, 28% 82%, 33% 74%, 38% 74%, 50% 75%, 62% 74%, 67% 74%, 72% 82%, 78% 71%, 81% 70%, 93% 65%,100% 58%, 94% 75%, 86% 89%, 79% 94%, 70% 98%, 60% 100%, 56% 100%, 50% 88%, 44% 100%, 40% 100%, 30% 98%, 21% 95%, 14% 89%, 6% 75%);
  overflow: hidden;
  &: before{left: $pumpkin-thickness;
  height: 100%;
  width: calc(100% - (#{$pumpkin-thickness;
}

* 2));background: #5A2504;top: -$pumpkin-thickness;-webkit-clip-path: polygon(0% 58%, 7% 65%, 19% 70%, 22% 71%, 26% 89%, 30% 87%, 38% 74%, 50% 75%, 62% 74%, 70% 87%, 74% 89%, 78% 71%, 81% 70%, 93% 65%,100% 58%, 94% 75%, 86% 89%, 79% 94%, 70% 98%, 60% 100%, 56% 100%, 50% 90%, 44% 100%, 40% 100%, 30% 98%, 21% 95%, 14% 89%, 6% 75%);clip-path: polygon(0% 58%, 7% 65%, 19% 70%, 22% 71%, 28% 82%, 33% 74%, 38% 74%, 50% 75%, 62% 74%, 65% 82%, 74% 90%, 78% 71%, 81% 70%, 93% 65%,100% 58%, 94% 75%, 86% 89%, 79% 94%, 70% 98%, 60% 100%, 56% 100%, 50% 90%, 44% 100%, 40% 100%, 30% 98%, 21% 95%, 14% 89%, 6% 75%);z-index: 2;
}&:after {
left: 0;
height: 100%;
width: 100%;
background: #AD4B07;
z-index: 1;
}}

.bottom-shadow {
bottom: -195px;
left: calc(50% - 250px);
width: 500px;
height: 400px;
background: radial-gradient(circle at 50% 50%, rgba(0,0,0, 0.8), rgba(0,0,0, 0.2) 25%, rgba(0,0,0, 0) 35%);
z-index: -1;
@include transform(scaleY(0.2));
}

.candle {
background: rgba(yellow, 0.5);
z-index: 15;
@include box-shadow( 0 0 50px 2px rgba(yellow, 0.8));&: before, &:after{display: none;
}&.nose, &.mouth {
@include box-shadow(none);
}}}

@keyframes candle {
0%, 100% {
  opacity: 0;
}

50% {
  opacity: 1;
}}

.candle {
  @include animation(candle linear 3s infinite);
}   
demo

No comments:

Post a Comment

Popular Posts

Views