Буквы вместо аватарок

Бесплатные скрипты

<div class="name-box">  
  <span><? substr($USERNAME$,0,1) ?></span>  
</div>

/* Делаем noava как на Mail.ru */  
.name-box {  
  margin: 3px;  
}  
.name-box span,  
.noava {  
  display: inline-block;  
  vertical-align: middle;  
}  
.noava {  
  width: 45px;  
  height: 45px;  
  margin-right: 5px;  
  background: #333;  
  border-radius: 3px;  
}  
.noava > text {  
  width: 45px;  
  height: 45px;  
  font-size: 23px;  
  text-transform: uppercase;  
  font-family: Arial;  
  fill: rgba(255,255,255,.9);  
  text-shadow: 0px 0px 3px rgba(255,255,255,.3);  
}  
.noava-0,  
.noava-7,  
.noava-а,  
.noava-А,  
.noava-с,  
.noava-С,  
.noava-н,  
.noava-Н,  
.noava-я,  
.noava-Я,  
.noava-ю,  
.noava-Ю,  
.noava-ё,  
.noava-Ё,  
.noava-e,  
.noava-E,  
.noava-l,  
.noava-L,  
.noava-s,  
.noava-S,  
.noava-z,  
.noava-Z {  
  background: #e74c3c;  
}  

.noava-1,  
.noava-8,  
.noava-б,  
.noava-Б,  
.noava-О,  
.noava-о,  
.noava-з,  
.noava-З,  
.noava-к,  
.noava-К,  
.noava-ы,  
.noava-Ы,  
.noava-f,  
.noava-F,  
.noava-m,  
.noava-M,  
.noava-t,  
.noava-T {  
  background: #e67e22;  
}  

.noava-2,  
.noava-9,  
.noava-Х,  
.noava-х,  
.noava-ч,  
.noava-Ч,  
.noava-ю,  
.noava-Ю,  
.noava-е,  
.noava-Е,  
.noava-щ,  
.noava-Щ,  
.noava-g,  
.noava-G,  
.noava-n,  
.noava-N,  
.noava-u,  
.noava-U {  
  background: #f1c40f;  
}  

.noava-3,  
.noava-В,  
.noava-в,  
.noava-п,  
.noava-П,  
.noava-Л,  
.noava-л,  
.noava-Й,  
.noava-й,  
.noava-a,  
.noava-A,  
.noava-h,  
.noava-H,  
.noava-o,  
.noava-O,  
.noava-v,  
.noava-V {  
  background: #2ecc71;  
}  

.noava-4,  
.noava-э,  
.noava-Э,  
.noava-т,  
.noava-Т,  
.noava-Д,  
.noava-д,  
.noava-и,  
.noava-И,  
.noava-У,  
.noava-у,  
.noava-b,  
.noava-B,  
.noava-i,  
.noava-I,  
.noava-p,  
.noava-P,  
.noava-w,  
.noava-W {  
  background: #3498db;  
}  

.noava-5,  
.noava-г,  
.noava-Г,  
.noava-М,  
.noava-м,  
.noava-Ф,  
.noava-ф,  
.noava-Ж,  
.noava-ж,  
.noava-ц,  
.noava-Ц,  
.noava-c  
.noava-C,  
.noava-j,  
.noava-J,  
.noava-q,  
.noava-Q,  
.noava-x,  
.noava-X {  
  background: #34495e;  
}  

.noava-6,  
.noava-Х,  
.noava-х,  
.noava-ч,  
.noava-Ч,  
.noava-ю,  
.noava-Ю,  
.noava-р,  
.noava-Р,  
.noava-ш,  
.noava-Ш,  
.noava-d,  
.noava-D,  
.noava-k,  
.noava-K,  
.noava-r,  
.noava-R,  
.noava-y,  
.noava-Y {  
  background: #8e44ad;  
}

<script> $('.name-box').each(  
  function(){  
  var name = $(this).children('span').text(),  
  str = name.replace(/[^0-9-A-Za-zА-Яа-яЁё]/g, ''),  
  i = str.substr(0,1);  
  $(this).html('<svg class="noava noava-' + i + '"><text x="15.5" y="31">' + i + '</text></svg>');  
  }  
  );</script>