Creating art with CSS

Chen Hui Jing / @hj_chen

@hj_chen

🇲🇾 🏀 👩‍💻 📝 🦊

🥑 Developer Advocate 🥑

Tycho Album Artwork

Awake (2014)

Montana Single (2014)

Tycho Album Artwork

First single from Epoch: Division (2016)

Epoch (2016)

Shapes with CSS (1/3)

This be a circle

.circle {
  width: 30vmin;
  height: 30vmin;
  background: #f2af29;
  border-radius: 50%; /* This is the key line, right here */
  margin: 0 auto;
}

Shapes with CSS (2/3)

This be a triangle

.triangle {
  border-top: 18.75vmin solid transparent;
  border-bottom: 18.75vmin solid transparent;
  border-left: 18.75vmin solid #1e292f;
}

Shapes with CSS (3/3)

This be a trapezium

.trapezium {
  width: 60vmin;
  height: 30vmin;
  background: #1e292f;
  clip-path: polygon(33% 0, 67% 0, 100% 100%, 0% 100%); /* This is the key line, right here */
}

Unfortunately, clip-path is NOT supported in Edge or IE 😔

Pseudo-elements

::before and ::after

.element::before {
  content: '';
  display: block;
  width: 50%;
  height: 50%;
}

Must have the content property to work

At least have empty quotes

Not visible in the page's source, only in CSS

Gradients

Can be used in any property that accepts images, e.g. background, list-style-image etc.

linear-gradient( [ <angle> | <side-or-corner> ]?, <color-stop-list> )

First argument specifies gradient line, defaults to to-bottom if omitted. Can use angle or keyword.

<color-stop-list> = <color-stop>#{2,}
<color-stop> = <color> <length-percentage>?

At least 2 values, no maximum limit. Between 2 colour stops, the line's colour is linearly interpolated between the 2 colours.

For clean change between 2 colours, have 2 colour stops at the same position, i.e. at least 4 <color-stop> values needed.

.element {
  background-image: linear-gradient(orange, green)
}

.element {
  background-image: linear-gradient(orange, orange 50%, green 50%, green)
}

Box-shadow

Multiple box shadows are a thing

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

Make use of the offsets for positioning, and the blur radius for sizing

.box-shadow {
  border-radius: 50%;
  height: 1px;
  width: 1px;
  box-shadow: -6em   0 0 0.5em #47473f, -4em   0 0 0.5em #47473f,
              -2em   0 0 0.5em #47473f,    0   0 0 0.5em #47473f,
               4em   0 0 0.5em #47473f, -6em 2em 0 0.5em #47473f,
              -4em 2em 0 0.5em #47473f,    0 2em 0 0.5em #47473f,
               2em 2em 0 0.5em #47473f,  4em 2em 0 0.5em #47473f,
               6em 2em 0 0.5em #47473f;
}

Transforms

Do not work on inline elements. Transforms are cumulative and operate from their transform-origin. There are 2d and 3d transforms available.

.element {
  transform-origin: 50% 50% /* Default values if not explicitly set */
}

Transform functions include, rotate(), scale(), translate() and skew().

/* If you need multiple transforms, do this */
.element {
  transform: translate(-10px, -20px) scale(2) rotate(45deg)
}

/* Do NOT do this */
.element {
  transform: translate(-10px, -20px);
  transform: scale(2);
  transform: rotate(45deg);
}

Useful links and resources

Thank you!

https://www.chenhuijing.com

@hj_chen

@huijing

Font is Magnetic Pro by Olivier Gourvat