DublinCss meetup
                     Having fun with 
CSS
Hello!
I Am Andrew
Tonight we’re going to look at how Pinterest, 
Dribbble and Instagram can influence us in  
a positive way  
Find Inspiration
Andy Barefoot
Katherine Kato
Olivia NG
Jules Forrest
Pick a niche
Print Articles Album Covers Movie Posters
Tourism Landscapes Absolutely anything
Set yourself some goals
Can this be built without svg?
No images unless background images 
Learn something cutting edge 
 Shapes 
 Use the grid 
 Clip Mask 
Free tools are your friend 
Clip path generator: 
 https://bennettfeely.com/clippy/ 
Gradients:  
https://webgradients.com/
SVG optimiser: 
https://jakearchibald.github.io/svgomg/
SVG encoder: 
 https://yoksel.github.io/url-encoder/
The Process
Vague Idea Pinterest Codepen
Deviate Iterate Have Fun
Start slow
Expectation Reality
Beginnings
This looks fun
Find an image that interests you 
Perfect for  
Transforms  
Identify why you like it
Ignore the  
Lines as no svgs 
Pinterest
Circular text
Momentum
Simple palette 
To begin
shapes
Ninety percent is just showing up / 
just starting
Codepen
Sand
Momentum Build one of  
everything
Build one of  
everything
You have your base, you’re starting 
to imagine what could be 
Re-use, 
Codepen Re-use , Re-use
Momentum
If you’re unsure why something is 
happening in a certain way 
Have a debug mode which will 
quickly add an outline to all 
elements 
Codepen
Transform and re-use
Customisation
Begin to make it your own
Deviate Adding 
sand dunes 
Adding a river
Going further
Daytime scene —-> Night time
Duplicate the original and modify 
the new. 
If you are happy, then I highly 
recommend forking and going 
again, it could get messy
Nothing new, at this stage we’re 
just extending what we have
Iterate
Iterations
Animations
Css or JS?
*take this time to clean your code and identify the 
animatable elements.
*Variables are your f riend.
*Walk before you run
Have Fun
Animation
Declutter and focus
It’s easier to animate one 
element at a time than all at 
once.
Have Fun
Animation
Outlines combined 
with dev tools really 
help identify 
boundaries
Have Fun
Animation
Putting it all together
Have Fun
Learnings
Take your time One animation at a time
Use an outline to debug your animation at each stage 
CSS animations use the browser developer tools Don’t quit
What you make is less important than what you learn
Regular commits / forks
Don’t be married to any one idea
Tips
Use html classes f reely: ‘ is-mini’ ‘ is-right’
Don’t waste time on the perfect palette at the start
Use position for positioning and transforms for animations
Experiment with Shorthand code is Take the low hanging 
blend modes hard to manipulate f ruit 
on the fly 
Go with the flow
Thanks!
Any questions?