paint spray can

I didn't remember what I can do and what I cannot.

by jshacker

HTML

<div class="paint-spray-can">
  <div class="cap"></div>
  <div class="nozzle">
    <div class="button"></div>
  </div>
</div>

CSS

body {
  background-color: #f0f0f0;
}

.paint-spray-can {
  height: 200px;
  width: 80px;
  background-color: #6666aa;
  margin: 100px auto;
  border-radius: 10px 10px 20px 20px;
  position: relative;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Cap */
.cap {
  width: 100px;
  height: 30px;
  background-color: #555;
  position: absolute;
  top: -20px;
  left: -10px;
  border-radius: 5px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

/* Nozzle */
.nozzle {
  width: 30px;
  height: 20px;
  background-color: #999;
  position: absolute;
  top: -40px;
  left: 25px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Nozzle Button */
.button {
  width: 10px;
  height: 10px;
  background-color: #222;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 10px;
}