Pure CSS Art: Day 3

I tried replicating Sasha Tran’s Pikachu without looking at anyone’s code. Since Pikachu’s features are mainly circles, this was pretty easy to make. (Though it still doesn’t look exactly like Sasha’s. Something’s off with the left eye, mouth, and nose. Will fix upon my second attempt.)

See Codepen 

Takeaways: 

• Used one shape to block out another shape to create the effect I wanted i.e. the left eye is really a black oval superimposed by a yellow oval
• Added audio with the HTML5 <audio> element, which specifies a standard way to embed audio in a web page (a music player bar is displayed)

<audio> element:

• The controls attribute adds audio controls i.e. play, pause, and volume
• The <source> element allows specification of alternative audio files which the browser may choose from; browser will use the first recognized format
• The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element
• autoplay attribute : <audio controls autoplay></audio> automatically plays the audio file
• loop attribute: <audio controls loop></audio> loops the audio file
• <audio controls autoplay loop></audio> automatically plays the audio file and then loops it
• The 3 supported audio formats in HTML5: ogg, wav, mp3

NB: The source has to be an audio file that ends in a supported audio format. Dropping that audio file into Google Drive or Dropbox and using that URL as the source does not work.

To Do:

• Review what display: block means
• Find ways to hide the music player bar