A Piece of CSS Illustration

Meiko Hori / @m3iq

Who I am

Meiko Hori  (@m3iq)

  • Project lead at IT company
  • Parent of two sons (4y & 4m)

I haven't written code for a long time...

Why don't I start with something playful?

Drawing with CSS?

  • All you need is a browser & a text editor
  • Or, just all-in-one tools like Codepen
    • ​https://codepen.io

-> A great place to find amazing works by others!

How do you make sushi out of CSS?

Let's get started

<div class="neta"></div>
<div class="shari"></div>
div {
    width: 100px;
    height: 100px;
}
.neta {
    background-color: red;
}
.shari {
    background-color: white;
}
  • A piece of sushi consists of neta and shari... so perhaps prep two <div>s ?
  • Let's make them red and white first

Adding textures & tweaking

.neta {
  background: repeating-linear-gradient(
    10deg, 
    $neta-red,
    $neta-red 6px,
    $neta-pink 12px
  );
}
div {
  transform: skewX(45deg);
  border-radius: 20%;
}
  • Add stripes to neta to make it look more real
  • Skewing, rounding corners might get those divs more sushi-shaped?

Voilà!

The complete code can be found on: https://codepen.io/meiq/pen/xerRNM

Getting Hungry?

Talk to you @ After party!!!

A Piece of CSS Illustration

By meiko hori

Made with Slides.com

A Piece of CSS Illustration

はじめての英語プレゼン #8

  • 458