Ms. Hoff and Mr. Voff Go On A Date

CodePen Fun

One of my new favourite things is playing around with the cool things I'm learning at hackerYou.

My classmates are doing really wonderful things in their own CodePens so yesterday I decided to Fork one of their CodePens and create new life.

Introducing Mr. Voff

Amy Allen created a "CSS Girl" using only divs and positioning, on our first week of class. We affectionately refer to CSS Girl as Ms. Hoff.

In honour of Valentine's Day, today I brought to life a partner for our lovely CSS Girl. I named him Mr. Voff.

Ms. Hoff and Mr. Voff

I used some great Valentines from Danielle Webb's really sweet website www.cssvalentines.com and voilá! Mr. Voff has found a date.

Learnings

Every CodePen I build teaches me something. In this case I was excited to discover the CSS attribute that allows you to round the top-left, top-right, bottom-left or bottom-right corners of a div using border-radius. I wanted to round out Mr. Voff's shoulders so I used the following:

.boy .body {
    border-top-left-radius: 1rem;
      border-top-right-radius: 1rem;
}

The second cool thing I played around with was using -webkit-transform-origin to make the arms of Mr. Voff and Ms. Hoff rotate out from the shoulder(top) in order to meet in the middle.

@-webkit-keyframes touchBoy {
  0% {
        -webkit-transform: rotate(8deg)
        -webkit-transform-origin: right top;
      }

  100% {
        -webkit-transform:rotate(14deg);
        -webkit-transform-origin: right top;
      }
}

I plan to improve on the animation in the Pen at a later date.

In the mean time, I challenge anyone to fork my pen and create Baby Blur.

Play around in my Pen here

Happy Valentine's Day!