text box zebra

pre {
  background-color:white;
  background-image:-webkit-linear-gradient(top, #f5f5f5 50%, white 50%);
  background-image:-moz-linear-gradient(top, #f5f5f5 50%, white 50%);
  background-image:-ms-linear-gradient(top, #f5f5f5 50%, white 50%);
  background-image:-o-linear-gradient(top, #f5f5f5 50%, white 50%);
  background-image:linear-gradient(top, #f5f5f5 50%, white 50%);
  -webkit-background-size:30px 30px;
  -moz-background-size:30px 30px;
  -ms-background-size:30px 30px;
  -o-background-size:30px 30px;
  background-size:30px 30px;
  background-repeat:repeat;
  font:normal bold 12px/15px Courier,monospace;
  color:#333;
  border:2px solid #666;
  position:relative;
  padding:0 7px;
  margin:10px 0;
  height:250px;
  word-wrap:normal;
  white-space:pre;
  position:relative;
}

pre[data-codetype] {
  padding:45px 1em 7px 1em;
}

pre[data-codetype]:before {
  content:attr(data-codetype);
  display:block;
  position:absolute;
  background-color:#666;
  top:0;
  right:0;
  left:0;
  border-bottom:2px solid #999;
  padding:5px 5px 5px 7px;
  font:bold 14px/20px Arial,Sans-Serif;
  color:white;
}

pre[data-codetype="HTML"] {
  border-color:#0B7E88;
  color:#08464B;
  -webkit-box-shadow:5px 5px 5px rgb(7,55,99);
  -moz-box-shadow:5px 5px 5px rgb(7,55,99);
  box-shadow:5px 5px 5px rgb(7,55,99);}

pre[data-codetype="CSS"] {
  border-color:#080;
  color:#4B5D08;
  -webkit-box-shadow:5px 5px 5px rgb(56,118,29);
  -moz-box-shadow:5px 5px 5px rgb(56,118,29);
  box-shadow:5px 5px 5px rgb(56,118,29);}

pre[data-codetype="JavaScript"] {
  border-color:#545448;
  color:#1F2E24;
  -webkit-box-shadow:5px 5px 5px rgb(102,102,102);
  -moz-box-shadow:5px 5px 5px rgb(102,102,102);
  box-shadow:5px 5px 5px rgb(102,102,102);}

pre[data-codetype="JQuery"] {
  border-color:#395540;
  color:#2E2E27;
  -webkit-box-shadow:8px 5px 8px rgb(12,52,61);
  -moz-box-shadow:5px 5px 5px rgb(12,52,61);
  box-shadow:5px 5px 5px rgb(12,52,61);}

pre[data-codetype="HTML"]:before {background-color:#0B7E88;}
pre[data-codetype="CSS"]:before {background-color:#7B990C;}
pre[data-codetype="JavaScript"]:before {background-color:#545448;}
pre[data-codetype="JQuery"]:before {background-color:#395540;}