CSS-Peeps
One CSS File : One <div> : 5 MILLION Open Peeps Combinations : Infinite Customization
by Jane Ori from PropJockey
Heads
Faces
Accessories
Facial Hair
Bodies
Build-a-Peep Export Options
@property supported API
(~72.95% of global users)
Compatibility focused API
(~92.33% of global users)
(~72.95% of global users)
✨ Variant options set in CSS ✨
Variant options set in HTML
(~92.33% of global users)
Variant options set in HTML
(Note: CSS-Peeps only requires a single CSS file and is less than 1/10th of Twitter's max gif size)
Return to Build-a-Peep
Return to Build-a-Peep
(documentation improving soon, just getting it out the door! <3)
install
see readme
Build-A-Peep only available on desktop (for now!)
The Type Grinding API allows easily swapping variants on :hover!
--peep-flipped: 0; <number [0,1]>
--peep-zoom: 1; <number>
--peep-rotate: 0deg; <angle>
--peep-accessory-offset-x: 0px; <length>
--peep-accessory-offset-y: 0px; <length>
--peep-facial-hair-offset-x: 0px; <length>
--peep-facial-hair-offset-y: 0px; <length>
--peep-face-offset-x: 0px; <length>
--peep-face-offset-y: 0px; <length>
--peep-head-offset-x: 0px; <length>
--peep-head-offset-y: 0px; <length>
--peep-body-offset-x: 0px; <length>
--peep-body-offset-y: 0px; <length>
add extra <background> layers above the default color layers, below the black lines:
--peep-custom-paint: initial;
--peep-hat-color: #FC03C2; <color>
--peep-hair-color: #7300E6; <color>
--peep-skin-color: #87ceeb; <color>
--peep-accessory-color: #00ff00; <color>
--peep-facial-hair-color: #ffd700; <color>
--peep-object-color: #ffa500; <color>
--peep-clothes-color: #ff0000; <color>
add extra <background> layers above the clothes color, below the other peep colors, below the black lines:
--peep-clothes-custom-paint: linear-gradient(var(--peep-clothes-color) 0 100%);
Excluding --peep-flipped, All these properties are registered so they can be transitioned or animated if the browser supports it
CSS-Peeps API Docs
install
see readme
The Type Grinding API allows easily swapping variants on :hover!
See the Pen Peep Hulk (:hover, :focus) - CSS-Peeps by Jane Ori 💜 (@propjockey) on CodePen.
--peep-zoom: 1; <number>
--peep-rotate: 0deg; <angle>
--peep-accessory-offset-x: 0px; <length>
--peep-accessory-offset-y: 0px; <length>
--peep-facial-hair-offset-x: 0px; <length>
--peep-facial-hair-offset-y: 0px; <length>
--peep-face-offset-x: 0px; <length>
--peep-face-offset-y: 0px; <length>
--peep-head-offset-x: 0px; <length>
--peep-head-offset-y: 0px; <length>
--peep-body-offset-x: 0px; <length>
--peep-body-offset-y: 0px; <length>
add extra <background> layers above the default color layers, below the black lines:
--peep-custom-paint: initial;
--peep-hat-color: #FC03C2; <color>
--peep-hair-color: #7300E6; <color>
--peep-skin-color: #87ceeb; <color>
--peep-accessory-color: #00ff00; <color>
--peep-facial-hair-color: #ffd700; <color>
--peep-object-color: #ffa500; <color>
--peep-clothes-color: #ff0000; <color>
add extra <background> layers above the clothes color, below the other peep colors, below the black lines:
--peep-clothes-custom-paint: linear-gradient(var(--peep-clothes-color) 0 100%);
Excluding --peep-flipped, All these properties are registered so they can be transitioned or animated if the browser supports it