Webleb - UI Elements

HTML

CSS

.container {
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 10px;
 transform: translateY(75%);
 scale: 0.5;
}

#frame {
 display: flex;
 align-items: baseline;
 justify-content:left;
}

#truck {
 margin-top: 15em;
 margin-bottom: 3em;
}

#cab {
 width:7em;
 height:11em;
 background: #FEC10E;
 position:relative;
 left: 3em;
 border-top: 0.1em solid #333;
 border-right: 0.1em solid #333;
}

#cab::before {
 content: "";
 position: absolute;
 width:0;
 height:0;
 border-right: 2em solid #FEC10E;
 border-bottom: 0;
 border-left: 1em solid transparent;
 border-top:11em solid transparent;
 left: -3em;
}

#cab::after {
 content: "";
 position: absolute;
 width:0em;
 height: 11em;
 background: rgba(255,255,255,0);
 box-shadow: 0 0 0 0.1em rgba(51,51,51,1);
 top:0;
 left:-1em;
 transform: rotate(10.4deg);
 z-index:-1;
}

#cabdetail {
 content: "";
 width: 6em;
 height: 4em;
 background: #BEE7FB;
 position:relative;
 border-radius: 1em;
 border: 0.1em solid #333;
 top: 0.5em;
 left: 0.5em;
 box-shadow: inset 0.1em 0.1em 0.3em 0.3em rgba(255,255,255,0.5);
}

#cabdetail::before {
 content: "";
 width: 1.5em;
 height: 0;
 position:absolute;
 border-radius: 1em;
 border: 0.1em solid #333;
 top: 5.5em;
 right: 1em;
}

#cabdetail::after {
 content: "";
 width: 1.5em;
 height: 0;
 position:absolute;
 border-radius: 1em;
 border: 0.1em solid #333;
 top: 8.5em;
 left: -2.2em;
 box-shadow: -0.1em 0.3em, -0.15em 0.6em, -0.2em 0.9em
}

#dumper {
 position:relative;
 display: flex;
 align-items: baseline;
 left: 2.9em;
 transition: all 1s linear;
 transform-origin: bottom right;
 &:active {
  transform:rotate(25deg);
 }
 #front {
  height: 15em;
  width: 6em;
  background: #FAE80C;
  position:relative;
  box-shadow: 0 0 0 0.05em rgba(51,51,51,1), -0.4em 0 0 0.1em rgba(250,232,12,1), -0.5em 0 0 0.05em rgba(51,51,51,1), 0em 0 0 0.05em rgba(51,51,51,1), 0.4em 0 0 0.1em rgba(250,232,12,1), 0.5em 0 0 0.05em rgba(51,51,51,1) ;
  margin-left: 0.6em;
  margin-right: 0.6em;
  &::before {
   content: "";
   position: absolute;
   height: 0;
   width: 0;
   border-right: 3em solid #FAE80C;
   border-bottom: 4em solid transparent;
   left: -3.5em;
   z-index: -1;
  }
  &::after {
   content: "";
   position: absolute;
   height: 1em;
   width: 13em;
   background: #FAE80C;
   border-radius: 0.5em;
   top: -1em;
   left: -6.5em;
   border-left: 0.1em solid #333;
   border-top: 0.1em solid #333;
   border-bottom: 0.1em solid #333;
   box-shadow: -0.05em 0.05em 0.05em 0.05em rgba(51,51,51,0.5);
  }
 }
 #middle {
  height: 12em;
  width: 6em;
  background: #FAE80C;
  position:relative;
  box-shadow: 0em 0 0 0.05em rgba(51,51,51,1), 0.4em 0 0 0.1em rgba(250,232,12,1), 0.5em 0 0 0.05em rgba(51,51,51,1);
  margin-right: 0.6em;
  left:-0.1em;
  border-top:none;
  z-index:-1;
  &::before {
   content: "";
   position: absolute;
   height: 0;
   width: 0;
   border-left: 6em solid #FAE80C;
   border-top: 3em solid transparent;
   top:-3em;
   z-index:-1;
  }
  &::after {
   content: "";
   position: absolute;
   height: 1em;
   width: 8em;
   background: #FAE80C;
   border-radius: 0.5em;
   transform:rotate(27deg);
   top:-2.4em;
   left:-1em;
   border-top: 0.1em solid #333;
   border-bottom: 0.1em solid #333;
   box-shadow: -0.05em 0.05em 0.05em 0.05em rgba(51,51,51,0.5);
  }
 }
 #back {
  height: 9em;
  width: 6em;
  background: #FAE80C;
  position:relative;
  box-shadow: 0em 0 0 0.05em rgba(51,51,51,1), 0.4em 0 0 0.1em rgba(250,232,12,1), 0.5em 0 0 0.05em rgba(51,51,51,1);
  margin-right: 0.6em;
  left:-0.2em;
  z-index:-2;
  &::before {
   content: "";
   position: absolute;
   height: 0;
   width: 0;
   border-left: 6em solid #FAE80C;
   border-top: 3em solid transparent;
   top:-3em;
  }
  &::after {
   content: "";
   position: absolute;
   height: 1em;
   width: 8em;
   background: #FAE80C;
   border-radius: 0.5em;
   transform:rotate(27deg);
   top:-2em;
   left:-1em;
   border-top: 0.1em solid #333;
   border-bottom: 0.1em solid #333;
   box-shadow: -0.05em 0.05em 0.05em 0.05em rgba(51,51,51,0.5);
  }
 }
 #tail {
  height: 8.4em;
  width: 1em;
  background: #FAE80C;
  z-index: -3;
  position:relative;
  left:-0.3em;
  border-bottom: 0.1em solid #333;
  &::before {
   content: "";
   position: absolute;
   height: 0;
   width: 0;
   border-left: 5em solid #FAE80C;
   border-bottom: 8.4em solid transparent;
   right: -5em;
  }
  &::after {
   content: "";
   position: absolute;
   height: 1em;
   width: 7em;
   background: #FAE80C;
   border-radius: 0.5em;
   top:-1em;
   left:-0.7em;
   border-right: 0.1em solid #333;
   border-top: 0.1em solid #333;
   border-bottom: 0.1em solid #333;
   box-shadow: -0.05em 0.05em 0.05em 0.05em rgba(51,51,51,0.5);
  }
 }
 #details {
  width:0;
  height:0;
  position:relative;
  &::before {
   content: "";
   position: absolute;
   height: 0.1em;
   width: 9.8em;
   background: #333;
   transform: rotate(-58deg);
   top:-4.2em;
   left:-2.7em;
  }
  &::after {
   content: "";
   position: absolute;
   height: 0.1em;
   width: 5em;
   background: #333;
   transform: rotate(53deg);
   top:-13.1em;
   left:-25.4em;
   z-index:-3;
  }
 }
}

#base {
 width: 32em;
 height: 2.5em;
 background: #CCC;
 border-radius: 2em;
 border: 0.1em solid #333;
 position:relative;
 z-index: 5;
}

#base::before, #base::after {
 content:"";
 position: absolute;
 width: 0;
 height: 0;
 border-radius: 50%;
 border: 1.2em solid #EBB91B;
 box-shadow: 0 0 0 2em rgba(51,51,51,1);
 top: 0.5em;
 z-index:1;
}

#base::before {
 left: 6em;
}
#base::after {
 right: 4em;
}

#hydraulics {
 height:1.5em;
 width:14em;
 position:relative;
 background: #333;
 z-index:-3;
 transform: rotate(-45deg);
 top:-7.5em;
 left: 10em;
}

dump truck

HTML

CSS

JS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS