Category Archives: CSS

New Projects

It’s been a few months, and I have a handful of new projects to post about finally. I haven’t done many CSS illustrations so far this year, but I’m ramping up again on Codepen. In addition to two illustrations, I have two little tech demos that I’ve started on. Both need a little more work to get where I want them to be, but they were fun to create and helped round out my knowledge of JavaScript manipulation of CSS.

Illustrations

Desert Dream

Desert Dream is an illustration I worked on around April of this year. It depicts an arid, southwestern, scene of a gas station with clouds rolling slowly across the sky. The foreground with the gas station is fairly simple, just CSS shapes put together to form the objects. In the background the mountain range is made using a CSS clip path, which is duplicated using pseudo elements to create the effect of having mountains closer and farther away. The clouds are also single div elements with an elliptical shape as the base, and then two circles using pseudo-elements to make the top “puffs” of the clouds. Finally the background dots in the sky are made using embedded SVG patterns.

See the Pen Desert Dream by Alex Goff (@alexgoff) on CodePen.

Chesire Clock

Chesire Clock is part illustration, part functional piece. The clock displays the current system time on an analog face with seconds, minutes, and hours displayed. The clock hands and movement are based on several JavaScript clocks. Second and minute hands move in stepped animations around the face of the clock and have a bezier curve to their transition that simulates a bounce as the hands move. The hour hand moves continuously. The data is also displayed beneath the clock hands using a simple JavaScript function that grabs the current date and outputs it in short form.

Additionally the cat’s tail moves as a pendulum with the second hand moving as the tail hits its peak on each swing. The cat is a CSS illustration and does not have anything that is particularly more complex or different than previous illustrations.

See the Pen Chesire Clock by Alex Goff (@alexgoff) on CodePen.

Other Projects

3D Cube

A smaller project, this 3D cube is created using div elements that are transformed and translated. By clicking on the edges of the cube, JavaScript functions are called to rotate the cube. This piece is only partially functional, once CSS transformations are applied it is difficult to change the axis of rotation. Right now rotations can only be applied once, and are applied using the CSS rotate3d() property. The end goal for this is to be able to rotate the cube in any direction an unlimited number of times.

See the Pen 3D Cube by Alex Goff (@alexgoff) on CodePen.

Unicode Picture

This illustration/demo is based on work by front end developer Yuan Chuan and their CSS Doodle library. I wrote a simple Unicode character generator that can accept an input to limit the characters generated. In this case, I hard coded it to use “25” as the base which limits the options to all Unicode characters whose code point ranges from U+2500 to U+25FF. I would like to eventually add more options to the generator like specifying a range, and excluding ranges of characters.

div elements are created and put into a 7×7 grid, with characters centered and justified in the middle of their grid cell. The characters themselves are inserted into pseudo elements of the div using data attributes. Some randomization is also applied to the characters by applying a random color from a pre-defined palette, and applying a random multiple-of-90deg rotation.

See the Pen Unicode Picture by Alex Goff (@alexgoff) on CodePen.


New CSS Drawing

Not a big post, just wanted to add a new CSS drawing for February. It’s been a while so here is a little older house situated in front of the water (ocean?).

See the Pen CSS Drawing: House by Alex Goff (@alexgoff) on CodePen.


CSS Drawings

I have been doing some CSS recently, trying to improve drawing skills and learning CSS animations. I’ve found that CSS drawing has also taught me much more about positioning than I knew before

First drawing:

An illustration of what my desk at work looks like

See the Pen CSS Desk Drawing by Alex Goff (@alexgoff) on CodePen.

A cactus:

See the Pen CSS Cactus by Alex Goff (@alexgoff) on CodePen.

A sleeping bear:

See the Pen CSS Images 001 Bear Cub by Alex Goff (@alexgoff) on CodePen.