Issue 9 of Web Design Readings

Hi readers,

Thanks for reading the issue 9 of web design readings. This week I share some links on canvas and CSS.

Interactive background

I always try to find the usage of canvas tag every day when I’m browsing the web. Last week I found a nice use of canvas in the Pixelapse’s background to create an interactive mash. The color changes over time, the mash opacity follows your mouse cursor.

Drawing symmetry with canvas

One unique usage in canvas is drawing complex shapes dynamically, such as the mesh in previous example. potatoDie on CodePen demonstrates how you can draw a path and rotate the canvas in the midway.

In my mobile web app development course, I also share how to use the basic canvas API to create mirror drawing on the canvas.

CSS Calc expression

calc is ready to use in modern browsers. It provides run-time calculation expressions as a value in CSS property. In short, it allows defining value like this:

width: calc(100% - 150px); 

Dudley Storey, the author of Pro CSS3 Animation, shares a tutorial “Layout math with CSS – Understanding calc” helps you get started using this new awesome CSS feature.

If you have written SCSS, you’d most likely have used SCSS calculation already, such as:

$offset: 50px; width: 200px + $offset; 

What’s different between perprocessor’s calculation and the CSS calc?

  1. The preprocessor executes the expression in compile-time. The calc keeps the expression in the CSS file and the browser evaluates the calculation in run-time.

  2. calc allows you to mix the percentage and other units together. In our previous example, we can calculate 100% - 150px. This is currently not available in SCSS.

A side note if you’re using SCSS variable and calc together: Make sure you wrap your SCSS variable with the #{}. Otherwise the SCSS compiler will output the $variable directly to the CSS code and thus causing error. For example:

.main-content {   width: calc(100% - #{$side-bar-width}; } 

Indeed, there is CSS native variable as an experimental feature in Mozilla. This feature, however, is only available in Firefox. So we still need the pre-processor for writing CSS variables.

Right click on logo

The play framework is a Java web framework. In their website, you may try to right click on the logo and you’ll get a pop-up dialog to let you download the logo in SVG and PNG format.

This is a nice touch because at most cases, people wants your logo file when they right click on your logo area. The website provides what readers need.

Speaking of the dialog, the demos from tympanus shows a collection of dialog effects. There is tutorial there and you can follow to create your own dialog popping up effect.

Click through transparent PNG

Here is a trick on overlapping transparent PNG on top of HTML anchors. This demo shows that we can actually click through a transparent PNG and click on the links underlying. This may not be useful most of the time, but this is a nice-to-have knowledge when working on PNGs overlapping.


P.S. This is the 9th issues. I reviewed all the issues and there are mainly two approaches in my writings. The first one is having various links I have read on that week. The other approach is to focus on one topic in each issue, which I shared my thoughts with different sources and links on the same topic. Which approach do you like?

Truely thanks for your reading.

Best Regards,
Thomas Seng Hin Mak