Звания, имена, баннеры групп

Здесь Звания, имена, баннеры групп я описывал как сделать свои баннеры, но можно немного усовершенствовать код для удобства добавления последующих групп:

Код:Скопировать

/* Баннеры групп */

/* Общий стиль для всех баннеров */

[class*="style_"] {
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    display: block;
    font-size: 11px;
    margin: 4px 0 5px;
    padding: 2px 6px 3px;
    position: relative;
    text-align: center;
    color: white;
    text-shadow: 0 0 0 transparent, 1px 1px 1px black;
    width: 98px;
}

/* Баннер администратора */

.style_admin {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.3);
}

/* Баннер модератора */

.style_moder {
    background-color: rgba(0, 155, 4, 0.5);
    border: 1px solid rgba(0, 155, 4, 0.7);
}

/* Баннер пользователя */

.style_lamer {
    background-color: rgba(22, 171, 227, 0.6);
    border: 1px solid rgba(22, 171, 227, 0.7);
}

/* Баннер проверенного */

.style_user {
    background-color: rgba(0, 51, 155, 0.5);
    border: 1px solid rgba(0, 51, 155, 0.7);
}

/* Баннер местного */

.style_local {
    background-color: rgba(0, 62, 170, 0.6);
    border: 1px solid rgba(0, 62, 170, 0.7);
}

/* Баннеры групп */

При таком использовании селекторов css, последующие группы добавляются с классом .style_новая группа и в общем стиле уже ни чего добавлять не надо.

В предыдущем обновлении, я написал как сделать всплывающую подсказку, но для экономии символов убрал иконку Font Awesome. Но возможно все совместить если иконку указать в стиле CSS.

Код:Скопировать

.admin_style strong:before {
    font-family:'FontAwesome';
    content: "\f19d";
}

Сделаем всплывающую подсказку для баннера группы. Но надо учитывать, там ограничение на ввод символов.
Текст баннера пользователя:

Код:Скопировать

<span class="Tooltip" title="Самый крутой" >Администратор</span>

Получаем:

Добавим иконки Font Awesome к тексту баннера.

Иконки можно посмотреть и выбрать

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

, и добавить в "Текст баннера пользователя"

Код:Скопировать

<i class="fa fa-graduation-cap"></i> Администратор

Получим:

Добавим эффект при наведении (hover)

Читаем выше и в EXTRA.css, к уже сделанному добавим:

Код:Скопировать

.admin_style:hover, .lamer_style:hover, .moder_style:hover, .user_style:hover {
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6));
    color: #ccc;
    transition-duration: 0.5s;
    cursor: pointer;
}

Получим:

Пример баннеров с применением стилей CSS.

Сделаем баннеры с использованием только CSS. Как уже говорилось для этого используем "Другой, используя своё имя CSS-класса", задаем для каждой группы свой класс, а в EXTRA.css, укажем стили для этих классов:

Код:Скопировать

.admin_style, .lamer_style, .moder_style, .user_style {
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    display: block;
    font-size: 11px;
    margin: 4px 0 5px;
    padding: 2px 6px;
    position: relative;
    text-align: center;
    color: white;
    text-shadow: 0 0 0 transparent, 1px 1px 1px black;
    width: 98px;
}
.admin_style {
    background-color: rgba(255, 0, 0, 0.5);
    border: 1px solid rgba(255, 0, 0, 0.7);
}
.moder_style {
    background-color: rgba(0, 155, 4, 0.5);
    border: 1px solid rgba(0, 155, 4, 0.7);
}
.user_style {
    background-color: rgba(0, 51, 155, 0.5);
    border: 1px solid rgba(0, 51, 155, 0.7);
}
.lamer_style {
    background-color: rgba(0, 158, 217, 0.5);
    border: 1px solid rgba(0, 158, 217, 0.7);
}

Получим:

Анимированный фон для имени(ника) пользователей

Некоторые делают для ников анимированный фон, типа такого:

Сделать это просто, надо в "CSS-стиль для имени пользователя" добавить фон

Код:Скопировать

background: url(папка с картинкой/glitter_001.gif) no-repeat

В архиве есть несколько таких фонов