Drawing with CSS

Makzan’s Dispatch 2020 week 9

This week, I was implementing the new course and classroom module on my MakClass. I am also trying to draw illustrations with CSS.

https://codepen.io/collection/nNwYwa

Drawing with CSS requires a lot of flexbox skills for the alignment. Lines can be border or outline. We have a wide variety of line styles, by combining dashed, dotted border, double outline, wavy text underline.

The gradients and multiple-backgrounds allow very creative filling options. Gradient can do much more than transforming colors. We can draw solid lines, multiple lines, repeated patterns, shadows. By combining the mix blending mode and clipping, we never run out of filling options in CSS.

Last but not least, keyframes and animation-delay allow us to control animation precisely. Especially for the delayed frames, it is essential which creates the weight of animation.

Links worth sharing

The WebAIM Million Update
https://webaim.org/projects/million/update

The analysis report last year shows that around 85% of tested pages have low contrast issues.

Gov.uk shows an example of how to make the focus state more accessibility
https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/

Create Diagonal Layouts
https://9elements.com/blog/pure-css-diagonal-layouts/

Useful tips and a playground to quick getting started diagonal layout:
https://codepen.io/enbee81/pen/yLyrmyg

scroll-margin-top
https://css-tricks.com/fixed-headers-and-jump-links-the-solution-is-scroll-margin-top/

Finally, we can jump to links without hiding the sub-headings.


Don’t try to sanitize input. Escape output.
https://benhoyt.com/writings/dont-sanitize-do-escape/

In short, it’s no good to strip out “dangerous characters”, because some characters are dangerous in some contexts and perfectly safe in others.

The only code that knows what characters are dangerous is the code that’s outputting in a given context.

CNN Lite
https://lite.cnn.com/en

Very lightweight news headings in less than 7KB.


Tot
https://tot.rocks/

A minimal plain-text editor with 7, and only 7, documents. It replaces the Edit app in my iPhone. Edit is still great. But I can benefit more with the iCloud sync with Tot.


I built a minimal idle game
https://mak.la/progress

I used to addicted to those idle games (or clicker games) until I figure our it is just a progress bar for whatever theme. So I built this minimal idle game last week and put on my desktop. Just to let me have a sense of time moving.

Code worth sharing

CSS-only tabs with flexbox and radio buttons.

https://codepen.io/makzan/pen/MWYMVoM

Until next week,
Thomas Mak