Skip to content

Instantly share code, notes, and snippets.

@TravisHi

TravisHi/BB-8 CSS Illustration.markdown

Created June 9, 2016 00:52
Show Gist options
  • Save TravisHi/28ea896c86212780d5e4115fa7cb7d40 to your computer and use it in GitHub Desktop.
Save TravisHi/28ea896c86212780d5e4115fa7cb7d40 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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.

Raw
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)
Raw
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
+
Raw
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/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment