|
   |
| Форум » Все для вебмастера » Уроки для Веб-Мастеров » Информативные аватары: 5 способов оформления аватарок |
| Информативные аватары: 5 способов оформления аватарок |
|
|
| |||
| |||
|
|
| Форум » Все для вебмастера » Уроки для Веб-Мастеров » Информативные аватары: 5 способов оформления аватарок |
| Информативные аватары: 5 способов оформления аватарок |
|
|
| |||
| |||
Лично сам я искал ее очень давно)
Аватар пользователя - его визитная карточка, его индивидуальность, к нему обращено внимание других пользователей. Именно поэтому полезно на изображении аватара размещать какую-либо информацию.
Мы рассмотрим, как повысить информативность аватара пользователя на примерах.
1. Статус пользователя (онлайн/оффлайн) на аватаре.
HTML код:
<img alt="" src="Здесь адрес картинки-аватарки">
<i class="avatar-status bg-danger"></i>
</div>
Таблицу стилей (CSS) :
.avatar img{border-radius:50%;width:100%;display:block}
.avatar .avatar-status{position:absolute;display:block;border:2px solid #fff;border-radius:100%;z-index:12;
width:16px;height:16px;top:3px;right:6px}
.bg-danger{background-color:#CB3D4A}
.bg-success{background-color:#84b547}
Заменив класс bg-danger на bg-success, получим отображение статуса иконки зелёного цвета. Если статус нужно разместить в нижней части аватара, то добавляем класс avatar-status-bottom
HTML код:
<img alt="" src="Здесь адрес картинки-аватарки">
<i class="avatar-status bg-danger"></i>
</div>
В таблицу стилей (CSS) добавляется еще одна строка по сравнению с предыдущим вариантом:
.avatar img{border-radius:50%;width:100%;display:block}
.avatar .avatar-status{position:absolute;display:block;border:2px solid #fff;border-radius:100%;z-index:12;
width:16px;height:16px;top:3px;right:6px}
.avatar .avatar-status.avatar-status-bottom{top:auto;bottom:0}
.bg-danger{background-color:#CB3D4A}
.bg-success{background-color:#84b547}
2. Статус пользователя (онлайн/оффлайн) на аватаре с помощью Label.
HTML код:
<span class="label label-danger">1</span>
<img alt="" src="Здесь адрес картинки-аватарки">
</div>
Таблицу стилей (CSS) :
.avatar img{border-radius:50%;width:100%;display:block}
.label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;position:absolute;top:0px;right:3px;}
.label-danger{background-color:#CB3D4A}
3. Статус пользователя (онлайн/оффлайн) на аватаре с помощью Badge.
HTML код:
<span class="badge">1</span>
<img alt="" src="Здесь адрес картинки-аватарки">
</div>
Таблицу стилей (CSS) :
.avatar img{border-radius:50%;width:100%;display:block}
.badge{display:inline-block;min-width:10px;padding:3px 7px;font-size:10px;font-weight:700;color:#fff;line-height:1;vertical-align:middle;white-space:nowrap;text-align:center;background-color:#B3B9C4;border-radius:10px;position:absolute;top:0px;right:3px;}
4. Микс из иконки статуса пользователя (онлайн/оффлайн) и Badge.
HTML Код:
<span class="badge">1</span>
<img alt="" src="Здесь адрес картинки-аватарки">
<i class="avatar-status avatar-status-bottom bg-success"></i>
</div>
Таблицу стилей (CSS) :
.avatar img{border-radius:50%;width:100%;display:block}
.avatar .avatar-status{position:absolute;display:block;border:2px solid #fff;border-radius:100%;z-index:12}
.avatar .avatar-status{width:16px;height:16px;top:3px;right:6px}
.avatar .avatar-status.avatar-status-bottom{top:auto;bottom:0}
.badge{display:inline-block;min-width:10px;padding:3px 7px;font-size:10px;font-weight:700;color:#fff;line-height:1;vertical-align:middle;white-space:nowrap;text-align:center;background-color:#B3B9C4;border-radius:10px;position:absolute;top:0px;right:3px;}
.bg-success{background-color:#84b547}
5. Микс из иконки статуса пользователя (онлайн/оффлайн) и Label.
HTML код:
<span class="label label-danger">10</span>
<img alt="" src="Здесь адрес картинки-аватарки">
<i class="avatar-status avatar-status-bottom bg-success"></i>
</div>
Таблицу стилей (CSS):
.avatar img{border-radius:50%;width:100%;display:block}
.avatar .avatar-status{position:absolute;display:block;border:2px solid #fff;border-radius:100%;z-index:12}
.avatar .avatar-status{width:16px;height:16px;top:3px;right:6px}
.avatar .avatar-status.avatar-status-bottom{top:auto;bottom:0}
.label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;position:absolute;top:0px;right:3px;}
.label-danger{background-color:#CB3D4A}
.bg-success{background-color:#84b547}
Вот и всё)
Источник: ps-studio