World of trickery with css functions
Who am I ?
- @praveenpuglia
- github.com/praveenpuglia
Yes! css has functions
...and we have all used them
- url()
- calc()
- rgb/rgba()
- hsl/hsla()
- linear/radial-gradient()
- counter()
- attr()
- scale()/rotate()/translate()
calc()
- Mozilla Developer Network (MDN)
Arithmetic Operations
calc() supports +, -, /, * operators
you need whitespace around the + and - operators. Without that it's considered invalid syntax.
Why? CSS Variables Forward Compatibility
Nesting
calc( calc(20px / 2) / 4) /* becomes... */
calc( (20px / 2) / 4) = 2.5pxCSS variables can be used to make this look simpler.
--calcA : calc(20px / 2);
--calcB : calc( var(--calcA) / 4);Demo : Grids
Demo : fixed margin Containers
Demo : Content only scroll
Demo : Right-bottom positioning
Demo : Rainbow gradients
Demo : Diagonal gradients
Demo : two column Layout
Resources
World of Trickery With CSS Functions
By Praveen Puglia
