Show previous messages
Tips n' tricksApril 6, 2019 at 9:36am (Edited 8 months ago)
I think it'd be nice to share some specific tricks we've stumbled into while grinding through these, here are some I found helpful:
position:fixedalmost always beats
- never use
rotate(180deg)in transforms, use
- don't quote attributes, just use
+instead of a space, eg:
<img style="box-shadow:0 0 0 2px#FFF">
- if you use a
border-radiusof over 99% consider
inas a unit instead (eg,
- in a pinch, you can add made-up attributes and select them.
<p i>is selectable via
Show more messages
April 6, 2019 at 8:30pm
April 6, 2019 at 8:30pm
2 shapes formed once you play with border, margin and border-radius. 1 for the
htmland 1 for the
body. Using the box-shadow trick, the outer one can be hidden.
Hmm interesting, gonna see if I can recreate that. I actually did something similar to Alex, but with some more optimization I just got it to 123 characters 🤐
I think I'm gonna waste my sleep today figuring out this optimization
#2 is probably the one I'm furthest from understanding, I've just been ignoring it :D
Well, there are many tricks. First of all, SVG has default size for replaced element 150×150. However, you can set size via
heightattributes, or set an aspect-ratio with
viewBox, then it will have 100% width and corresponding height.
viewBoxcan be also used for scaling SVG units (by default they equal to pixels)–it can cut a number of bytes. One fine usage of it is to normalize scale in such a manner, that
stroke-widthyou want to use had size equal to one, so it can omitted as a default value.
welp there goes my whole day
SVGOis handy for scaling images, e.g. one can add
transformand ran it in a manner
$ svgo -s '<path d="M50,50h50v50h-50" transform="scale(.02)">`
and you get values like
Some minor tricks: paths are get closed automatically, so you can omit the last segment or
z, if you don't need them (can have use for strokes). There is
<path/>, that helps building circular segments. One trick, that I learnt recently myself is that space after flags can be omitted. E.g.
Well, they are closely related. Also, personally I think that drawing with CSS generally is not that good idea for most not-trivial cases. SVG fits better, and results proof it.
I agree with you completely of course – SVG is perfect for drawing shapes. But that's my whole point. It's hard to do these levels with just CSS which is what made it fun. My understanding is that this is what the game was about, so I was surprised when I saw that SVG solutions were allowed. Still - major respect for your skills :)
One more tip about SVG. Browsers recently allowed using
xlink:prefix and—more importantly—corresponding namespace. It's handy for referencing elements with
<rect width="100" height="50" id="r" /><use href="#r" x="50" y="100" fill="green" />
(just remember that attributes within refererenced elements cannot be overwritten. It's kinda like predecessor of shadow DOM.)