?
How is it built?
Built with HTML, CSS and determination :-)
CSS properties used include border radius, box shadows, transforms and animations. Buttons are styled checkboxes.
All the code is on
github
Why build this?
I wanted to improve my CSS skills and creating animated illustrations in CSS is both fun and challenging.
Inspired by this talk on
Illustration with CSS
by Lynn Fisher and also this
CSS Art
by Afragon.
What is this?
Togglefish is an experiment in using pure
CSS
to create an animated scene.
Pure CSS meaning only HTML & CSS was used. No JavaScript, SVG, or images.
Crafted with determination by
Neil Marsden
<
What?
Why?
How?
Toggles
Togglefish
Scenery
CSS Styles
Effects
Toggle
Eyebrows
Eyes
Mouth
Fins
Scales
Body
Bubbles
Zzz
Name
Sky
Mountains
Sea
Sandbanks
Shell
Rocks
Tiny Fish
Crab
UFO
Surfer
Outline
Background
Box Shadow
Border Radius
Border
Transform
Pseudo Elements
Parallax
Shake It ⚠