Новый тренд в дизайне - милые цветные кружочки (квадратики) различного цвета с первой или двумя первыми буквами имени. Так сейчас делают все: браузер Сафари, почтовые клиенты, социальные сети.
Здесь я покажу как это сделать с помощью JavaScript. Главный вопрос – подбор цвета?
Цвет мы будет генерировать из строки с именем. На самом деле подойдет абсолютно любая строка, но так как и букву мы берем из имени, то и цвет будет генерировать из него же.
Вот так будет выглядеть наш HTML:
<div class="user-info">
<div class="user-info-avatar" id="avatar"></div>
<div class="user-info-name" id="name"></div>
</div>
Добавим немного CSS-стилей:
.user-info-avatar {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 15px;
text-align: center;
margin-right: 10px;
color: white;
}
.user-info-name {
display: inline-block;
}
А теперь JavaScript:
var stringToColor = function stringToColor(str) {
var hash = 0;
var color = '#';
var i;
var value;
var strLength;
if(!str) {
return color + '333333';
}
strLength = str.length;
for (i = 0; i < strLength; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
for (i = 0; i < 3; i++) {
value = (hash >> (i * 8)) & 0xFF;
color += ('00' + value.toString(16)).substr(-2);
}
return color;
};
var name = 'Михаил';
var letter = name.substr(0, 1);
var backgroundColor = stringToColor(name);
var elementAvatar = document.getElementById('avatar');
var elementName = document.getElementById('name');
elementName.innerHTML = name;
elementAvatar.innerHTML = letter;
elementAvatar.style.backgroundColor = backgroundColor;
За генерирование цвета отвечает функция stringToColor
. Она принимает строку с именем (любую строку), переводит ее в биты и уже из них в HEX-цвет. Если мы не передадим в функцию ничего, то получим в ответ цвет по умолчанию – в данном примере, #333333
.
Вот таким нехитрым образом можно делать такое модное нынче оформление при отсутствии аватара.
Booking.com — система интернет-бронирования отелей, основана в 1996 году. Штаб-квартира компании находится в Амстердаме.
Продолжая тему статей из игрового прошлого, выкопал пост 2003 года еще одного моего древнейшего товарища.
Если вы молоды душой и официально (младше 18 лет), то читать как бы нельзя.
В 2002-м году мой друг, а тогда еще и одноклассник, Денис «denser» очень любил компьютерную игру Quake 3 Arena. Но в это время популярность начала набирать появившаяся из ниоткуда игра Counter Strike.
Денис не хотел с этим мириться и написал статью F-ck CS. Я ее перечитал, исправил и даю на прочтение.