Skip to content

Instantly share code, notes, and snippets.

/BB-8 CSS Illustration.markdown

Created June 9, 2016 00:43
Show Gist options
  • Save anonymous/0b9a3160a94cae0269611307b00a0abf to your computer and use it in GitHub Desktop.
Save anonymous/0b9a3160a94cae0269611307b00a0abf to your computer and use it in GitHub Desktop.
Download ZIP
BB-8 CSS Illustration
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
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/
Raw
style.sass
$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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment