BB-8 CSS Illustration.markdown

+BB-8 CSS Illustration +--------------------- +BB-8 CSS Illustration inspired by Devtips + +Illustration by Andrew Santoro + + +A Pen by Travis on CodePen. + +License.

gistfile1.txt

+$bb8-outline: #535767
+$bb8-orange: #d68253
+$droid-blue: rgb(95, 135, 197)
+$droid-grey: rgb(243, 243, 243)
+$droid-eye: rgb(121,121,147)
+$droid-eye-shadow: rgb(100, 100, 124)
+
+body
+  background-color: #f6f6f6
+  font-family: 'Roboto', sans-serif
+
+h1
+  text-align: center
+
+.panel
+  margin: 0px auto
+  position: relative
+  width: 800px
+  height: 600px
+  background-color: white
+  border-radius: 3px
+  box-shadow: 3px 3px 30px rgba(0,0,0,0.1)
+  
+
+.bb8-body
+  position: absolute
+  border: 5px solid $bb8-outline
+  border-radius: 50%
+  height: 240px
+  width: 240px
+  top: 270px
+  left: 275px
+  overflow: hidden
+  
+.body-shadow
+  position: relative
+  top: -45px
+  left: 45px
+  width: 240px
+  height: 240px
+  border-radius: 50%
+  box-shadow: 45px 45px 0 0 rgba(0,0,0,0.1)
+  transform: rotate(90deg)
+  z-index: 5
+  
+//bottom circle CSS
+.circle-bottom
+  border: 5px solid $bb8-outline
+  border-radius: 50%
+  height: 100px
+  width: 100px
+  position: absolute
+  top: 170px
+  left: 50px
+  background-color: $bb8-orange
+  
+.circle-bottom-inner
+  border: 5px solid $bb8-outline
+  border-radius: 50%
+  height: 65px
+  width: 65px
+  position: absolute
+  top: 187px
+  left: 67px
+  background-color: white
+  
+.circle-bottom-center
+  border: 5px solid $bb8-outline
+  border-radius: 50%
+  height: 30px
+  width: 30px
+  position: absolute
+  top: 205px
+  left: 85px
+  background-color: #7997C7
+
+//Top Left circle CSS
+.circle-left
+  border: 5px solid $bb8-outline
+  border-radius: 50%
+  height: 100px
+  width: 100px
+  position: absolute
+  top: 10px
+  left: -30px
+  background-color: $bb8-orange
+  
+.circle-left-inner
+  border: 5px solid $bb8-outline
+  border-radius: 50%
+  height: 65px
+  width: 65px
+  position: absolute
+  top: 27px
+  left: -12px
+  background-color: white
+  
+.circle-left-center
+  border: 5px solid $bb8-outline
+  border-radius: 50%
+  height: 30px
+  width: 30px
+  position: absolute
+  top: 44px
+  left: 5px
+  background-color: #7997C7
+  
+//Top Right circle CSS
+.circle-right
+  border: 5px solid $bb8-outline
+  border-radius: 50%
+  height: 100px
+  width: 100px
+  position: absolute
+  top: 10px
+  left: 150px
+  background-color: $bb8-orange
+  
+.circle-right-inner
+  border: 5px solid $bb8-outline
+  border-radius: 50%
+  height: 65px
+  width: 65px
+  position: absolute
+  top: 27px
+  left: 170px
+  background-color: white
+  
+.circle-right-center
+  border: 5px solid $bb8-outline
+  border-radius: 50%
+  height: 30px
+  width: 30px
+  position: absolute
+  top: 44px
+  left: 190px
+  background-color: #7997C7
+
+//Lines that appear on the body of BB-8
+.line
+  position: absolute
+  height: 3px
+  background: $bb8-outline
+  
+.top-line
+  top: 65px
+  left: 79px
+  width: 72px
+  
+.left-line
+  top: 140px
+  left: 35px
+  width: 72px
+  transform: rotate(63deg)
+  
+.right-line
+  top: 141px
+  left: 108px
+  width: 87px
+  transform: rotate(305deg)
+
+//body dots
+.dot
+  height: 13px
+  width: 13px
+  border-radius: 50%
+  background: $bb8-outline
+  position: absolute
+  
+.dot-top-left
+  top: 30px
+  left: 85px
+  
+.dot-top-right
+  top: 30px
+  left: 132px
+  
+.dot-center-left
+  top: 98px
+  left: 85px
+  
+.dot-center-right
+  top: 98px
+  left: 138px
+  
+.dot-center-bottom
+  top: 145px
+  left: 107px
+
+//start of bb8 head
+.bb8-head
+  position: absolute
+  width: 170px
+  height: 170px
+  top: 178px
+  left: 315px
+  
+.head-crop
+  position: relative
+  height: 65%
+  background-color: white
+  border-bottom: 6px solid $bb8-outline
+  border-bottom-left-radius: 50%20px
+  border-bottom-right-radius: 50%20px
+  overflow: hidden
+  
+.head-top
+  position: absolute
+  width: 160px
+  height: 160px
+  border: 5px solid $bb8-outline
+  border-radius: 50%
+
+.eye
+  position: absolute
+  width: 50px
+  height: 50px
+  border: 3px solid $bb8-outline
+  top: 25px
+  left: 55px
+  border-radius: 50%
+  background-color: rgba(69, 115, 130, .9)
+  
+.bb8-eye-reflection
+  position: relative
+  top: -84px
+  left: 62px
+  width: 40px
+  height: 40px
+  border-radius: 50%
+  box-shadow: 2px 2px 0 0 rgb(181, 200, 206)
+  transform: rotate(295deg)
+  
+.bb8-eye-shadow
+  position: relative
+  top: -137px
+  left: 65px
+  width: 50px
+  height: 50px
+  border-radius: 50%
+  box-shadow: 8px 8px 0 0 rgb(57, 93, 107)
+  transform: rotate(85deg)
+  
+.beauty-spot
+  top: 72px
+  left: 111px
+  border: 5px solid $bb8-outline
+  
+.orange-line-forhead
+  position: absolute
+  border-top-right-radius: 100%15px
+  border-top-left-radius: 75%
+  border-bottom-left-radius: 75%
+  top: 22px
+  left: 112px
+  width: 30px
+  height: 8px
+  background: $bb8-orange
+  
+.orange-line-leftface
+  position: absolute
+  border-top-right-radius: 75%
+  border-bottom-right-radius: 75%
+  top: 82px
+  left: 5px
+  width: 25px
+  height: 8px
+  background: $bb8-orange  
+  
+.orange-line-rightface 
+  position: absolute
+  border-top-left-radius: 50% //75%
+  border-bottom-left-radius: 50% //75%
+  top: 82px
+  left: 140px
+  width: 25px
+  height: 8px
+  background: $bb8-orange
+
+.forhead
+  top: 10px
+  left: 117px
+  width: 40px
+  
+//start of moustache
+.moustache
+  position: relative
+  top: 120px
+  left: 0px
+  width: 137px
+  margin: 0px auto
+  animation: wiggle 1s ease-in-out infinite
+  //transition: 0.3s
+  cursor: pointer
+
+//interactive moustache
+//.moustache:hover
+  transform: rotate(15deg)
+  
+.mou, .stache
+  position: relative /* absolute */
+  background: $bb8-orange
+  display: block
+  height: 30px
+  width: 60px
+
+//our Right moustache
+.mou
+  position: absolute
+  left: 71px
+  border: 2px solid $bb8-outline
+  border-top-left-radius: 170px
+  border-bottom-right-radius: 200px
+  border-bottom-left-radius: 12px
+  transform: rotate(15deg)
+  z-index: 5
+  
+//our Left moustache
+.stache
+  position: absolute
+  border: 2px solid $bb8-outline
+  border-top-right-radius: 170px
+  border-bottom-right-radius: 12px
+  border-bottom-left-radius: 200px
+  transform: rotate(-15deg)
+  z-index: 15
+
+//start of hat
+.bb8-hat
+  position: relative
+  top: 68px
+  left: 317px
+  height: 120px
+  width: 110px
+  border: 4px solid $bb8-outline
+  transform: rotate(350deg)
+  background-color: $droid-grey
+  z-index: 4
+  border-bottom-left-radius: 100%30px
+  border-bottom-right-radius: 100%25px
+  border-top-left-radius: 100%30px
+  border-top-right-radius: 100%25px
+  
+.blue-band
+  position: absolute
+  top: 100px
+  width: 110px
+  height: 20px
+  background-color: rgb(95, 135, 197)
+  border-bottom-left-radius: 100%20px
+  border-bottom-right-radius: 100%15px
+  
+.blue-rect-left
+  position: absolute
+  top: 57px
+  left: 2px
+  width: 5px
+  height: 25px
+  transform: skew(5deg) rotate(4deg)
+  background-color: $droid-blue
+  
+.blue-rect-center-left
+  position: absolute
+  top: 60px
+  left: 15px
+  width: 15px
+  height: 25px
+  transform: skew(5deg) rotate(4deg)
+  background-color: $droid-blue
+  
+.blue-rect-center
+  position: absolute
+  top: 62px
+  left: 39px
+  width: 35px
+  height: 25px
+  transform: rotate(1deg)
+  background-color: $droid-blue
+  
+.robot-red-eye
+  position: absolute
+  top: 66px
+  left: 55px
+  width: 15px
+  height: 15px
+  border-radius: 50%
+  background-color: rgb(241, 126, 129)
+  
+.robot-red-eye-shadow
+  position: absolute
+  top: 63px
+  left: 56px
+  width: 15px
+  height: 15px
+  border-radius: 50%
+  box-shadow: 3px 3px 0 0 rgb(239, 85, 87)
+  transform: rotate(80deg)
+  
+.blue-rect-top
+  position: absolute
+  top: 10px
+  left: 35px
+  width: 45px
+  height: 45px
+  background-color: $droid-blue
+  border-top-left-radius: 100%7px
+  border-top-right-radius: 100%7px
+
+.robot-eye
+  position: absolute
+  top: 15px
+  left: 43px
+  width: 30px
+  height: 30px
+  border-radius: 50%
+  background-color: $droid-eye
+  
+.robot-eye-reflection
+  position: absolute
+  top: 17px
+  left: 56px
+  width: 11px
+  height: 11px
+  border-radius: 50%
+  background-color: white
+  
+.robot-eye-shadow
+  position: absolute
+  top: 10px
+  left: 47px
+  width: 30px
+  height: 30px
+  border-radius: 50%
+  box-shadow: 5px 5px 0 0 $droid-eye-shadow
+  transform: rotate(80deg)
+  
+.robot-cylinder-hole
+  position: absolute
+  top: 65px
+  left: 82px
+  width: 13px
+  height: 15px
+  border-radius: 50%
+  background-color: black
+
+.robot-cylinder
+  position: absolute
+  top: 65px
+  left: 84px
+  width: 10px
+  height: 14px
+  border-radius: 0 35px 45px 0
+  border-right: solid #fff 3px
+
+.robot-cylinder
+  &:before
+    content: ''
+    width: 15px
+    height: 14px
+    background: darkgrey
+    border-right: solid grey 3px
+    border-radius: 8px 10px 10px 9px
+    position: absolute
+    top: 0
+    left: 0
+  
+.robot-cylinder-inner
+  position: absolute
+  top: 65px
+  left: 91px
+  width: 8px
+  height: 12px
+  border-radius: 50%
+  background-color: black 
+  
+.blue-rect-right
+  position: absolute
+  top: 60px
+  left: 102px
+  width: 5px
+  height: 25px
+  transform: skew(354deg) rotate(354deg)
+  background-color: $droid-blue
+  
+.hat-brim
+  position: absolute
+  top: 168px
+  left: 298px
+  height: 32px
+  width: 170px
+  border: 3px solid $bb8-outline
+  border-radius: 50%
+  background-color: $droid-grey
+  transform: rotate(350deg)
+  z-index: 3
+
+.about
+  margin-top: 50px
+  text-align: center
+  
+@keyframes wiggle
+  0%
+    transform: rotate(15deg)
+  50%
+    transform: rotate(-15deg)
+  100%
+    transform: rotate(15deg) 

index.jade

+h1 StarWars Sir BB-8 (Moustache edition) CSS Illustration
+
+.panel
+
+  .bb8
+  
+    .bb8-body
+    
+      .body-shadow
+    
+      .circle-bottom
+      .circle-bottom-inner
+      .circle-bottom-center
+      
+      .circle-left
+      .circle-left-inner
+      .circle-left-center
+      
+      .circle-right
+      .circle-right-inner
+      .circle-right-center
+      
+      .line.top-line
+      .line.left-line
+      .line.right-line
+      
+      .dot.dot-top-left
+      .dot.dot-top-right
+      .dot.dot-center-left
+      .dot.dot-center-right
+      .dot.dot-center-bottom
+      
+    .bb8-head
+      .head-crop
+        .head-top
+      .eye
+      .bb8-eye-reflection
+      .bb8-eye-shadow
+      .dot.beauty-spot
+      .orange-line-forhead
+      .orange-line-leftface
+      .orange-line-rightface
+
+
+    .bb8-hat
+      .blue-band
+      .blue-rect-left
+      .blue-rect-center-left
+      .blue-rect-center
+      .robot-red-eye
+      .robot-red-eye-shadow
+      .blue-rect-top
+      .robot-eye      
+      .robot-eye-reflection
+      .robot-eye-shadow
+      .robot-cylinder-hole
+      .robot-cylinder
+      .robot-cylinder-inner
+      .blue-rect-right
+      
+    .hat-brim
+    
+    .moustache
+      span.mou
+      span.stache
+
+.about
+  p Based on artwork by: 
+    a(href='https://dribbble.com/shots/2430579-Sir-BB-8') Andrew Santoro
+  p Inspiration: 
+    a(href='https://www.youtube.com/watch?v=QZdj42liTtU') DevTips
+   

script.js

+//original image by Andrew Santoro
+//https://dribbble.com/shots/2430579-Sir-BB-8
+
+//inspired by Devtips
+//https://www.youtube.com/watch?v=QZdj42liTtU
+
+//moustache
+//http://codepen.io/pcridesagain/pen/rtidG
+
+//rounded hat solution
+//http://stackoverflow.com/questions/14508148/rounded-side-not-rounded-corners
+
+//crescent moon css (for rounded shadows)
+//http://aamirshahzad.net/moon-with-css3/