---
layout: default
title: CSS Fun
permalink: /projects/css-fun
---
<!-- <link rel="stylesheet" type="text/css" href="{{ '/css/css-fun.css' | prepend: site.baseurl }}"/> -->
<div class="museum-frame" id="pac-man" title="Two semicircles run an alternating animation in an infinite loop. The containing div uses overflow to hide the pellet when outside the frame.">
  pac
  <span id="pellet"></span>
  <span id="pac"></span>
</div>
<div class="museum-frame" id="shadow-fade" title="This uses a combination of transition and inset box shadow.">fade</div>
<div class="museum-frame" id="spin-lock" title="Using transition instead of animation for this simple transform allows the ring segments and cross to smoothly animate when the mouse hovers over and out of the element.">
  spin
  <span class="lock-ring" id="ring-top"></span>
  <span class="lock-ring" id="ring-right"></span>
  <span class="lock-ring" id="ring-left"></span>
  <span class="lock-ring" id="ring-bottom"></span>
  <span id="keyhole"></span>
</div>
<div class="museum-frame" id="gears" title="">
  gears
  <span class="gear">
    <span class="cross"></span>
    <span class="cross"></span>
  </span>
  <span class="gear">
    <span class="cross"></span>
    <span class="cross"></span>
  </span>
  <span class="gear">
    <span class="cross"></span>
    <span class="cross"></span>
  </span>
</div>

---
layout: default
title: CSS Fun
permalink: /projects/css-fun
---
<!-- <link rel="stylesheet" type="text/css" href="{{ '/css/css-fun.css' | prepend: site.baseurl }}"/> -->
<div class="museum-frame" id="pac-man">
  pac
  <span id="pellet"></span>
  <span id="pac"></span>
</div>
<div class="museum-frame" id="shadow-fade">
  fade
</div>
<div class="museum-frame" id="spin-lock">
  spin
  <span class="lock-ring" id="ring-top"></span>
  <span class="lock-ring" id="ring-right"></span>
  <span class="lock-ring" id="ring-left"></span>
  <span class="lock-ring" id="ring-bottom"></span>
  <span id="keyhole"></span>
</div>
<div class="museum-frame" id="gears" title="">
  gears
  <span class="gear">
    <span class="cross"></span>
    <span class="cross"></span>
  </span>
  <span class="gear">
    <span class="cross"></span>
    <span class="cross"></span>
  </span>
  <span class="gear">
    <span class="cross"></span>
    <span class="cross"></span>
  </span>
</div>

Remove titles from css fun museum frames
Remove titles from css fun museum frames
