User Wheel

Communication illustration overriding text.

by hyperthalamus

HTML

<div class="userWheel">
<span class="card">A new idea is presented to the group. </span>
<span class="spoke userOne active understands">
  <span class="node">
    <span class="label">User one </span>
    <span class="relationship">is engaged in the conversation</span>
    <span class="user"><span class="status"> and understands. </span></span>
  </span>
</span>
<span class="spoke userTwo inactive">
  <span class="node">
    <span class="label">User two </span>
    <span class="relationship">is not engaged in the conversation. </span>
    <span class="user"><span class="status"></span></span>
  </span>
</span>
<span class="spoke userThree active understands">
  <span class="node understood">
    <span class="label">User three </span>
    <span class="relationship">is engaged in the conversation</span>
    <span class="user"><span class="status"> and understands. </span></span>
  </span>
</span>
<span class="spoke userFour inactive active">
  <span class="node">
    <span class="label">User four </span>
    <span class="relationship">is not engaged in the conversation. </span>
    <span class="user"><span class="status"></span></span>
  </span>
</span>
<span class="spoke userFive active">
  <span class="node misunderstands">
    <span class="label">User five </span>
    <span class="relationship">is engaged in the conversation</span>
    <span class="user"><span class="status"> and misunderstands. </span></span>
  </span>
</span>
</div>

CSS

div.userWheel{
  position: relative;
  width : 600px;
  height: 600px;
  font-family: arial;
  text-indent: -9999px;
}
div.userWheel span {
  position: absolute;
  display: block;
}
div.userWheel span.spoke,
div.userWheel span.user,
div.userWheel span.card,
span.node span.received,
span.node span.relationship,
span.user span.failed,
span.user span.status {
  background-image: url(http://headspaced.com/wp-content/sprites/cardsSprite.png);
}
span.node span.label {
  top: 100px;
  text-align: center;
  font-weight: bold;
  width: 90px;
  font-size: 8.5pt;
}
div.userWheel span.card {
  width: 80px;
  height: 35px;
  background-position: -305px -63px;
  top: 270px;
  left : 250px;
  z-index: 10;
}
div.userWheel span.spoke,
div.userWheel span.node {
  background: none;
}
div.userWheel span.spoke,
div.userWheel span.node,
div.userWheel span.user {
  background-position: -10px -5px;
  width: 90px;
  height: 100px;
  z-index: 0;
}

span.inactive span.user {
  background-position: -100px -10px;
}
span.inactive span.relationship,
span.inactive span.status {
  display: none;
}
span.user span.status {
  width: 50px;
  height: 40px;
}
span.understands span.status { background-position: -204px -55px;  top: 50px; left: 50px;}
span.misunderstands span.status { background-position: -204px -15px; top: 55px; left: 53px;}

div.userWheel span.userOne { top: 33px; left: 238px; }
div.userWheel span.userOne span.relationship {
  width: 9px;
  height: 90px;
  top: 130px;
  left: 50px;
  background-position: -265px -15px;
}
div.userWheel span.userTwo { top: 210px; left: 45px; }
div.userWheel span.userTwo span.relationship {
  width: 90px;
  height: 9px;
  top: 70px;
  left: 110px;
  background-position: -303px -17px;
}
div.userWheel span.userThree { top: 210px; left: 433px; }
div.userWheel span.userThree span.relationship {
  width: 90px;
  height: 9px;
  top: 70px;
  left: -85px;
  background-position: -303px -17px;
}
div.userWheel span.userFour { top: 400px; left: 120px; }
div.userWheel...